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.
HTML Code
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105">
<div class="relative">
<img src="https://picsum.photos/400/200" alt="Card image" class="rounded-t-lg w-full">
<div class="absolute top-2 left-2 bg-red-600 text-white py-1 px-2 rounded-md">New</div>
</div>
<div class="p-4">
<h2 class="text-xl font-bold text-gray-800 dark:text-white">Card Title</h2>
<p class="text-gray-600 dark:text-gray-300 mt-2">This is a description of the card content. It provides insight into the purpose of this card.</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User avatar" class="w-10 h-10 rounded-full">
<span class="ml-2 text-gray-700 dark:text-gray-300">John Doe</span>
</div>
</div>
<div class="px-4 py-2 border-t dark:border-gray-700">
<button class="bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none">Action</button>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105">
<div class="relative">
<img src="https://picsum.photos/400/201" alt="Card image" class="rounded-t-lg w-full">
<div class="absolute top-2 left-2 bg-green-600 text-white py-1 px-2 rounded-md">Featured</div>
</div>
<div class="p-4">
<h2 class="text-xl font-bold text-gray-800 dark:text-white">Card Title</h2>
<p class="text-gray-600 dark:text-gray-300 mt-2">Insightful content about the card, detailing its functionalities and offerings.</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User avatar" class="w-10 h-10 rounded-full">
<span class="ml-2 text-gray-700 dark:text-gray-300">Jane Smith</span>
</div>
</div>
<div class="px-4 py-2 border-t dark:border-gray-700">
<button class="bg-orange-600 text-white py-2 px-4 rounded-md hover:bg-orange-700 focus:outline-none">Explore</button>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105">
<div class="relative">
<img src="https://picsum.photos/400/202" alt="Card image" class="rounded-t-lg w-full">
<div class="absolute top-2 left-2 bg-blue-600 text-white py-1 px-2 rounded-md">Popular</div>
</div>
<div class="p-4">
<h2 class="text-xl font-bold text-gray-800 dark:text-white">Card Title</h2>
<p class="text-gray-600 dark:text-gray-300 mt-2">Information and interactive elements that are engaging and useful.</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User avatar" class="w-10 h-10 rounded-full">
<span class="ml-2 text-gray-700 dark:text-gray-300">Mark Johnson</span>
</div>
</div>
<div class="px-4 py-2 border-t dark:border-gray-700">
<button class="bg-purple-600 text-white py-2 px-4 rounded-md hover:bg-purple-700 focus:outline-none">Learn More</button>
</div>
</div>
</div>Composants associés
Composant de carte brutaliste
Un composant de carte brutaliste avec un design réactif et une prise en charge du mode sombre.
Composant Cartes Skeuomorphic
Un composant de cartes simple conçu dans un style skeuomorphe, utilisant un schéma de couleurs analogue pour la lecture et la consommation de contenu. Ce composant est réactif et prend en charge le thème sombre.
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.