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 Glassmorphism Cards
Composants de cartes Glassmorphism aux couleurs vives. Conception réactive avec prise en charge du thème sombre. Utilise picsum.photos pour les images et randomuser.me pour les avatars.
Retro_E_commerce_Cards_Component
Un composant de carte produit e-commerce réactif avec une esthétique rétro/vintage, des tons de terre et une prise en charge du mode sombre, adapté aux expériences d’achat en ligne. Les fonctionnalités incluent l’image du produit, le nom, le prix et un bouton d’appel à l’action.
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.