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 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.
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.
Crypto_Blockchain_Cards_Component
Un ensemble de cartes réactives conçues pour les applications de crypto-monnaie et de blockchain, avec une palette de couleurs neutres chaudes, des ombres inspirées des matériaux et la prise en charge du mode sombre.