Todos os componentes

Hovercard1

Hovercard1 é 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 é

Hovercard1 é 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.

Hovercard1

./registry/components/card/hover-card1.tsx
import { MoveUpRight } from 'lucide-react';
import Image from 'next/image';
import React, { useState } from 'react';

function HoverCard1() {
  return (
    <>
      <article className={` relative pb-4  overflow-hidden`}>
        <div className='w-full rounded-md h-full overflow-hidden'>
          <Image
            src={
              'https://images.unsplash.com/photo-1726824766931-4bd8b59af37c?q=80&w=800&auto=format&fit=crop'
            }
            alt={'image'}
            height={600}
            width={1200}
            className='h-full w-full object-cover rounded-xl hover:scale-100 scale-105 transition-all duration-300'
          />
        </div>
        <div className='absolute bottom-2 text-black w-full p-4 flex justify-between items-center'>
          <h3 className='sm:text-xl text-sm bg-black text-white rounded-xl p-2 px-4'>
            Distrokings
          </h3>

          <button className='group relative inline-flex h-12 w-12 items-center justify-center overflow-hidden rounded-full bg-[#080918]   font-medium text-neutral-200 border-2 transition-all duration-300 hover:w-24'>
            <div className='inline-flex whitespace-nowrap opacity-0 transition-all duration-200 group-hover:-translate-x-3 group-hover:opacity-100'>
              Visit
            </div>
            <div className='absolute right-3'>
              <MoveUpRight />
            </div>
          </button>
        </div>
      </article>
    </>
  );
}

export default HoverCard1;

Componentes parecidos