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 Botones de Material Design
Componente de botones de diseño de materiales en tonos tierra para redes sociales
Botones de redes sociales de neumorfismo
Un componente de botón simple al estilo Neumorphism para interfaces de redes sociales, con diseño receptivo y soporte de modo oscuro usando Tailwind CSS. El botón utiliza un esquema de color análogo y sombras sutiles para crear un aspecto suave y extruido.
Skeuomorphic_Social_Buttons
Un complejo conjunto de botones skeuomórficos con una combinación de colores vibrantes, diseñados para interfaces de redes sociales. Incluye diseño responsivo y soporte para el modo oscuro, imitando botones del mundo real.