Componente Botones
Botones de estilo Material Design con un esquema de color en escala de grises para fines de cartera, con diseño receptivo con soporte para temas oscuros.
Código HTML
<div class="flex flex-col items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900">
<h1 class="mb-8 text-3xl font-bold text-gray-800 dark:text-gray-200">Portfolio Showcase</h1>
<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
<div class="flex flex-col items-center bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
<img src="https://picsum.photos/300/200" alt="Project 1" class="w-full h-48 object-cover rounded-md mb-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Project 1</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">Description of project 1 goes here.</p>
<a href="#" class="inline-block px-6 py-2 text-sm font-medium text-white bg-gray-800 rounded hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600">View Details</a>
</div>
<div class="flex flex-col items-center bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
<img src="https://picsum.photos/300/201" alt="Project 2" class="w-full h-48 object-cover rounded-md mb-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Project 2</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">Description of project 2 goes here.</p>
<a href="#" class="inline-block px-6 py-2 text-sm font-medium text-white bg-gray-800 rounded hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600">View Details</a>
</div>
<div class="flex flex-col items-center bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
<img src="https://picsum.photos/300/202" alt="Project 3" class="w-full h-48 object-cover rounded-md mb-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Project 3</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">Description of project 3 goes here.</p>
<a href="#" class="inline-block px-6 py-2 text-sm font-medium text-white bg-gray-800 rounded hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600">View Details</a>
</div>
</div>
</div>Componentes relacionados
Componente Botones
Un componente de botones minimalista diseñado para un portafolio que muestra trabajos o productos, con colores vibrantes y un diseño receptivo con soporte para temas oscuros mediante Tailwind CSS.
Componente Botones
Un componente de botones diseñado en estilo Material Design con una combinación de colores pastel, responsivo para sitios web comerciales / corporativos y compatible con temas oscuros.
Componente Botones de morfismo de vidrio
Botones de morfismo de vidrio que usan tonos tierra para un sitio de portafolio receptivo con modo oscuro