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 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 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.
Componente de tarjetas neumórficas
Un componente de cartas responsivo diseñado en el estilo Neumorphism con soporte para temas oscuros, con sombras sutiles y un diseño flexible.