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.
Código HTML
<div class="max-w-3xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg space-y-4">
<div class="bg-green-200 dark:bg-green-700 rounded-lg overflow-hidden">
<img src="https://picsum.photos/400/200" alt="Blog Post Image" class="w-full h-48 object-cover">
</div>
<div class="p-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Blog Post Title</h2>
<p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the blog post. It provides a summary of the content and encourages users to read more.</p>
</div>
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Author Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600">
<div class="text-gray-800 dark:text-gray-200">
<p class="font-semibold">Author Name</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Date Published</p>
</div>
</div>
</div>Componentes relacionados
Crypto_Blockchain_Cards_Component
Un conjunto de tarjetas responsivas diseñadas para aplicaciones de criptomonedas y blockchain, con un esquema de color neutro cálido, sombras inspiradas en el material y compatibilidad con el modo oscuro.
Retro_E_commerce_Cards_Component
Un componente de tarjeta de producto de comercio electrónico receptivo con una estética retro / vintage, tonos tierra y soporte de modo oscuro, adecuado para experiencias de compra en línea. Las características incluyen imagen del producto, nombre, precio y un botón de llamada a la acción.
Componente de tarjetas
Componente de tarjetas responsivas con microinteracciones y soporte para temas oscuros.