Componente de tarjetas de modo oscuro
Un componente de tarjetas responsivas diseñado para sitios web comerciales/corporativos con una interfaz de usuario de modo oscuro y un esquema de color en escala de grises, con una complejidad e interactividad moderadas.
Código HTML
<div class="flex flex-wrap justify-center p-5 bg-gray-900 dark:bg-gray-800">
<div class="max-w-xs m-4 bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=1" alt="Card Image">
<div class="p-5">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/11.jpg" alt="Avatar">
<div class="ml-4 text-white">
<h2 class="text-lg font-semibold">John Doe</h2>
<p class="text-gray-400">@johndoe</p>
</div>
</div>
<h3 class="text-xl font-bold text-white mb-2">Business Strategy</h3>
<p class="text-gray-300 mb-4">This card contains information about business strategies that can be utilized for enhancing corporate effectiveness.</p>
<a href="#" class="inline-block px-4 py-2 text-sm font-medium text-gray-800 bg-white rounded-lg hover:bg-gray-200">Learn More</a>
</div>
</div>
<div class="max-w-xs m-4 bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=2" alt="Card Image">
<div class="p-5">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/11.jpg" alt="Avatar">
<div class="ml-4 text-white">
<h2 class="text-lg font-semibold">Jane Smith</h2>
<p class="text-gray-400">@janesmith</p>
</div>
</div>
<h3 class="text-xl font-bold text-white mb-2">Marketing Insights</h3>
<p class="text-gray-300 mb-4">Insights and analytics on market trends that can help your business adapt and grow.</p>
<a href="#" class="inline-block px-4 py-2 text-sm font-medium text-gray-800 bg-white rounded-lg hover:bg-gray-200">Discover More</a>
</div>
</div>
<div class="max-w-xs m-4 bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=3" alt="Card Image">
<div class="p-5">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/12.jpg" alt="Avatar">
<div class="ml-4 text-white">
<h2 class="text-lg font-semibold">Mike Johnson</h2>
<p class="text-gray-400">@mikejohnson</p>
</div>
</div>
<h3 class="text-xl font-bold text-white mb-2">Financial Planning</h3>
<p class="text-gray-300 mb-4">Detailed financial planning services aimed at helping companies achieve their financial goals.</p>
<a href="#" class="inline-block px-4 py-2 text-sm font-medium text-gray-800 bg-white rounded-lg hover:bg-gray-200">Get Started</a>
</div>
</div>
</div>Componentes relacionados
Componente de tarjetas 3D
Un componente de tarjeta receptivo con un estilo de diseño 3D, colores vibrantes y múltiples elementos interactivos, adecuado para un tablero. Es compatible con el modo oscuro usando el prefijo oscuro de Tailwind.
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.
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.