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.
Tarjeta de diseño de materiales
Un componente de tarjeta de estilo Material Design con comportamiento responsivo y compatibilidad con el modo oscuro mediante CSS de Tailwind. Cuenta con efectos de elevación y ondulación, señales visuales.
Componente de tarjetas de morfismo de vidrio
Componente de tarjetas de morfismo de vidrio con colores vibrantes. Diseño responsivo con soporte para temas oscuros. Utiliza picsum.photos para las imágenes y randomuser.me para los avatares.