Composant de la table des matières - Réservation/Réservation
Un composant de table des matières simple et réactif pour les systèmes de réservation, avec des couleurs en niveaux de gris et des transitions de dégradé subtiles. Inclut la prise en charge du mode sombre.
HTML Code
<div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen font-sans">
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
<div class="relative p-6 sm:p-8 bg-gradient-to-r from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 border-b border-gray-200 dark:border-gray-700">
<h2 class="text-2xl sm:text-3xl font-extrabold text-gray-900 dark:text-white mb-2 leading-tight">
Your Reservation Guide
</h2>
<p class="text-sm sm:text-base text-gray-600 dark:text-gray-300">
Navigate through your booking steps.
</p>
<div class="absolute inset-0 z-0 opacity-20 dark:opacity-10 pointer-events-none rounded-lg" style="background-image: linear-gradient(135deg, #e0e0e0 0%, #ffffff 100%); dark-background-image: linear-gradient(135deg, #333333 0%, #1a1a1a 100%);"></div>
</div>
<nav aria-label="Booking Navigation" class="p-4 sm:p-6 space-y-4">
<a href="#step-1" class="flex items-center p-3 sm:p-4 rounded-lg group transition-all duration-300 ease-in-out bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700 dark:hover:border-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600">
<span class="flex-shrink-0 w-8 h-8 sm:w-10 sm:h-10 rounded-full flex items-center justify-center text-lg sm:text-xl font-bold bg-gray-200 text-gray-700 dark:bg-gray-600 dark:text-gray-100 group-hover:bg-gray-300 dark:group-hover:bg-gray-500 transition-colors duration-300">
1
</span>
<div class="ml-4 flex-grow">
<h3 class="text-base sm:text-lg font-semibold text-gray-800 dark:text-gray-100 group-hover:text-gray-900 dark:group-hover:text-white transition-colors duration-300">
Select Service
</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Choose your desired service or treatment.</p>
</div>
<svg class="w-5 h-5 ml-auto text-gray-400 dark:text-gray-500 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors duration-300" 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>
</a>
<a href="#step-2" class="flex items-center p-3 sm:p-4 rounded-lg group transition-all duration-300 ease-in-out bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700 dark:hover:border-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600">
<span class="flex-shrink-0 w-8 h-8 sm:w-10 sm:h-10 rounded-full flex items-center justify-center text-lg sm:text-xl font-bold bg-gray-200 text-gray-700 dark:bg-gray-600 dark:text-gray-100 group-hover:bg-gray-300 dark:group-hover:bg-gray-500 transition-colors duration-300">
2
</span>
<div class="ml-4 flex-grow">
<h3 class="text-base sm:text-lg font-semibold text-gray-800 dark:text-gray-100 group-hover:text-gray-900 dark:group-hover:text-white transition-colors duration-300">
Pick Date & Time
</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Find available slots that suit your schedule.</p>
</div>
<svg class="w-5 h-5 ml-auto text-gray-400 dark:text-gray-500 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors duration-300" 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>
</a>
<a href="#step-3" class="flex items-center p-3 sm:p-4 rounded-lg group transition-all duration-300 ease-in-out bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700 dark:hover:border-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600">
<span class="flex-shrink-0 w-8 h-8 sm:w-10 sm:h-10 rounded-full flex items-center justify-center text-lg sm:text-xl font-bold bg-gray-200 text-gray-700 dark:bg-gray-600 dark:text-gray-100 group-hover:bg-gray-300 dark:group-hover:bg-gray-500 transition-colors duration-300">
3
</span>
<div class="ml-4 flex-grow">
<h3 class="text-base sm:text-lg font-semibold text-gray-800 dark:text-gray-100 group-hover:text-gray-900 dark:group-hover:text-white transition-colors duration-300">
Your Details
</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Provide contact and preference information.</p>
</div>
<svg class="w-5 h-5 ml-auto text-gray-400 dark:text-gray-500 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors duration-300" 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>
</a>
<a href="#step-4" class="flex items-center p-3 sm:p-4 rounded-lg group transition-all duration-300 ease-in-out bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700 dark:hover:border-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600">
<span class="flex-shrink-0 w-8 h-8 sm:w-10 sm:h-10 rounded-full flex items-center justify-center text-lg sm:text-xl font-bold bg-gray-200 text-gray-700 dark:bg-gray-600 dark:text-gray-100 group-hover:bg-gray-300 dark:group-hover:bg-gray-500 transition-colors duration-300">
4
</span>
<div class="ml-4 flex-grow">
<h3 class="text-base sm:text-lg font-semibold text-gray-800 dark:text-gray-100 group-hover:text-gray-900 dark:group-hover:text-white transition-colors duration-300">
Confirm Booking
</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Review your reservation details and complete.</p>
</div>
<svg class="w-5 h-5 ml-auto text-gray-400 dark:text-gray-500 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors duration-300" 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>
</a>
</nav>
</div>
</div>Composants associés
Composant de la table des matières
Un composant de table des matières simple et réactif avec des effets de néon/lueur et une palette de couleurs d’automne, adapté aux portfolios ou aux galeries de photographie, y compris la prise en charge du mode sombre.
Composant de la table des matières
Un composant de table des matières réactif stylisé en Material Design avec des couleurs vives, adapté aux blogs et à la consommation de contenu, y compris la prise en charge du mode sombre et plusieurs éléments interactifs.
Composant de la table des matières
Un composant de table des matières propre, minimaliste et réactif inspiré de la typographie suisse/internationale, conçu pour la documentation et les sites de base de connaissances, avec des couleurs neutres chaudes et une prise en charge complète du mode sombre.