Timeline Component
A complex, responsive timeline component with neon/glow effects and autumn color scheme, suitable for forums or community platforms, including dark mode support.
HTML Code
<div class="font-sans bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-gray-100 min-h-screen p-4 sm:p-6 lg:p-8">
<div class="max-w-6xl mx-auto py-8">
<h2 class="text-center text-4xl sm:text-5xl font-extrabold mb-12 relative overflow-hidden">
<span class="relative z-10 text-transparent bg-clip-text bg-gradient-to-r from-orange-400 via-rose-600 to-red-800 dark:from-orange-300 dark:via-rose-500 dark:to-red-700">
Community Journey
</span>
<span class="absolute inset-0 z-0 blur-lg opacity-70 bg-gradient-to-r from-orange-400 via-rose-600 to-red-800 dark:from-orange-300 dark:via-rose-500 dark:to-red-700 animate-pulse-light"></span>
</h2>
<div class="relative before:absolute before:inset-y-0 before:left-3 sm:before:left-1/2 before:w-1 before:bg-gradient-to-b before:from-orange-500 before:via-rose-700 before:to-red-900 dark:before:from-orange-400 dark:before:via-rose-600 dark:before:to-red-800 before:origin-top before:scale-y-0 before:animate-timeline-grow">
<!-- Timeline Item 1 -->
<div class="timeline-item flex items-center w-full my-8 group">
<div class="hidden sm:block sm:w-1/2 text-right pr-8">
<div class="bg-brown-800/20 dark:bg-brown-900/40 p-4 rounded-lg shadow-lg backdrop-blur-sm relative border-l-4 border-orange-500 dark:border-orange-400 transform transition-all duration-300 group-hover:scale-105 group-hover:z-10 group-hover:rotate-1">
<div class="absolute -right-2 top-1/2 -mt-2 w-4 h-4 bg-orange-500 dark:bg-orange-400 rotate-45"></div>
<span class="block text-sm font-semibold text-orange-400 dark:text-orange-300 mb-1">October 26, 2023</span>
<h3 class="text-xl font-bold mb-2 text-orange-600 dark:text-orange-400 custom-glow">New Horizons Launched!</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">The community officially opened its doors, welcoming pioneers from around the globe. Discussions began on crafting our collective future.</p>
<img src="https://picsum.photos/400/250?random=1" alt="Launch day" class="mt-4 rounded-md object-cover w-full h-32 opacity-80 group-hover:opacity-100 transition-opacity duration-300">
</div>
</div>
<div class="w-8 h-8 rounded-full bg-orange-500 dark:bg-orange-400 absolute left-2 sm:left-1/2 -ml-0.5 sm:-ml-4 flex items-center justify-center
ring-4 ring-orange-300 dark:ring-orange-600 z-10 custom-glow-sm">
<span class="text-lg font-bold text-gray-900 dark:text-gray-100">1</span>
</div>
<div class="w-full sm:w-1/2 sm:pl-8 pr-4 sm:pr-0">
<div class="sm:hidden bg-brown-800/20 dark:bg-brown-900/40 p-4 rounded-lg shadow-lg backdrop-blur-sm relative border-l-4 border-orange-500 dark:border-orange-400 transform transition-all duration-300 group-hover:scale-105 group-hover:z-10 group-hover:-rotate-1">
<div class="absolute -left-2 top-1/2 -mt-2 w-4 h-4 bg-orange-500 dark:bg-orange-400 rotate-45"></div>
<span class="block text-sm font-semibold text-orange-400 dark:text-orange-300 mb-1">October 26, 2023</span>
<h3 class="text-xl font-bold mb-2 text-orange-600 dark:text-orange-400 custom-glow">New Horizons Launched!</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">The community officially opened its doors, welcoming pioneers from around the globe. Discussions began on crafting our collective future.</p>
<img src="https://picsum.photos/400/250?random=1" alt="Launch day" class="mt-4 rounded-md object-cover w-full h-32 opacity-80 group-hover:opacity-100 transition-opacity duration-300">
</div>
</div>
</div>
<!-- Timeline Item 2 -->
<div class="timeline-item flex items-center w-full my-8 group flex-row-reverse">
<div class="hidden sm:block sm:w-1/2 text-left pl-8">
<div class="bg-brown-800/20 dark:bg-brown-900/40 p-4 rounded-lg shadow-lg backdrop-blur-sm relative border-r-4 border-rose-700 dark:border-rose-600 transform transition-all duration-300 group-hover:scale-105 group-hover:z-10 group-hover:-rotate-1">
<div class="absolute -left-2 top-1/2 -mt-2 w-4 h-4 bg-rose-700 dark:bg-rose-600 rotate-45"></div>
<span class="block text-sm font-semibold text-rose-600 dark:text-rose-500 mb-1">November 15, 2023</span>
<h3 class="text-xl font-bold mb-2 text-rose-800 dark:text-rose-600 custom-glow">First Community Poll</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">Our members cast their votes on the initial shared resource allocation, a true test of our collaborative spirit.</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-rose-500">
<div>
<p class="text-gray-600 dark:text-gray-400 text-xs">Poll initiated by</p>
<p class="font-medium text-rose-600 dark:text-rose-500">Elara_Sage</p>
</div>
</div>
</div>
</div>
<div class="w-8 h-8 rounded-full bg-rose-700 dark:bg-rose-600 absolute left-2 sm:left-1/2 -ml-0.5 sm:-ml-4 flex items-center justify-center
ring-4 ring-rose-300 dark:ring-rose-800 z-10 custom-glow-sm">
<span class="text-lg font-bold text-gray-900 dark:text-gray-100">2</span>
</div>
<div class="w-full sm:w-1/2 sm:pr-8 pl-4 sm:pl-0">
<div class="sm:hidden bg-brown-800/20 dark:bg-brown-900/40 p-4 rounded-lg shadow-lg backdrop-blur-sm relative border-r-4 border-rose-700 dark:border-rose-600 transform transition-all duration-300 group-hover:scale-105 group-hover:z-10 group-hover:rotate-1">
<div class="absolute -right-2 top-1/2 -mt-2 w-4 h-4 bg-rose-700 dark:bg-rose-600 rotate-45"></div>
<span class="block text-sm font-semibold text-rose-600 dark:text-rose-500 mb-1">November 15, 2023</span>
<h3 class="text-xl font-bold mb-2 text-rose-800 dark:text-rose-600 custom-glow">First Community Poll</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">Our members cast their votes on the initial shared resource allocation, a true test of our collaborative spirit.</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-rose-500">
<div>
<p class="text-gray-600 dark:text-gray-400 text-xs">Poll initiated by</p>
<p class="font-medium text-rose-600 dark:text-rose-500">Elara_Sage</p>
</div>
</div>
</div>
</div>
</div>
<!-- Timeline Item 3 -->
<div class="timeline-item flex items-center w-full my-8 group">
<div class="hidden sm:block sm:w-1/2 text-right pr-8">
<div class="bg-brown-800/20 dark:bg-brown-900/40 p-4 rounded-lg shadow-lg backdrop-blur-sm relative border-l-4 border-red-900 dark:border-red-800 transform transition-all duration-300 group-hover:scale-105 group-hover:z-10 group-hover:rotate-1">
<div class="absolute -right-2 top-1/2 -mt-2 w-4 h-4 bg-red-900 dark:bg-red-800 rotate-45"></div>
<span class="block text-sm font-semibold text-red-800 dark:text-red-700 mb-1">December 01, 2023</span>
<h3 class="text-xl font-bold mb-2 text-red-900 dark:text-red-800 custom-glow">Knowledge Hub Unveiled</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">A new section dedicated to shared learning resources, tutorials, and FAQs was launched, fostering self-sufficiency.</p>
<div class="flex flex-wrap gap-2 mt-4">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300">Guides</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300">Tutorials</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300">FAQs</span>
</div>
</div>
</div>
<div class="w-8 h-8 rounded-full bg-red-900 dark:bg-red-800 absolute left-2 sm:left-1/2 -ml-0.5 sm:-ml-4 flex items-center justify-center
ring-4 ring-red-300 dark:ring-red-900 z-10 custom-glow-sm">
<span class="text-lg font-bold text-gray-900 dark:text-gray-100">3</span>
</div>
<div class="w-full sm:w-1/2 sm:pl-8 pr-4 sm:pr-0">
<div class="sm:hidden bg-brown-800/20 dark:bg-brown-900/40 p-4 rounded-lg shadow-lg backdrop-blur-sm relative border-l-4 border-red-900 dark:border-red-800 transform transition-all duration-300 group-hover:scale-105 group-hover:z-10 group-hover:-rotate-1">
<div class="absolute -left-2 top-1/2 -mt-2 w-4 h-4 bg-red-900 dark:bg-red-800 rotate-45"></div>
<span class="block text-sm font-semibold text-red-800 dark:text-red-700 mb-1">December 01, 2023</span>
<h3 class="text-xl font-bold mb-2 text-red-900 dark:text-red-800 custom-glow">Knowledge Hub Unveiled</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">A new section dedicated to shared learning resources, tutorials, and FAQs was launched, fostering self-sufficiency.</p>
<div class="flex flex-wrap gap-2 mt-4">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300">Guides</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300">Tutorials</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300">FAQs</span>
</div>
</div>
</div>
</div>
<!-- Timeline Item 4 -->
<div class="timeline-item flex items-center w-full my-8 group flex-row-reverse">
<div class="hidden sm:block sm:w-1/2 text-left pl-8">
<div class="bg-brown-800/20 dark:bg-brown-900/40 p-4 rounded-lg shadow-lg backdrop-blur-sm relative border-r-4 border-orange-500 dark:border-orange-400 transform transition-all duration-300 group-hover:scale-105 group-hover:z-10 group-hover:-rotate-1">
<div class="absolute -left-2 top-1/2 -mt-2 w-4 h-4 bg-orange-500 dark:bg-orange-400 rotate-45"></div>
<span class="block text-sm font-semibold text-orange-400 dark:text-orange-300 mb-1">January 10, 2024</span>
<h3 class="text-xl font-bold mb-2 text-orange-600 dark:text-orange-400 custom-glow">First Community Event</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">A successful virtual meet-up brought members closer, with shared stories and future plans discussed.</p>
<div class="flex -space-x-2 mt-4">
<img class="w-10 h-10 rounded-full border-2 border-orange-300 dark:border-orange-600" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Amy's avatar">
<img class="w-10 h-10 rounded-full border-2 border-orange-300 dark:border-orange-600" src="https://randomuser.me/api/portraits/men/50.jpg" alt="John's avatar">
<img class="w-10 h-10 rounded-full border-2 border-orange-300 dark:border-orange-600" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Sarah's avatar">
<div class="w-10 h-10 rounded-full border-2 border-orange-300 dark:border-orange-600 bg-orange-500 flex items-center justify-center text-white text-sm font-medium">+50</div>
</div>
</div>
</div>
<div class="w-8 h-8 rounded-full bg-orange-500 dark:bg-orange-400 absolute left-2 sm:left-1/2 -ml-0.5 sm:-ml-4 flex items-center justify-center
ring-4 ring-orange-300 dark:ring-orange-600 z-10 custom-glow-sm">
<span class="text-lg font-bold text-gray-900 dark:text-gray-100">4</span>
</div>
<div class="w-full sm:w-1/2 sm:pr-8 pl-4 sm:pl-0">
<div class="sm:hidden bg-brown-800/20 dark:bg-brown-900/40 p-4 rounded-lg shadow-lg backdrop-blur-sm relative border-r-4 border-orange-500 dark:border-orange-400 transform transition-all duration-300 group-hover:scale-105 group-hover:z-10 group-hover:rotate-1">
<div class="absolute -right-2 top-1/2 -mt-2 w-4 h-4 bg-orange-500 dark:bg-orange-400 rotate-45"></div>
<span class="block text-sm font-semibold text-orange-400 dark:text-orange-300 mb-1">January 10, 2024</span>
<h3 class="text-xl font-bold mb-2 text-orange-600 dark:text-orange-400 custom-glow">First Community Event</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">A successful virtual meet-up brought members closer, with shared stories and future plans discussed.</p>
<div class="flex -space-x-2 mt-4">
<img class="w-10 h-10 rounded-full border-2 border-orange-300 dark:border-orange-600" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Amy's avatar">
<img class="w-10 h-10 rounded-full border-2 border-orange-300 dark:border-orange-600" src="https://randomuser.me/api/portraits/men/50.jpg" alt="John's avatar">
<img class="w-10 h-10 rounded-full border-2 border-orange-300 dark:border-orange-600" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Sarah's avatar">
<div class="w-10 h-10 rounded-full border-2 border-orange-300 dark:border-orange-600 bg-orange-500 flex items-center justify-center text-white text-sm font-medium">+50</div>
</div>
</div>
</div>
</div>
<!-- Timeline Item 5 -->
<div class="timeline-item flex items-center w-full my-8 group">
<div class="hidden sm:block sm:w-1/2 text-right pr-8">
<div class="bg-brown-800/20 dark:bg-brown-900/40 p-4 rounded-lg shadow-lg backdrop-blur-sm relative border-l-4 border-rose-700 dark:border-rose-600 transform transition-all duration-300 group-hover:scale-105 group-hover:z-10 group-hover:rotate-1">
<div class="absolute -right-2 top-1/2 -mt-2 w-4 h-4 bg-rose-700 dark:bg-rose-600 rotate-45"></div>
<span class="block text-sm font-semibold text-rose-600 dark:text-rose-500 mb-1">February 20, 2024</span>
<h3 class="text-xl font-bold mb-2 text-rose-800 dark:text-rose-600 custom-glow">Moderation Team Expansion</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">Growing pains led to the expansion of our dedicated moderation team, ensuring a safe and vibrant space.</p>
<a href="#" class="mt-4 inline-flex items-center text-rose-600 dark:text-rose-500 hover:text-rose-800 dark:hover:text-rose-700 font-medium transition-colors duration-200">
Meet the Team
<svg class="ml-2 w-4 h-4" 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 class="w-8 h-8 rounded-full bg-rose-700 dark:bg-rose-600 absolute left-2 sm:left-1/2 -ml-0.5 sm:-ml-4 flex items-center justify-center
ring-4 ring-rose-300 dark:ring-rose-800 z-10 custom-glow-sm">
<span class="text-lg font-bold text-gray-900 dark:text-gray-100">5</span>
</div>
<div class="w-full sm:w-1/2 sm:pl-8 pr-4 sm:pr-0">
<div class="sm:hidden bg-brown-800/20 dark:bg-brown-900/40 p-4 rounded-lg shadow-lg backdrop-blur-sm relative border-l-4 border-rose-700 dark:border-rose-600 transform transition-all duration-300 group-hover:scale-105 group-hover:z-10 group-hover:-rotate-1">
<div class="absolute -left-2 top-1/2 -mt-2 w-4 h-4 bg-rose-700 dark:bg-rose-600 rotate-45"></div>
<span class="block text-sm font-semibold text-rose-600 dark:text-rose-500 mb-1">February 20, 2024</span>
<h3 class="text-xl font-bold mb-2 text-rose-800 dark:text-rose-600 custom-glow">Moderation Team Expansion</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">Growing pains led to the expansion of our dedicated moderation team, ensuring a safe and vibrant space.</p>
<a href="#" class="mt-4 inline-flex items-center text-rose-600 dark:text-rose-500 hover:text-rose-800 dark:hover:text-rose-700 font-medium transition-colors duration-200">
Meet the Team
<svg class="ml-2 w-4 h-4" 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>
</div>
</div>
<style>
@keyframes pulse-light {
0% { opacity: 0.7; transform: scale(1); }
50% { opacity: 1; transform: scale(1.02); }
100% { opacity: 0.7; transform: scale(1); }
}
@keyframes glow {
0% { text-shadow: 0 0 5px rgba(255, 165, 0, 0.5), 0 0 10px rgba(255, 69, 0, 0.4); }
50% { text-shadow: 0 0 10px rgba(255, 165, 0, 0.8), 0 0 20px rgba(255, 69, 0, 0.6); }
100% { text-shadow: 0 0 5px rgba(255, 165, 0, 0.5), 0 0 10px rgba(255, 69, 0, 0.4); }
}
@keyframes glow-dark {
0% { text-shadow: 0 0 5px rgba(251, 146, 60, 0.5), 0 0 10px rgba(244, 63, 94, 0.4); }
50% { text-shadow: 0 0 10px rgba(251, 146, 60, 0.8), 0 0 20px rgba(244, 63, 94, 0.6); }
100% { text-shadow: 0 0 5px rgba(251, 146, 60, 0.5), 0 0 10px rgba(244, 63, 94, 0.4); }
}
@keyframes glow-sm {
0% { box-shadow: 0 0 3px rgba(255, 165, 0, 0.6), 0 0 6px rgba(255, 69, 0, 0.4); }
50% { box-shadow: 0 0 6px rgba(255, 165, 0, 0.9), 0 0 12px rgba(255, 69, 0, 0.7); }
100% { box-shadow: 0 0 3px rgba(255, 165, 0, 0.6), 0 0 6px rgba(255, 69, 0, 0.4); }
}
@keyframes glow-sm-dark {
0% { box-shadow: 0 0 3px rgba(251, 146, 60, 0.6), 0 0 6px rgba(244, 63, 94, 0.4); }
50% { box-shadow: 0 0 6px rgba(251, 146, 60, 0.9), 0 0 12px rgba(244, 63, 94, 0.7); }
100% { box-shadow: 0 0 3px rgba(251, 146, 60, 0.6), 0 0 6px rgba(244, 63, 94, 0.4); }
}
.animate-pulse-light {
animation: pulse-light 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.custom-glow {
animation: glow 3s ease-in-out infinite;
}
.dark .custom-glow {
animation: glow-dark 3s ease-in-out infinite;
}
.custom-glow-sm {
animation: glow-sm 2.5s ease-in-out infinite;
}
.dark .custom-glow-sm {
animation: glow-sm-dark 2.5s ease-in-out infinite;
}
@keyframes timeline-grow {
0% {
transform: scaleY(0);
transform-origin: top;
}
100% {
transform: scaleY(1);
transform-origin: top;
}
}
.animate-timeline-grow {
animation: timeline-grow 2s ease-out forwards;
}
/* Fallback for sm: breakpoints for flex-direction */
.timeline-item > div:first-child {
width: 100%; /* Default for mobile */
text-align: left;
padding-right: 0;
}
.timeline-item.flex-row-reverse > div:first-child {
text-align: left;
padding-left: 0;
}
@media (min-width: 640px) {
.timeline-item > div:first-child {
width: 50%;
text-align: right;
padding-right: 2rem; /* Matches sm:pr-8 */
}
.timeline-item.flex-row-reverse > div:first-child {
text-align: left;
padding-left: 2rem; /* Matches sm:pl-8 */
}
.timeline-item > div:last-child {
width: 50%;
padding-left: 2rem; /* Matches sm:pl-8 */
padding-right: 0; /* Clear mobile pr-4 */
}
.timeline-item.flex-row-reverse > div:last-child {
padding-right: 2rem; /* Matches sm:pr-8 */
padding-left: 0; /* Clear mobile pl-4 */
}
}
</style>
</div>Related Components
Neumorphism Timeline Component
A responsive Timeline Component styled with Neumorphism using Tailwind CSS, featuring dark mode support.
Timeline Component
A responsive timeline component with triadic color scheme, microinteraction-focused design for business/corporate websites, supporting light and dark modes.
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.