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.
HTML Code
<div class="min-h-screen bg-gray-100 p-4 font-sans dark:bg-gray-900 md:p-8">
<div class="container mx-auto px-4 py-8">
<h1 class="mb-8 text-center text-4xl font-bold uppercase tracking-wider text-gray-800 dark:text-gray-200 md:text-5xl">
<span class="block animate-pulse text-red-600 dark:text-red-400">Book Your Slot!</span>
<span class="block text-2xl normal-case text-gray-600 dark:text-gray-400">Pick Your Perfect Time</span>
</h1>
<div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
<!-- Card 1: Available Slot -->
<div class="transform rounded-lg border-2 border-orange-400 bg-gradient-to-br from-yellow-200 to-orange-300 p-6 shadow-xl transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl dark:from-gray-700 dark:to-gray-800 dark:border-blue-600">
<div class="mb-4 flex items-center justify-between">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Morning Session</h2>
<span class="rounded-full bg-green-500 px-3 py-1 text-sm font-semibold text-white">Available</span>
</div>
<p class="mb-4 text-gray-700 dark:text-gray-300">Start your day right with a productive morning slot.</p>
<div class="mb-4 text-gray-600 dark:text-gray-400">
<p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Date:</strong> Oct 26, 2023</p>
<p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Time:</strong> 09:00 AM - 10:30 AM</p>
<p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Duration:</strong> 90 mins</p>
</div>
<div class="mb-4 flex items-center">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Host Avatar" class="mr-3 h-10 w-10 rounded-full border-2 border-purple-500 shadow-md">
<div>
<p class="font-semibold text-gray-800 dark:text-gray-100">Hosted by:</p>
<p class="text-gray-700 dark:text-gray-300">Alex Johnson</p>
</div>
</div>
<button class="w-full rounded-md bg-purple-600 px-4 py-3 font-bold uppercase text-white shadow-lg transition-colors duration-300 hover:bg-purple-700 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:bg-purple-500 dark:hover:bg-purple-600 dark:focus:ring-purple-700">
Book Now!
</button>
</div>
<!-- Card 2: Fully Booked Slot -->
<div class="transform rounded-lg border-2 border-red-500 bg-gradient-to-br from-red-200 to-red-400 p-6 shadow-xl transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl dark:from-gray-700 dark:to-gray-800 dark:border-red-600">
<div class="mb-4 flex items-center justify-between">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Afternoon Deep Dive</h2>
<span class="rounded-full bg-red-600 px-3 py-1 text-sm font-semibold text-white">Fully Booked</span>
</div>
<p class="mb-4 text-gray-700 dark:text-gray-300">This popular slot is currently at full capacity.</p>
<div class="mb-4 text-gray-600 dark:text-gray-400">
<p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Date:</strong> Oct 26, 2023</p>
<p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Time:</strong> 01:00 PM - 03:00 PM</p>
<p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Duration:</strong> 120 mins</p>
</div>
<div class="mb-4 flex items-center">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Host Avatar" class="mr-3 h-10 w-10 rounded-full border-2 border-purple-500 shadow-md">
<div>
<p class="font-semibold text-gray-800 dark:text-gray-100">Hosted by:</p>
<p class="text-gray-700 dark:text-gray-300">Maria Gomez</p>
</div>
</div>
<button class="w-full rounded-md bg-gray-500 px-4 py-3 font-bold uppercase text-white shadow-lg cursor-not-allowed dark:bg-gray-600" disabled>
Sold Out
</button>
</div>
<!-- Card 3: Pending Confirmation Slot -->
<div class="transform rounded-lg border-2 border-blue-500 bg-gradient-to-br from-blue-200 to-cyan-300 p-6 shadow-xl transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl dark:from-gray-700 dark:to-gray-800 dark:border-green-600">
<div class="mb-4 flex items-center justify-between">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Evening Chill</h2>
<span class="rounded-full bg-yellow-500 px-3 py-1 text-sm font-semibold text-white">Pending</span>
</div>
<p class="mb-4 text-gray-700 dark:text-gray-300">Awaiting confirmation for this twilight session.</p>
<div class="mb-4 text-gray-600 dark:text-gray-400">
<p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Date:</strong> Oct 27, 2023</p>
<p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Time:</strong> 06:00 PM - 07:00 PM</p>
<p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Duration:</strong> 60 mins</p>
</div>
<div class="mb-4 flex items-center">
<img src="https://randomuser.me/api/portraits/men/19.jpg" alt="Host Avatar" class="mr-3 h-10 w-10 rounded-full border-2 border-purple-500 shadow-md">
<div>
<p class="font-semibold text-gray-800 dark:text-gray-100">Hosted by:</p>
<p class="text-gray-700 dark:text-gray-300">David Lee</p>
</div>
</div>
<button class="w-full rounded-md bg-gray-400 px-4 py-3 font-bold uppercase text-white shadow-lg cursor-not-allowed dark:bg-gray-500" disabled>
Awaiting Conf.
</button>
</div>
<!-- Card 4: Special Event Slot -->
<div class="transform rounded-lg border-2 border-purple-500 bg-gradient-to-br from-purple-200 to-pink-300 p-6 shadow-xl transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl dark:from-gray-700 dark:to-gray-800 dark:border-orange-600">
<div class="mb-4 flex items-center justify-between">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Exclusive Workshop</h2>
<span class="rounded-full bg-blue-600 px-3 py-1 text-sm font-semibold text-white">Special</span>
</div>
<p class="mb-4 text-gray-700 dark:text-gray-300">A unique opportunity! Limited spots available.</p>
<div class="mb-4 text-gray-600 dark:text-gray-400">
<p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Date:</strong> Oct 28, 2023</p>
<p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Time:</strong> 10:00 AM - 01:00 PM</p>
<p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Duration:</strong> 180 mins</p>
</div>
<div class="mb-4 flex items-center">
<img src="https://randomuser.me/api/portraits/women/7.jpg" alt="Host Avatar" class="mr-3 h-10 w-10 rounded-full border-2 border-purple-500 shadow-md">
<div>
<p class="font-semibold text-gray-800 dark:text-gray-100">Hosted by:</p>
<p class="text-gray-700 dark:text-gray-300">Sophia Kim</p>
</div>
</div>
<button class="w-full rounded-md bg-cyan-600 px-4 py-3 font-bold uppercase text-white shadow-lg transition-colors duration-300 hover:bg-cyan-700 focus:outline-none focus:ring-4 focus:ring-cyan-300 dark:bg-cyan-500 dark:hover:bg-cyan-600 dark:focus:ring-cyan-700">
Register Now!
</button>
</div>
</div>
</div>
</div>Composants associés
Forum_Community_Cards_Component
Un composant de cartes réactives et interactives pour un forum ou une plate-forme communautaire, avec une palette de couleurs rétro/vintage et des effets de survol subtils pour les micro-interactions. Inclut la prise en charge du mode sombre et du HTML sémantique.
Neon_Glow_Farming_Cards
Un ensemble complexe de cartes réactives pour les sites Web agricoles, avec des effets de néon/lueur avec une palette de couleurs coucher de soleil/chaudes, y compris la prise en charge du mode 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.