Composant de la chronologie du Bauhaus
Un composant de chronologie simple et réactif avec un design inspiré du Bauhaus utilisant des formes géométriques et des couleurs analogues primaires, adapté aux systèmes de réservation. Inclut la prise en charge du mode sombre.
HTML Code
<div class="p-4 sm:p-8 md:p-12 bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-100 min-h-screen font-sans">
<div class="max-w-4xl mx-auto py-8 sm:py-12 bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
<h2 class="text-3xl sm:text-4xl font-extrabold text-center mb-10 text-gray-900 dark:text-gray-50 border-b-4 border-yellow-500 dark:border-yellow-400 pb-2 inline-block mx-auto">
Your Appointment Timeline
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 p-6">
<!-- Timeline Item 1 -->
<div class="flex flex-col items-center text-center group">
<div class="relative w-24 h-24 sm:w-28 sm:h-28 bg-blue-500 dark:bg-blue-600 rounded-full flex items-center justify-center mb-4 transition-transform duration-300 ease-in-out group-hover:scale-105 group-hover:rotate-6">
<svg class="w-12 h-12 sm:w-14 sm:h-14 text-white" 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 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg>
<div class="absolute -bottom-2 -right-2 w-8 h-8 sm:w-10 sm:h-10 bg-yellow-500 dark:bg-yellow-400 rounded-full flex items-center justify-center border-2 border-white dark:border-gray-800">
<span class="font-bold text-white text-sm sm:text-base">1</span>
</div>
</div>
<h3 class="text-lg sm:text-xl font-semibold mb-2 text-gray-900 dark:text-gray-50">Select Date & Time</h3>
<p class="text-sm text-gray-600 dark:text-gray-300">Choose your preferred slot that fits your schedule.</p>
</div>
<!-- Timeline Item 2 -->
<div class="flex flex-col items-center text-center group">
<div class="relative w-24 h-24 sm:w-28 sm:h-28 bg-yellow-500 dark:bg-yellow-400 rounded-full flex items-center justify-center mb-4 transition-transform duration-300 ease-in-out group-hover:scale-105 group-hover:-rotate-6">
<svg class="w-12 h-12 sm:w-14 sm:h-14 text-white" 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 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
</svg>
<div class="absolute -bottom-2 -right-2 w-8 h-8 sm:w-10 sm:h-10 bg-red-500 dark:bg-red-400 rounded-full flex items-center justify-center border-2 border-white dark:border-gray-800">
<span class="font-bold text-white text-sm sm:text-base">2</span>
</div>
</div>
<h3 class="text-lg sm:text-xl font-semibold mb-2 text-gray-900 dark:text-gray-50">Provide Details</h3>
<p class="text-sm text-gray-600 dark:text-gray-300">Fill out necessary information for your booking.</p>
</div>
<!-- Timeline Item 3 -->
<div class="flex flex-col items-center text-center group">
<div class="relative w-24 h-24 sm:w-28 sm:h-28 bg-red-500 dark:bg-red-400 rounded-full flex items-center justify-center mb-4 transition-transform duration-300 ease-in-out group-hover:scale-105 group-hover:rotate-6">
<svg class="w-12 h-12 sm:w-14 sm:h-14 text-white" 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="M5 13l4 4L19 7"></path>
</svg>
<div class="absolute -bottom-2 -right-2 w-8 h-8 sm:w-10 sm:h-10 bg-blue-500 dark:bg-blue-600 rounded-full flex items-center justify-center border-2 border-white dark:border-gray-800">
<span class="font-bold text-white text-sm sm:text-base">3</span>
</div>
</div>
<h3 class="text-lg sm:text-xl font-semibold mb-2 text-gray-900 dark:text-gray-50">Confirm & Book</h3>
<p class="text-sm text-gray-600 dark:text-gray-300">Review your booking and confirm to finalize it.</p>
</div>
</div>
<div class="mt-10 pt-6 border-t-2 border-dashed border-gray-300 dark:border-gray-700 text-center">
<a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105">
Start Your Booking
<svg class="ml-2 -mr-1 w-5 h-5" 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="M17 8l4 4m0 0l-4 4m4-4H3"></path>
</svg>
</a>
</div>
</div>
</div>Composants associés
Composant de chronologie avec Glassmorphism
Composant de chronologie avec style Glassmorphism, réactif et avec prise en charge du thème sombre
Cyberpunk_Timeline_Dating_Social_Component
Un composant de chronologie réactive avec une esthétique cyberpunk pour les plateformes de rencontres et les plateformes sociales. Comprend des arrière-plans sombres, des accents néon chauds et une mise en page adaptative pour les ordinateurs de bureau, les tablettes et les mobiles, avec une prise en charge complète du mode sombre.
Brutalist_Sepia_Timeline_Documentation
Un composant de chronologie complexe, de style brutaliste, pour la documentation ou les sites wiki, avec des tons sépia/brun et une réactivité totale avec prise en charge du mode sombre. Conçu avec un contraste élevé et une esthétique brute.