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
ArtDeco_EarthTones_Cards_Technology_SaaS
Un composant de cartes simple et réactif pour les applications Technologie/SaaS, inspiré des motifs géométriques Art Déco et d’une palette de couleurs naturelles aux tons de terre. Inclut la 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
Un composant de carte de blog/contenu réactif conçu avec un style skeuomorphe et des tons de terre. Comprend un titre, une image, une brève description et un avatar pour les informations sur l’auteur. Prend en charge le mode sombre.