Todos os componentes

Hovercard4

Hovercard4 é um componente de cartão para React e Tailwind CSS, da biblioteca UI Layouts, com licença MIT. Copia e cola no teu projeto.

UI Layouts MIT cards

O que é

Hovercard4 é um componente de cartão para React e Tailwind CSS, da biblioteca UI Layouts, com licença MIT. Copia e cola no teu projeto.

Como usar

Abre o componente no catálogo, carrega em copiar, e cola no teu projeto. O prompt copiado leva o código e as regras para o teu agente o reproduzir sem alterar nada.

Abrir no catálogo

Cinco cópias grátis por mês. Sem cartão.

Precisa de

npm i motion

Licença

Este componente vem de UI Layouts e é redistribuído sob a licença MIT, que permite uso comercial. O aviso de copyright viaja com o código.

Hovercard4

./registry/components/card/hover-card4.tsx
import { ArrowBigDown, ArrowRight, ChevronRight, ChevronsRight, Heart } from 'lucide-react';
import Image from 'next/image';
import React, { useState } from 'react';

function HoverCard4() {
  return (
    <>
      <div className='w-[90%] relative mt-4  group mx-auto dark:bg-black  bg-white dark:border-0 border overflow-hidden rounded-md dark:text-white text-black '>
        <figure className='w-full h-62 rounded-md  overflow-hidden'>
          <Image
            src={
              'https://images.unsplash.com/photo-1565759732117-a48f0bedbbfd?q=80&w=1000&auto=format&fit=crop'
            }
            alt='shoes'
            width={600}
            height={600}
            className='h-full w-full  scale-105 group-hover:scale-100 rounded-lg object-cover transition-all duration-300'
          />
        </figure>
        <div className='p-4 space-y-1  transition-all duration-300 '>
          <span className='text-sm'>9 des 2023</span>
          <h1 className='text-lg font-medium capitalize '>
            Learn why UI/UX Important and How Implement well in your site.
          </h1>
          <a
            href='#'
            className='bg-green-400 w-fit text-base dark:text-white rounded-md text-blue-600 font-normal p-2 flex justify-center '
          >
            Read Story
            <span className='relative'>
              <ChevronRight className='group-hover:opacity-0 opacity-100 translate-y-0 group-hover:translate-y-2 transition-all duration-300 ' />
              <ChevronsRight className='absolute top-0 group-hover:opacity-100 opacity-0 translate-y-2 group-hover:translate-y-0 transition-all duration-300 ' />
            </span>
          </a>
        </div>
      </div>
    </>
  );
}

export default HoverCard4;

Componentes parecidos