Componente Botones
Un componente de botones de estilo 3D adecuado para una cartera con un esquema de color análogo y compatibilidad con el modo oscuro.
Código HTML
<div class="flex flex-col items-center justify-center mt-10 space-y-4">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200">Showcase Your Work</h2>
<div class="flex space-x-4">
<a href="#" class="bg-blue-500 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 text-white font-semibold py-2 px-4 rounded-xl shadow-md transform transition-all duration-300 ease-in-out hover:scale-105">Portfolio</a>
<a href="#" class="bg-green-500 hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-800 text-white font-semibold py-2 px-4 rounded-xl shadow-md transform transition-all duration-300 ease-in-out hover:scale-105">Products</a>
<a href="#" class="bg-purple-500 hover:bg-purple-600 dark:bg-purple-700 dark:hover:bg-purple-800 text-white font-semibold py-2 px-4 rounded-xl shadow-md transform transition-all duration-300 ease-in-out hover:scale-105">Contact</a>
</div>
</div>
<div class="flex flex-col items-center justify-center mt-10 space-y-4">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200">Our Team</h2>
<div class="flex space-x-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Team Member" class="rounded-full w-16 h-16 shadow-lg" />
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Team Member" class="rounded-full w-16 h-16 shadow-lg" />
<img src="https://randomuser.me/api/portraits/men/12.jpg" alt="Team Member" class="rounded-full w-16 h-16 shadow-lg" />
</div>
</div>
<div class="flex flex-col items-center justify-center mt-10 space-y-4">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200">Portfolio Preview</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<img src="https://picsum.photos/id/1011/400/300" alt="Portfolio Item" class="w-full h-auto rounded-xl shadow-xl" />
<img src="https://picsum.photos/id/1012/400/300" alt="Portfolio Item" class="w-full h-auto rounded-xl shadow-xl" />
<img src="https://picsum.photos/id/1013/400/300" alt="Portfolio Item" class="w-full h-auto rounded-xl shadow-xl" />
</div>
</div>Componentes relacionados
Componente de botones de brutalismo
Un componente de botones con un diseño brutalista, con colores de alta saturación, diseño receptivo y soporte de modo oscuro, adecuado para sitios web comerciales y corporativos.
Componente de botones neumórficos
Un componente de botón con un estilo de diseño neumórfico con efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS.