Componente de tarjetas 3D
Un componente de tarjeta receptivo con un estilo de diseño 3D, colores vibrantes y múltiples elementos interactivos, adecuado para un tablero. Es compatible con el modo oscuro usando el prefijo oscuro de Tailwind.
Código HTML
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105">
<div class="relative">
<img src="https://picsum.photos/400/200" alt="Card image" class="rounded-t-lg w-full">
<div class="absolute top-2 left-2 bg-red-600 text-white py-1 px-2 rounded-md">New</div>
</div>
<div class="p-4">
<h2 class="text-xl font-bold text-gray-800 dark:text-white">Card Title</h2>
<p class="text-gray-600 dark:text-gray-300 mt-2">This is a description of the card content. It provides insight into the purpose of this card.</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User avatar" class="w-10 h-10 rounded-full">
<span class="ml-2 text-gray-700 dark:text-gray-300">John Doe</span>
</div>
</div>
<div class="px-4 py-2 border-t dark:border-gray-700">
<button class="bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none">Action</button>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105">
<div class="relative">
<img src="https://picsum.photos/400/201" alt="Card image" class="rounded-t-lg w-full">
<div class="absolute top-2 left-2 bg-green-600 text-white py-1 px-2 rounded-md">Featured</div>
</div>
<div class="p-4">
<h2 class="text-xl font-bold text-gray-800 dark:text-white">Card Title</h2>
<p class="text-gray-600 dark:text-gray-300 mt-2">Insightful content about the card, detailing its functionalities and offerings.</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User avatar" class="w-10 h-10 rounded-full">
<span class="ml-2 text-gray-700 dark:text-gray-300">Jane Smith</span>
</div>
</div>
<div class="px-4 py-2 border-t dark:border-gray-700">
<button class="bg-orange-600 text-white py-2 px-4 rounded-md hover:bg-orange-700 focus:outline-none">Explore</button>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105">
<div class="relative">
<img src="https://picsum.photos/400/202" alt="Card image" class="rounded-t-lg w-full">
<div class="absolute top-2 left-2 bg-blue-600 text-white py-1 px-2 rounded-md">Popular</div>
</div>
<div class="p-4">
<h2 class="text-xl font-bold text-gray-800 dark:text-white">Card Title</h2>
<p class="text-gray-600 dark:text-gray-300 mt-2">Information and interactive elements that are engaging and useful.</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User avatar" class="w-10 h-10 rounded-full">
<span class="ml-2 text-gray-700 dark:text-gray-300">Mark Johnson</span>
</div>
</div>
<div class="px-4 py-2 border-t dark:border-gray-700">
<button class="bg-purple-600 text-white py-2 px-4 rounded-md hover:bg-purple-700 focus:outline-none">Learn More</button>
</div>
</div>
</div>Componentes relacionados
Luxury_Portfolio_Cards_Ocean_Blue
Un componente complejo de tarjetas de cartera, de lujo/premium diseñado con tonos océano/azul para exhibir trabajos o productos. Cuenta con un diseño responsivo, tipografía sofisticada, imágenes elegantes y compatibilidad total con el modo oscuro.
Componente de tarjetas de redes sociales
Un componente de tarjeta minimalista y vibrante adecuado para interfaces de redes sociales, que muestra publicaciones de usuarios con imágenes, me gusta, comentarios y opciones para compartir. Es totalmente sensible y es compatible con el modo oscuro.
Componente de tarjetas
Un componente de tarjeta de blog/contenido responsivo diseñado con estilo skeuomórfico y tonos tierra. Incluye un título, una imagen, una breve descripción y un avatar para información del autor. Soporta el modo oscuro.