Art Deco Timeline Component
A responsive timeline component for events/conferences, inspired by Art Deco aesthetics with a purple/violet color scheme, supporting dark mode.
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>Related Components
Glassmorphism Timeline Component
A responsive Timeline Component featuring glassmorphism style with a triadic color scheme. It includes frosted glass-like translucent elements with blur effects, suitable for blog and content consumption, with dark mode support.
Timeline Component
A responsive timeline component with a candy/sweet color scheme, gradient transitions, and dark mode support, suitable for showcasing work or products in a portfolio. Features multiple timeline events.
Grayscale Social Media Timeline
A responsive, dark-mode ready social media timeline component built with Tailwind CSS. It features a strict grayscale color scheme, and complex post cards with user avatars, post content (text and images), engagement stats, and action buttons. Designed for social networking interfaces with multiple interactive elements on each post. The design supports dark backgrounds to reduce eye strain. No JavaScript is used.