Composant Composants de visualisation de données
Il s’agit d’un composant de réservation/réservation complexe et minimaliste avec une palette de couleurs néon/électrique, avec des éléments de visualisation de données tels qu’un calendrier et un sélecteur de créneaux horaires. Entièrement réactif avec prise en charge du mode sombre.
HTML Code
<div class="min-h-screen bg-gray-100 p-4 dark:bg-gray-900 md:p-8 lg:p-12 font-sans text-gray-800 dark:text-gray-200">
<div class="max-w-6xl mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden backdrop-blur-sm bg-opacity-90 dark:bg-opacity-90 border border-gray-200 dark:border-gray-700">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 p-6 lg:p-10">
<!-- Left Section: Calendar and Summary -->
<div class="lg:col-span-2 flex flex-col space-y-8">
<h2 class="text-4xl font-extrabold text-indigo-600 dark:text-fuchsia-500 mb-6 tracking-tight">Book Your Spot</h2>
<!-- Monthly Calendar -->
<div class="bg-violet-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner border border-violet-100 dark:border-gray-600 relative group">
<h3 class="text-2xl font-bold mb-4 text-violet-700 dark:text-cyan-400">Select Date</h3>
<div class="flex justify-between items-center mb-4">
<button class="p-2 rounded-full text-gray-600 dark:text-gray-300 hover:bg-violet-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-violet-500 dark:focus:ring-cyan-400 transition-all duration-200"><svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg></button>
<span class="text-xl font-semibold text-gray-900 dark:text-gray-100">October 2023</span>
<button class="p-2 rounded-full text-gray-600 dark:text-gray-300 hover:bg-violet-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-violet-500 dark:focus:ring-cyan-400 transition-all duration-200"><svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></button>
</div>
<div class="grid grid-cols-7 gap-2 text-center text-sm">
<div class="text-xs font-bold text-violet-500 dark:text-fuchsia-400 uppercase">Sun</div>
<div class="text-xs font-bold text-violet-500 dark:text-fuchsia-400 uppercase">Mon</div>
<div class="text-xs font-bold text-violet-500 dark:text-fuchsia-400 uppercase">Tue</div>
<div class="text-xs font-bold text-violet-500 dark:text-fuchsia-400 uppercase">Wed</div>
<div class="text-xs font-bold text-violet-500 dark:text-fuchsia-400 uppercase">Thu</div>
<div class="text-xs font-bold text-violet-500 dark:text-fuchsia-400 uppercase">Fri</div>
<div class="text-xs font-bold text-violet-500 dark:text-fuchsia-400 uppercase">Sat</div>
<!-- Example days -->
<div class="py-2 text-gray-400">27</div>
<div class="py-2 text-gray-400">28</div>
<div class="py-2 text-gray-400">29</div>
<div class="py-2 text-gray-400">30</div>
<div class="py-2 text-gray-400">1</div>
<div class="py-2 text-gray-900 dark:text-gray-100">2</div>
<div class="py-2 text-gray-900 dark:text-gray-100">3</div>
<div class="py-2 text-gray-900 dark:text-gray-100">4</div>
<div class="py-2 text-gray-900 dark:text-gray-100">5</div>
<div class="py-2 text-gray-900 dark:text-gray-100">6</div>
<div class="py-2 text-gray-900 dark:text-gray-100 relative group selected-date">
7<span class="absolute inset-0 border-2 border-fuchsia-500 dark:border-cyan-400 rounded-full scale-0 group-hover:scale-105 transition-all duration-300"></span>
</div>
<div class="py-2 text-gray-900 dark:text-gray-100">8</div>
<div class="py-2 rounded-full bg-fuchsia-100 dark:bg-cyan-900 text-fuchsia-700 dark:text-cyan-300 font-semibold border-2 border-fuchsia-400 dark:border-cyan-600 shadow-inner">9</div>
<div class="py-2 text-gray-900 dark:text-gray-100">10</div>
<div class="py-2 text-gray-900 dark:text-gray-100">11</div>
<div class="py-2 text-gray-900 dark:text-gray-100">12</div>
<div class="py-2 text-gray-900 dark:text-gray-100">13</div>
<div class="py-2 text-gray-900 dark:text-gray-100">14</div>
<div class="py-2 text-gray-900 dark:text-gray-100">15</div>
<div class="py-2 text-gray-900 dark:text-gray-100">16</div>
<div class="py-2 text-gray-900 dark:text-gray-100">17</div>
<div class="py-2 text-gray-900 dark:text-gray-100">18</div>
<div class="py-2 text-gray-900 dark:text-gray-100">19</div>
<div class="py-2 text-gray-900 dark:text-gray-100">20</div>
<div class="py-2 text-gray-900 dark:text-gray-100">21</div>
<div class="py-2 text-gray-900 dark:text-gray-100">22</div>
<div class="py-2 text-gray-900 dark:text-gray-100">23</div>
<div class="py-2 text-gray-900 dark:text-gray-100">24</div>
<div class="py-2 text-gray-900 dark:text-gray-100">25</div>
<div class="py-2 text-gray-900 dark:text-gray-100">26</div>
<div class="py-2 text-gray-900 dark:text-gray-100">27</div>
<div class="py-2 text-gray-900 dark:text-gray-100">28</div>
<div class="py-2 text-gray-900 dark:text-gray-100">29</div>
<div class="py-2 text-gray-900 dark:text-gray-100">30</div>
<div class="py-2 text-gray-900 dark:text-gray-100">31</div>
<div class="py-2 text-gray-400">1</div>
<div class="py-2 text-gray-400">2</div>
<div class="py-2 text-gray-400">3</div>
<div class="py-2 text-gray-400">4</div>
</div>
</div>
<!-- Time Slot Selection -->
<div class="bg-violet-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner border border-violet-100 dark:border-gray-600">
<h3 class="text-2xl font-bold mb-4 text-violet-700 dark:text-cyan-400">Select Time Slot</h3>
<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
<button class="flex items-center justify-center p-3 rounded-lg border border-violet-300 dark:border-gray-500 text-gray-700 dark:text-gray-200 hover:bg-violet-200 hover:border-violet-500 dark:hover:bg-gray-600 dark:hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-violet-500 dark:focus:ring-cyan-400 transition-all duration-200">
<span class="text-lg font-medium">09:00 AM</span>
</button>
<button class="flex items-center justify-center p-3 rounded-lg border border-violet-300 dark:border-gray-500 text-gray-700 dark:text-gray-200 hover:bg-violet-200 hover:border-violet-500 dark:hover:bg-gray-600 dark:hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-violet-500 dark:focus:ring-cyan-400 transition-all duration-200">
<span class="text-lg font-medium">10:00 AM</span>
</button>
<button class="flex items-center justify-center p-3 rounded-lg border border-violet-300 dark:border-gray-500 text-gray-700 dark:text-gray-200 hover:bg-violet-200 hover:border-violet-500 dark:hover:bg-gray-600 dark:hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-violet-500 dark:focus:ring-cyan-400 transition-all duration-200">
<span class="text-lg font-medium">11:00 AM</span>
</button>
<button class="flex items-center justify-center p-3 rounded-lg border border-violet-300 dark:border-gray-500 text-gray-700 dark:text-gray-200 hover:bg-violet-200 hover:border-violet-500 dark:hover:bg-gray-600 dark:hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-violet-500 dark:focus:ring-cyan-400 transition-all duration-200">
<span class="text-lg font-medium">12:00 PM</span>
</button>
<button class="flex items-center justify-center p-3 rounded-lg border border-fuchsia-500 dark:border-cyan-400 bg-fuchsia-200 dark:bg-cyan-800 text-fuchsia-800 dark:text-cyan-200 font-bold shadow-md transform scale-105 relative ring-2 ring-fuchsia-500 dark:ring-cyan-400 transition-all duration-300 group">
<span class="text-lg">01:00 PM</span>
</button>
<button class="flex items-center justify-center p-3 rounded-lg border border-violet-300 dark:border-gray-500 text-gray-700 dark:text-gray-200 hover:bg-violet-200 hover:border-violet-500 dark:hover:bg-gray-600 dark:hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-violet-500 dark:focus:ring-cyan-400 transition-all duration-200 opacity-60 cursor-not-allowed">
<span class="text-lg font-medium">02:00 PM</span>
</button>
<button class="flex items-center justify-center p-3 rounded-lg border border-violet-300 dark:border-gray-500 text-gray-700 dark:text-gray-200 hover:bg-violet-200 hover:border-violet-500 dark:hover:bg-gray-600 dark:hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-violet-500 dark:focus:ring-cyan-400 transition-all duration-200">
<span class="text-lg font-medium">03:00 PM</span>
</button>
<button class="flex items-center justify-center p-3 rounded-lg border border-violet-300 dark:border-gray-500 text-gray-700 dark:text-gray-200 hover:bg-violet-200 hover:border-violet-500 dark:hover:bg-gray-600 dark:hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-violet-500 dark:focus:ring-cyan-400 transition-all duration-200">
<span class="text-lg font-medium">04:00 PM</span>
</button>
</div>
</div>
<!-- Additional Booking Info/Charts -->
<div class="bg-violet-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner border border-violet-100 dark:border-gray-600">
<h3 class="text-2xl font-bold mb-4 text-violet-700 dark:text-cyan-400">Availability Overview</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="flex items-center space-x-3">
<div class="w-4 h-4 rounded-full bg-fuchsia-500 dark:bg-cyan-400 animate-pulse"></div>
<span class="text-md text-gray-700 dark:text-gray-300">Few Spots Left</span>
</div>
<div class="flex items-center space-x-3">
<div class="w-4 h-4 rounded-full bg-lime-500"></div>
<span class="text-md text-gray-700 dark:text-gray-300">Highly Available</span>
</div>
<div class="flex items-center space-x-3">
<div class="w-4 h-4 rounded-full bg-red-500 opacity-60"></div>
<span class="text-md text-gray-700 dark:text-gray-300">Fully Booked</span>
</div>
<div class="flex items-center space-x-3">
<div class="w-4 h-4 rounded-full bg-gray-400 dark:bg-gray-500"></div>
<span class="text-md text-gray-700 dark:text-gray-300">Not Available</span>
</div>
</div>
<div class="mt-6">
<h4 class="text-xl font-semibold mb-3 text-gray-800 dark:text-gray-200">Daily Slot Trends</h4>
<!-- Placeholder for a simple bar chart or sparkline: SVG or image -->
<div class="w-full h-32 bg-gradient-to-r from-lime-300 via-fuchsia-300 to-red-300 dark:from-lime-800 dark:via-fuchsia-800 dark:to-red-800 rounded-md p-2 relative overflow-hidden">
<div class="absolute bottom-0 left-0 w-full flex items-end justify-around h-full">
<div class="w-2 md:w-3 bg-lime-500 dark:bg-lime-400 rounded-t-sm animate-rise" style="height: 80%; animation-delay: 0s;"></div>
<div class="w-2 md:w-3 bg-lime-500 dark:bg-lime-400 rounded-t-sm animate-rise" style="height: 60%; animation-delay: 0.1s;"></div>
<div class="w-2 md:w-3 bg-fuchsia-500 dark:bg-fuchsia-400 rounded-t-sm animate-rise" style="height: 40%; animation-delay: 0.2s;"></div>
<div class="w-2 md:w-3 bg-red-500 dark:bg-red-400 rounded-t-sm animate-rise" style="height: 20%; animation-delay: 0.3s;"></div>
<div class="w-2 md:w-3 bg-fuchsia-500 dark:bg-fuchsia-400 rounded-t-sm animate-rise" style="height: 50%; animation-delay: 0.4s;"></div>
<div class="w-2 md:w-3 bg-lime-500 dark:bg-lime-400 rounded-t-sm animate-rise" style="height: 70%; animation-delay: 0.5s;"></div>
<div class="w-2 md:w-3 bg-lime-500 dark:bg-lime-400 rounded-t-sm animate-rise" style="height: 90%; animation-delay: 0.6s;"></div>
<div class="w-2 md:w-3 bg-fuchsia-500 dark:bg-fuchsia-400 rounded-t-sm animate-rise" style="height: 30%; animation-delay: 0.7s;"></div>
<div class="w-2 md:w-3 bg-red-500 dark:bg-red-400 rounded-t-sm animate-rise" style="height: 15%; animation-delay: 0.8s;"></div>
<div class="w-2 md:w-3 bg-lime-500 dark:bg-lime-400 rounded-t-sm animate-rise" style="height: 65%; animation-delay: 0.9s;"></div>
<div class="w-2 md:w-3 bg-lime-500 dark:bg-lime-400 rounded-t-sm animate-rise" style="height: 75%; animation-delay: 1s;"></div>
<div class="w-2 md:w-3 bg-fuchsia-500 dark:bg-fuchsia-400 rounded-t-sm animate-rise" style="height: 45%; animation-delay: 1.1s;"></div>
<div class="w-2 md:w-3 bg-red-500 dark:bg-red-400 rounded-t-sm animate-rise" style="height: 25%; animation-delay: 1.2s;"></div>
<div class="w-2 md:w-3 bg-lime-500 dark:bg-lime-400 rounded-t-sm animate-rise" style="height: 85%; animation-delay: 1.3s;"></div>
<div class="w-2 md:w-3 bg-lime-500 dark:bg-lime-400 rounded-t-sm animate-rise" style="height: 55%; animation-delay: 1.4s;"></div>
<div class="w-2 md:w-3 bg-fuchsia-500 dark:bg-fuchsia-400 rounded-t-sm animate-rise" style="height: 35%; animation-delay: 1.5s;"></div>
<div class="w-2 md:w-3 bg-red-500 dark:bg-red-400 rounded-t-sm animate-rise" style="height: 10%; animation-delay: 1.6s;"></div>
<div class="w-2 md:w-3 bg-lime-500 dark:bg-lime-400 rounded-t-sm animate-rise" style="height: 95%; animation-delay: 1.7s;"></div>
<div class="w-2 md:w-3 bg-lime-500 dark:bg-lime-400 rounded-t-sm animate-rise" style="height: 50%; animation-delay: 1.8s;"></div>
<div class="w-2 md:w-3 bg-fuchsia-500 dark:bg-fuchsia-400 rounded-t-sm animate-rise" style="height: 70%; animation-delay: 1.9s;"></div>
<div class="w-2 md:w-3 bg-red-500 dark:bg-red-400 rounded-t-sm animate-rise" style="height: 30%; animation-delay: 2s;"></div>
<div class="w-2 md:w-3 bg-lime-500 dark:bg-lime-400 rounded-t-sm animate-rise" style="height: 80%; animation-delay: 2.1s;"></div>
</div>
</div>
<p class="text-xs text-center text-gray-500 dark:text-gray-400 mt-2">Scroll to see more days</p>
</div>
</div>
</div>
<!-- Right Section: Booking Summary & User Info -->
<div class="lg:col-span-1 flex flex-col space-y-8">
<!-- Booking Summary -->
<div class="bg-violet-50 dark:bg-gray-700 p-6 rounded-lg shadow-xl border border-violet-100 dark:border-gray-600 relative overflow-hidden">
<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-fuchsia-400/20 to-cyan-400/20 dark:from-fuchsia-700/20 dark:to-cyan-700/20 opacity-30"></div>
<h3 class="text-2xl font-bold mb-4 text-violet-700 dark:text-cyan-400 relative z-10">Your Booking Summary</h3>
<div class="space-y-4 relative z-10">
<div class="flex justify-between items-center">
<span class="text-gray-700 dark:text-gray-300 font-medium">Service:</span>
<span class="text-gray-900 dark:text-gray-100 font-semibold">Premium Consultation</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-700 dark:text-gray-300 font-medium">Date:</span>
<span class="text-gray-900 dark:text-gray-100 font-semibold text-fuchsia-600 dark:text-cyan-300">Oct 9, 2023</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-700 dark:text-gray-300 font-medium">Time:</span>
<span class="text-gray-900 dark:text-gray-100 font-semibold text-fuchsia-600 dark:text-cyan-300">01:00 PM</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-700 dark:text-gray-300 font-medium">Duration:</span>
<span class="text-gray-900 dark:text-gray-100 font-semibold">60 minutes</span>
</div>
<div class="flex justify-between mb-4 pt-4 border-t border-violet-200 dark:border-gray-600">
<span class="text-xl font-bold text-gray-900 dark:text-gray-100">Total:</span>
<span class="text-xl font-bold text-indigo-700 dark:text-lime-400">$120.00</span>
</div>
</div>
<button class="w-full flex items-center justify-center py-3 px-6 bg-gradient-to-r from-fuchsia-500 to-cyan-500 text-white font-extrabold rounded-lg shadow-lg hover:from-fuchsia-600 hover:to-cyan-600 focus:outline-none focus:ring-4 focus:ring-fuchsia-300 dark:focus:ring-cyan-600 transform transition-all duration-300 ease-out sm:text-lg lg:text-xl relative overflow-hidden group">
<span class="relative z-10">Confirm Booking</span>
<div class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
<svg class="ml-2 w-6 h-6 text-white absolute right-4 opacity-0 group-hover:opacity-100 translate-x-4 group-hover:translate-x-0 transition-all duration-300 ease-out" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</button>
</div>
<!-- Consultant/Service Provider Info -->
<div class="bg-violet-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner border border-violet-100 dark:border-gray-600">
<h3 class="text-2xl font-bold mb-4 text-violet-700 dark:text-cyan-400">Your Consultant</h3>
<div class="flex items-center space-x-4">
<img class="w-20 h-20 rounded-full object-cover border-4 border-fuchsia-400 dark:border-cyan-500 shadow-md" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Consultant John Doe">
<div>
<p class="text-xl font-semibold text-gray-900 dark:text-gray-100">John Doe</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">Senior Business Analyst</p>
<div class="flex items-center mt-1 text-sm text-gray-500 dark:text-gray-400">
<svg class="w-4 h-4 mr-1 text-yellow-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
4.9 (245 reviews)
</div>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 mt-4 text-sm">John specializes in digital transformation and has helped numerous clients achieve their strategic goals.</p>
</div>
<!-- Customer Support Card -->
<div class="bg-violet-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner border border-violet-100 dark:border-gray-600">
<h3 class="text-2xl font-bold mb-4 text-violet-700 dark:text-cyan-400">Need Help?</h3>
<p class="text-gray-700 dark:text-gray-300 mb-4">Our support team is ready to assist you with any questions or issues.</p>
<a href="#" class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-indigo-500 to-blue-500 text-white font-semibold rounded-md shadow hover:from-indigo-600 hover:to-blue-600 focus:outline-none focus:ring-2 focus:ring-indigo-400 dark:focus:ring-blue-400 transition-all duration-300">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
Contact Support
</a>
</div>
</div>
</div>
</div>
</div>
<style>
/* Adding a simple bounce/rise animation for chart bars */
@keyframes rise {
0% { transform: scaleY(0); opacity: 0; }
100% { transform: scaleY(1); opacity: 1; }
}
.animate-rise {
animation: rise 0.5s ease-out forwards;
transform-origin: bottom;
}
/* Custom focus/active state for selected date */
.selected-date:focus-within .ring-2, .selected-date:hover .ring-2 {
transform: scale(1.05);
opacity: 1;
}
</style>Composants associés
Luxury_Premium_Crypto_Stat_Card
Une carte statistique crypto/blockchain simple et élégante avec des tons de bijoux, un design réactif et une prise en charge du mode sombre, adaptée aux applications de luxe et haut de gamme.
Composants de visualisation de données
Un composant de visualisation de données de style rétro/vintage avec prise en charge du thème sombre et des effets réactifs utilisant Tailwind CSS.
Composant Composants de visualisation de données
Un composant de visualisation de données rétro-vintage pour les médias sociaux, avec une palette de couleurs complémentaires et une complexité modérée. Il est réactif et prend en charge le mode sombre à l’aide de Tailwind CSS.