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 con Tailwind CSS, con efectos responsivos y compatibilidad con temas oscuros.
Componente Botones
Un componente de botón minimalista para tableros, con soporte para diseño responsivo y tema oscuro.
Botones de entretenimiento lúdico
Un conjunto de botones lúdicos y divertidos diseñados para una plataforma de entretenimiento o medios, con colores apagados/desaturados y elementos redondeados. Responsivo e incluye soporte para modo oscuro.