Composant Cartes en mode sombre
Un composant de cartes réactives conçu pour les sites Web d’entreprise/d’entreprise avec une interface utilisateur en mode sombre et une palette de couleurs en niveaux de gris, avec une complexité et une interactivité modérées.
HTML Code
<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>Composants associés
Composant de cartes neumorphes
Un composant de cartes réactives conçu dans le style Neumorphism avec prise en charge du thème sombre, avec des ombres subtiles et une mise en page flexible.
Composant Cartes 3D
Un composant de carte réactif avec un style de conception 3D, des couleurs vives et plusieurs éléments interactifs, adapté à un tableau de bord. Il prend en charge le mode sombre en utilisant le préfixe sombre de Tailwind.
Carte e-commerce
Composant de carte de commerce électronique réactif avec prise en charge du mode sombre à l’aide des principes Tailwind CSS et Material Design. Dispose d’une palette de couleurs vives avec une complexité modérée, y compris des éléments interactifs tels que des boutons et des effets de survol. Utilise une mise en page basée sur une grille et intègre des ombres pour plus de profondeur.