Card Hover

A card component with a hover effect, where the card scales up and casts a shadow when hovered over. The card also has a hover effect for the text, where the text scales up and turns bold when hovered over.

Component

Md Numan Ahmed

SDE-III at Struct-UI

Hi, I'm Numan. I've been working as a Software Engineer (Full Stack) for over 5 years. In this time, I've helped build and scale applications for different kinds of projects, from startups to growing businesses. While many know me as a “Full Stack” engineer, I like to see myself as a passionate problem solver — always eager to learn, share knowledge, and push boundaries to create meaningful digital experiences.

Next.jsReactAngularNode.js

View Profile

Y M

Yogesh Mishra

SDE-II at Struct-UI

I am Yogesh Mishra, a software engineer with over 3 years of experience in building scalable web applications. I have a strong foundation in React, Node.js, and Next.js, and I am passionate about learning new technologies and staying up-to-date with industry trends. Yogesh is a team player with a strong work ethic and is always eager to help others. He is currently working as a Software Engineer at Struct-UI and is responsible for developing and maintaining the company's web applications.

ReactNode.jsNext.jsTypeScript

View Profile

Other components

Badge Component

Read Docs to know more Badge

Badge.tsx

Component not found

Button Component

Read Docs to know more Buttons

BtnReadMore.tsx

const BtnReadMore = ({
  label = "Read More",
  link = "#",
  target = "_self",
  className = ""
}) => {
  return (
    <a href={link} target={target} className={`w-full ${className}`}>
      <div className="relative inline-flex items-center justify-start py-2 pl-4 pr-12 overflow-hidden font-semibold text-cyan-600 transition-all duration-150 ease-in-out rounded hover:pl-10 hover:pr-6 bg-gray-50 group w-full">
        <span className="absolute bottom-0 left-0 w-full h-1 transition-all duration-150 ease-in-out bg-indigo-600 group-hover:h-full bg-gradient-to-r from-cyan-500 to-blue-600"></span>
        <span className="absolute right-0 pr-4 duration-200 ease-out group-hover:translate-x-12">
          <svg className="w-5 h-5 text-cyan-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
          </svg>
        </span>
        <span className="absolute left-0 pl-2.5 -translate-x-12 group-hover:translate-x-0 ease-out duration-200">
          <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
          </svg>
        </span>
        <span className="relative w-full text-left transition-colors duration-200 ease-in-out group-hover:text-white">
          {label}
        </span>
      </div>
    </a>
  );
};

export default BtnReadMore;