Cards Component
A minimalist and flat design cards component for booking/reservation systems, featuring a gradient rainbow color scheme. It's responsive, includes dark mode support, and uses simple elements for a clean look.
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>Related Components
Neon_Glow_Farming_Cards
A complex set of responsive cards for agriculture/farming websites, featuring neon/glow effects with a sunset/warm color scheme, including dark mode support.
Retro_E_commerce_Cards_Component
A responsive e-commerce product card component with a retro/vintage aesthetic, earth tones, and dark mode support, suitable for online shopping experiences. Features include product image, name, price, and a call-to-action button.