Composant de la chronologie Art déco
Un composant de chronologie réactif pour les événements/conférences, inspiré de l’esthétique Art déco avec une palette de couleurs violette/violette, prenant en charge le mode sombre.
HTML Code
<div class="font-sans antialiased bg-stone-100 dark:bg-stone-900 text-stone-900 dark:text-stone-100 p-8 sm:p-12 md:p-16 lg:p-20">
<div class="max-w-5xl mx-auto py-8 lg:py-12 bg-purple-50 dark:bg-purple-950 shadow-xl rounded-xl border border-purple-200 dark:border-purple-800">
<h2 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-center mb-12 text-purple-800 dark:text-purple-300 tracking-wider uppercase font-serif-display leading-tight">
Event Schedule
</h2>
<div class="relative px-4 sm:px-8 lg:px-12">
<!-- Vertical Line -->
<div class="absolute left-1/2 -ml-0.5 w-1 bg-purple-300 dark:bg-purple-700 h-full rounded-full transform -translate-x-1/2"></div>
<!-- Timeline Item 1 -->
<div class="mb-16 flex justify-between items-center w-full right-aligned">
<div class="order-1 w-full sm:w-5/12"></div>
<div class="z-20 flex items-center order-1 bg-purple-700 dark:bg-purple-500 shadow-xl w-8 h-8 rounded-full sm:w-10 sm:h-10 transition-all duration-300 hover:scale-110 border-2 border-purple-900 dark:border-purple-300">
<h1 class="mx-auto font-semibold text-lg text-white">1</h1>
</div>
<div class="order-1 bg-gradient-to-br from-purple-100 to-purple-200 dark:from-purple-900 dark:to-purple-800 rounded-xl shadow-lg w-full sm:w-5/12 px-6 py-4 sm:ml-8 animate-fade-in-right border border-purple-300 dark:border-purple-700 transform hover:-translate-x-1 transition-transform duration-300">
<h3 class="mb-3 font-bold text-purple-800 dark:text-purple-200 text-xl md:text-2xl">Grand Opening & Keynote</h3>
<p class="text-sm md:text-base leading-snug tracking-wide text-stone-700 dark:text-stone-300 mb-2">
Welcome address by CEO and a profound keynote speech on the future of design.
</p>
<span class="text-xs text-purple-600 dark:text-purple-400 font-medium">09:00 AM - 10:30 AM</span>
<img src="https://picsum.photos/300/200?random=1" alt="Grand Opening" class="w-full h-auto mt-4 rounded-lg shadow-md border border-purple-200 dark:border-purple-800 object-cover">
</div>
</div>
<!-- Timeline Item 2 -->
<div class="mb-16 flex justify-between flex-row-reverse items-center w-full left-aligned">
<div class="order-1 w-full sm:w-5/12"></div>
<div class="z-20 flex items-center order-1 bg-purple-700 dark:bg-purple-500 shadow-xl w-8 h-8 rounded-full sm:w-10 sm:h-10 transition-all duration-300 hover:scale-110 border-2 border-purple-900 dark:border-purple-300">
<h1 class="mx-auto font-semibold text-lg text-white">2</h1>
</div>
<div class="order-1 bg-gradient-to-br from-purple-100 to-purple-200 dark:from-purple-900 dark:to-purple-800 rounded-xl shadow-lg w-full sm:w-5/12 px-6 py-4 sm:mr-8 animate-fade-in-left border border-purple-300 dark:border-purple-700 transform hover:translate-x-1 transition-transform duration-300">
<h3 class="mb-3 font-bold text-purple-800 dark:text-purple-200 text-xl md:text-2xl">Breakout Sessions: Track A & B</h3>
<p class="text-sm md:text-base leading-snug tracking-wide text-stone-700 dark:text-stone-300 mb-2">
Concurrent sessions covering advanced UI/UX principles and backend integration techniques.
</p>
<span class="text-xs text-purple-600 dark:text-purple-400 font-medium mb-4 block">10:45 AM - 12:15 PM</span>
<div class="flex space-x-2 mt-2">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Speaker 1" class="w-10 h-10 rounded-full border-2 border-purple-600 dark:border-purple-400 shadow-md transform hover:scale-105 transition-transform duration-200">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Speaker 2" class="w-10 h-10 rounded-full border-2 border-purple-600 dark:border-purple-400 shadow-md transform hover:scale-105 transition-transform duration-200">
</div>
</div>
</div>
<!-- Timeline Item 3 -->
<div class="mb-16 flex justify-between items-center w-full right-aligned">
<div class="order-1 w-full sm:w-5/12"></div>
<div class="z-20 flex items-center order-1 bg-purple-700 dark:bg-purple-500 shadow-xl w-8 h-8 rounded-full sm:w-10 sm:h-10 transition-all duration-300 hover:scale-110 border-2 border-purple-900 dark:border-purple-300">
<h1 class="mx-auto font-semibold text-lg text-white">3</h1>
</div>
<div class="order-1 bg-gradient-to-br from-purple-100 to-purple-200 dark:from-purple-900 dark:to-purple-800 rounded-xl shadow-lg w-full sm:w-5/12 px-6 py-4 sm:ml-8 animate-fade-in-right border border-purple-300 dark:border-purple-700 transform hover:-translate-x-1 transition-transform duration-300">
<h3 class="mb-3 font-bold text-purple-800 dark:text-purple-200 text-xl md:text-2xl">Networking Lunch</h3>
<p class="text-sm md:text-base leading-snug tracking-wide text-stone-700 dark:text-stone-300 mb-2">
Opportunity to connect with peers and industry leaders over a catered lunch.
</p>
<span class="text-xs text-purple-600 dark:text-purple-400 font-medium mb-4 block">12:30 PM - 01:30 PM</span>
<img src="https://picsum.photos/300/200?random=2" alt="Networking Lunch" class="w-full h-auto mt-4 rounded-lg shadow-md border border-purple-200 dark:border-purple-800 object-cover">
</div>
</div>
<!-- Timeline Item 4 -->
<div class="mb-16 flex justify-between flex-row-reverse items-center w-full left-aligned">
<div class="order-1 w-full sm:w-5/12"></div>
<div class="z-20 flex items-center order-1 bg-purple-700 dark:bg-purple-500 shadow-xl w-8 h-8 rounded-full sm:w-10 sm:h-10 transition-all duration-300 hover:scale-110 border-2 border-purple-900 dark:border-purple-300">
<h1 class="mx-auto font-semibold text-lg text-white">4</h1>
</div>
<div class="order-1 bg-gradient-to-br from-purple-100 to-purple-200 dark:from-purple-900 dark:to-purple-800 rounded-xl shadow-lg w-full sm:w-5/12 px-6 py-4 sm:mr-8 animate-fade-in-left border border-purple-300 dark:border-purple-700 transform hover:translate-x-1 transition-transform duration-300">
<h3 class="mb-3 font-bold text-purple-800 dark:text-purple-200 text-xl md:text-2xl">Interactive Workshops</h3>
<p class="text-sm md:text-base leading-snug tracking-wide text-stone-700 dark:text-stone-300 mb-2">
Hands-on sessions focusing on new development tools and agile methodologies.
</p>
<span class="text-xs text-purple-600 dark:text-purple-400 font-medium mb-4 block">01:45 PM - 03:15 PM</span>
<div class="flex -space-x-4 mt-4">
<img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Participant 1" class="w-10 h-10 rounded-full border-2 border-purple-600 dark:border-purple-400 shadow-md transform hover:scale-105 transition-transform duration-200">
<img src="https://randomuser.me/api/portraits/men/50.jpg" alt="Participant 2" class="w-10 h-10 rounded-full border-2 border-purple-600 dark:border-purple-400 shadow-md transform hover:scale-105 transition-transform duration-200">
<img src="https://randomuser.me/api/portraits/women/10.jpg" alt="Participant 3" class="w-10 h-10 rounded-full border-2 border-purple-600 dark:border-purple-400 shadow-md transform hover:scale-105 transition-transform duration-200">
<div class="w-10 h-10 rounded-full bg-purple-600 dark:bg-purple-400 flex items-center justify-center text-white text-xs font-bold ring-2 ring-purple-600 dark:ring-purple-400 shadow-md">+15</div>
</div>
</div>
</div>
<!-- Timeline Item 5 -->
<div class="flex justify-between items-center w-full right-aligned">
<div class="order-1 w-full sm:w-5/12"></div>
<div class="z-20 flex items-center order-1 bg-purple-700 dark:bg-purple-500 shadow-xl w-8 h-8 rounded-full sm:w-10 sm:h-10 transition-all duration-300 hover:scale-110 border-2 border-purple-900 dark:border-purple-300">
<h1 class="mx-auto font-semibold text-lg text-white">5</h1>
</div>
<div class="order-1 bg-gradient-to-br from-purple-100 to-purple-200 dark:from-purple-900 dark:to-purple-800 rounded-xl shadow-lg w-full sm:w-5/12 px-6 py-4 sm:ml-8 animate-fade-in-right border border-purple-300 dark:border-purple-700 transform hover:-translate-x-1 transition-transform duration-300">
<h3 class="mb-3 font-bold text-purple-800 dark:text-purple-200 text-xl md:text-2xl">Closing Remarks & Farewell</h3>
<p class="text-sm md:text-base leading-snug tracking-wide text-stone-700 dark:text-stone-300 mb-2">
Summary of the event and thanks to all participants and sponsors.
</p>
<span class="text-xs text-purple-600 dark:text-purple-400 font-medium">03:30 PM - 04:00 PM</span>
<img src="https://picsum.photos/300/200?random=3" alt="Closing Remarks" class="w-full h-auto mt-4 rounded-lg shadow-md border border-purple-200 dark:border-purple-800 object-cover">
</div>
</div>
</div>
</div>
<!-- Custom Styles for responsiveness and Art Deco feel -->
<style>
@layer base {
/* Basic font for content */
body {
font-family: 'Open Sans', sans-serif;
}
/* A more decorative font for headings, simulating Art Deco */
.font-serif-display {
font-family: 'Playfair Display', serif; /* A common choice for classic/elegant feel */
}
}
/* Tailwind's default breakpoints for reference:
sm: 640px
md: 768px
lg: 1024px
xl: 1280px
2xl: 1536px
*/
/* Mobile styles (default) */
.timeline-item > div:first-child {
margin-left: 0;
margin-right: 0;
width: 100%;
}
.left-aligned .order-1:first-child {
order: 1; /* text content */
}
.left-aligned .order-1:nth-child(2) {
order: 2; /* circle */
}
.left-aligned .order-1:nth-child(3) {
order: 3; /* empty div */
}
.right-aligned .order-1:first-child {
order: 3; /* empty div */
}
.right-aligned .order-1:nth-child(2) {
order: 2; /* circle */
}
.right-aligned .order-1:nth-child(3) {
order: 1; /* text content */
}
/* Small screens and up (sm) */
@media (min-width: 640px) {
.left-aligned .order-1:first-child {
order: 3;
}
.left-aligned .order-1:nth-child(2) {
order: 2;
}
.left-aligned .order-1:nth-child(3) {
order: 1;
}
.right-aligned .order-1:first-child {
order: 1;
}
.right-aligned .order-1:nth-child(2) {
order: 2;
}
.right-aligned .order-1:nth-child(3) {
order: 3;
}
.left-aligned div:nth-child(3) {
text-align: right; /* Align text right for left-aligned card */
}
/* Adjust margins for two-column layout */
.left-aligned div:nth-child(3) {
margin-right: -4px; /* compensate for line */
transform: translateX(4px);
}
.right-aligned div:nth-child(3) {
margin-left: -4px; /* compensate for line */
transform: translateX(-4px);
}
.timeline-item > div:nth-child(3) {
width: 45%; /* Shrink content width for two columns */
}
.timeline-item > div:first-child {
width: 45%; /* Shrink content width for two columns */
}
/* Specific adjustment for mobile: make the line less prominent */
.absolute.left-1\/2 {
left: 50%; /* Center the line */
}
}
/* Keyframe for fade-in animations */
@keyframes fade-in-right {
from { opacity: 0; transform: translateX(-20px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes fade-in-left {
from { opacity: 0; transform: translateX(20px); }
to { opacity: 1; transform: translateX(0); }
}
.animate-fade-in-right {
animation: fade-in-right 0.6s ease-out forwards; /* Longer for visual effect */
}
.animate-fade-in-left {
animation: fade-in-left 0.6s ease-out forwards;
}
/* To ensure animations trigger correctly, using a simple .in-view approach or JS for more complex scenarios is needed.
For this pure HTML example, they will run on load. */
</style>
<!-- Adding Google Fonts for Art Deco feel (optional, but good for demo) -->
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
</div>Composants associés
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.
Composant de chronologie de médias sociaux - Glassmorphism
Un composant complexe et réactif de chronologie de médias sociaux avec un design glassmorphism avec une palette de couleurs analogue, la prise en charge du mode sombre et des éléments interactifs pour les interfaces de réseaux sociaux.
Composant de chronologie
Composant de chronologie avec conception 3D, effets réactifs et prise en charge du thème sombre