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 des cartes météo Bauhaus
Un composant simple et réactif des cartes météo/climat inspiré des principes de conception du Bauhaus, avec des formes géométriques et une palette de couleurs triadique. Inclut la prise en charge du mode sombre.
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.
Composant Cartes de médias sociaux
Un composant de carte minimaliste et dynamique adapté aux interfaces de médias sociaux, affichant les messages des utilisateurs avec des images, des likes, des commentaires et des options de partage. Il est entièrement réactif et prend en charge le mode sombre.