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.
Forum_Community_Cards_Component
Un composant de cartes réactives et interactives pour un forum ou une plate-forme communautaire, avec une palette de couleurs rétro/vintage et des effets de survol subtils pour les micro-interactions. Inclut la prise en charge du mode sombre et du HTML sémantique.
RetroReservationCards
Un ensemble réactif de cartes de réservation/réservation à thème rétro avec prise en charge du mode sombre, adapté aux systèmes de rendez-vous ou de réservation. Les caractéristiques comprennent des couleurs vintage discrètes et une esthétique subtile des années 80/90.