Componente de tarjeta de esqueuomorfismo
Un componente de tarjeta de estilo Skeuomorphism con capacidad de respuesta para el modo oscuro mediante Tailwind CSS. Incluye imágenes de marcador de posición y avatares.
Código HTML
<div class="dark:bg-gray-900 dark:text-white bg-gray-200 text-gray-800 p-6 rounded-lg shadow-xl dark:shadow-2xl max-w-sm mx-auto my-8">
<div class="relative">
<img class="w-full h-48 object-cover rounded-md shadow-md transform transition duration-500 hover:scale-105" src="https://picsum.photos/400/300" alt="Placeholder image">
<div class="absolute bottom-0 right-0 -mb-4 mr-4">
<img class="w-10 h-10 rounded-full border-2 border-white shadow-lg" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
</div>
</div>
<div class="mt-6">
<h2 class="text-xl font-bold mb-2 dark:text-white text-gray-800">Skeuomorphic Card</h2>
<p class="text-gray-700 dark:text-gray-300">
This is a Skeuomorphism-inspired card with responsive effects and dark theme support utilizing Tailwind CSS.
</p>
</div>
<div class="mt-4 flex justify-between items-center">
<span class="text-sm text-gray-600 dark:text-gray-400">Posted on October 26, 2023</span>
<button class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-full shadow-md hover:shadow-lg transition duration-300 dark:bg-blue-700 dark:hover:bg-blue-600">
Read More
</button>
</div>
</div>Componentes relacionados
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.
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 tarjeta brutalista
Un componente de tarjeta brutalista con diseño responsivo y soporte para modo oscuro.