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
Componente de cartas esqueuomórficas
Inspirado en el skeuomorfismo, el siguiente componente de la tarjeta es totalmente responsivo con soporte para temas oscuros. Para el modo oscuro, la compatibilidad con CSS es suficiente. No se necesita JavaScript.
Componente de tarjetas
Un componente de tarjetas complejo diseñado para el modo oscuro, adecuado para el consumo de blogs y contenido con un esquema de color triádico.
Componente de tarjetas
Un componente de tarjeta de portafolio receptivo con un estilo de diseño brutalista, que utiliza una combinación de colores pastel y una complejidad moderada con funciones interactivas. Esta tarjeta muestra el trabajo o los productos y es compatible con el modo oscuro.