Componente de cartas esqueuomórficas
Un componente de tarjetas simple diseñado en un estilo esqueuomórfico, utilizando un esquema de color análogo para la lectura y el consumo de contenido. Este componente es responsivo y admite el tema oscuro.
Código HTML
<div class="flex flex-col items-center justify-center p-6 space-y-4 md:flex-row md:flex-wrap md:space-x-4 md:space-y-0">
<div class="bg-gradient-to-br from-green-300 to-blue-400 rounded-lg shadow-lg p-4 w-full max-w-xs dark:from-green-600 dark:to-blue-700">
<img class="rounded-t-lg" src="https://picsum.photos/300/200?random=1" alt="Card Image" />
<div class="p-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Card Title</h2>
<p class="text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" />
<p class="ml-2 text-gray-700 dark:text-gray-300">Author Name</p>
</div>
</div>
</div>
<div class="bg-gradient-to-br from-green-300 to-blue-400 rounded-lg shadow-lg p-4 w-full max-w-xs dark:from-green-600 dark:to-blue-700">
<img class="rounded-t-lg" src="https://picsum.photos/300/200?random=2" alt="Card Image" />
<div class="p-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Card Title</h2>
<p class="text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" />
<p class="ml-2 text-gray-700 dark:text-gray-300">Author Name</p>
</div>
</div>
</div>
</div>
Componentes relacionados
Componente de tarjetas meteorológicas de la Bauhaus
Un componente de tarjetas meteorológicas/climáticas simple y receptivo inspirado en los principios de diseño de la Bauhaus, con formas geométricas y un esquema de color triádico. Incluye soporte para modo oscuro.
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 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.