Composant Cartes
Un composant de cartes au design minimaliste et plat pour les systèmes de réservation, avec une palette de couleurs arc-en-ciel dégradée. Il est réactif, inclut la prise en charge du mode sombre et utilise des éléments simples pour un look épuré.
HTML Code
<div class="p-4 sm:p-6 md:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen flex items-center justify-center">
<div class="grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 max-w-6xl mx-auto">
<!-- Card 1: Available Time Slot -->
<div class="relative overflow-hidden rounded-xl shadow-lg dark:shadow-xl transform transition-transform duration-300 hover:scale-[1.02] dark:border dark:border-gray-700 bg-white dark:bg-gray-800">
<div class="p-6 space-y-4">
<div class="flex items-center justify-between">
<h3 class="text-2xl font-bold dark:text-gray-100">Morning Slot</h3>
<span class="px-3 py-1 rounded-full text-sm font-semibold bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 text-white shadow-md">Available</span>
</div>
<p class="text-gray-600 dark:text-gray-300 text-sm">Wednesday, October 26, 2023</p>
<p class="text-4xl font-extrabold text-gray-800 dark:text-gray-50">09:00 AM</p>
<p class="text-gray-500 dark:text-gray-400 text-sm">Duration: 60 minutes</p>
<button class="w-full py-3 rounded-lg text-white font-semibold transform transition-transform duration-300 active:scale-95
bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 hover:from-purple-600 hover:via-pink-600 hover:to-red-600 shadow-lg">
Book Now
</button>
</div>
</div>
<!-- Card 2: Fully Booked -->
<div class="relative overflow-hidden rounded-xl shadow-lg dark:shadow-xl transform transition-transform duration-300 hover:scale-[1.02] dark:border dark:border-gray-700 bg-white dark:bg-gray-800">
<div class="p-6 space-y-4">
<div class="flex items-center justify-between">
<h3 class="text-2xl font-bold dark:text-gray-100">Afternoon Slot</h3>
<span class="px-3 py-1 rounded-full text-sm font-semibold bg-gradient-to-r from-gray-400 via-gray-500 to-gray-600 text-white shadow-md">Fully Booked</span>
</div>
<p class="text-gray-600 dark:text-gray-300 text-sm">Wednesday, October 26, 2023</p>
<p class="text-4xl font-extrabold text-gray-400 dark:text-gray-600">02:00 PM</p>
<p class="text-gray-500 dark:text-gray-400 text-sm">Duration: 90 minutes</p>
<button class="w-full py-3 rounded-lg text-white font-semibold cursor-not-allowed opacity-60
bg-gradient-to-r from-gray-400 via-gray-500 to-gray-600 shadow-lg">
View Details
</button>
</div>
</div>
<!-- Card 3: Next Day Availability -->
<div class="relative overflow-hidden rounded-xl shadow-lg dark:shadow-xl transform transition-transform duration-300 hover:scale-[1.02] dark:border dark:border-gray-700 bg-white dark:bg-gray-800">
<div class="p-6 space-y-4">
<div class="flex items-center justify-between">
<h3 class="text-2xl font-bold dark:text-gray-100">Evening Slot</h3>
<span class="px-3 py-1 rounded-full text-sm font-semibold bg-gradient-to-r from-blue-500 via-indigo-500 to-purple-500 text-white shadow-md">Limited</span>
</div>
<p class="text-gray-600 dark:text-gray-300 text-sm">Thursday, October 27, 2023</p>
<p class="text-4xl font-extrabold text-gray-800 dark:text-gray-50">07:30 PM</p>
<p class="text-gray-500 dark:text-gray-400 text-sm">Duration: 45 minutes</p>
<button class="w-full py-3 rounded-lg text-white font-semibold transform transition-transform duration-300 active:scale-95
bg-gradient-to-r from-teal-500 via-cyan-500 to-blue-500 hover:from-teal-600 hover:via-cyan-600 hover:to-blue-600 shadow-lg">
Pre-book
</button>
</div>
</div>
</div>
</div>Composants associés
Composant Cartes
Composant de cartes réactives avec micro-interactions et prise en charge du thème sombre.
Cartes sociales en mode sombre
Un composant de carte réactif conçu pour le mode sombre avec des tons de terre, conçu pour les interfaces de médias sociaux.
Composant de la carte Skeuomorphism
Un composant de carte réactif de style Skeuomorphism avec prise en charge du mode sombre à l’aide de Tailwind CSS. Il comprend des images et des avatars de substitution.