Todos os componentes

Gradient Border

Gradient Border é um componente de fundo para React e Tailwind CSS, da biblioteca UI Layouts, com licença MIT. Copia e cola no teu projeto.

UI Layouts MIT backgrounds

O que é

Gradient Border é um componente de fundo 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.

Não precisa de pacotes além do que o projeto já tem

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.

Gradient Border

./registry/components/card/gradient-border.tsx
// https://cruip-tutorials.vercel.app/cards-hover-effect/
import Image from 'next/image';
import React from 'react';

function GradientBorder() {
  return (
    <>
      <div className='w-full max-w-[422px] mx-auto [background:linear-gradient(45deg,#080b11,--theme(--color-slate-800)_50%,#172033)_padding-box,conic-gradient(from_var(--border-angle),--theme(--color-slate-600/.48)_80%,--theme(--color-indigo-500)_86%,--theme(--color-indigo-300)_90%,--theme(--color-indigo-500)_94%,--theme(--color-slate-600/.48))_border-box] rounded-2xl border border-transparent animate-border '>
        <div className='relative text-center z-10 px-0 py-16 rounded-2xl  w-fit h-full mx-auto'>
          <>
            <Image
              src={'/chat_zinhdw.webp'}
              alt='grid'
              width={600}
              className='mx-auto w-[85%]'
              height={600}
            />
            <h1 className='text-xl font-semibold tracking-tight text-white'>
              Create Group Effortlessly
            </h1>
            <p className='text-base pt-2  text-neutral-300 capitalize'>
              Seamless chats, crystal-clear videos, and <br />
              premium audio quality
            </p>
          </>
        </div>
      </div>
    </>
  );
}

export default GradientBorder;

Componentes parecidos