Timeline Component
A complex, responsive timeline component designed for educational platforms, featuring a clean, minimalist typography-focused design with earth tones and full dark mode support.
HTML Code
<div class="font-sans antialiased text-gray-800 bg-gray-50 dark:bg-gray-900 dark:text-gray-100 min-h-screen py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-4xl mx-auto">
<h1 class="text-4xl sm:text-5xl font-extrabold mb-12 text-center leading-tight dark:text-gray-50">
Learning Journey Timeline
</h1>
<div class="space-y-16">
<!-- Timeline Item 1 -->
<div class="relative flex flex-col md:flex-row items-center">
<div class="hidden md:block absolute left-1/2 -translate-x-1/2 w-0.5 bg-yellow-700 dark:bg-yellow-600 h-full -top-6 bottom-auto"></div>
<div class="hidden md:block absolute left-1/2 -ml-2.5 w-5 h-5 rounded-full bg-yellow-700 dark:bg-yellow-600 border-2 border-white dark:border-gray-900 z-10"></div>
<div class="md:flex-1 md:pr-8 md:text-right">
<p class="text-sm text-yellow-700 dark:text-yellow-600 font-semibold mb-1">Level 1</p>
<h2 class="text-2xl font-bold mb-3 text-yellow-900 dark:text-yellow-50">Foundations of Web Development</h2>
<p class="text-base text-gray-700 dark:text-gray-300 leading-relaxed">
Dive into the essential building blocks of the web. Learn HTML for structuring content and CSS for styling beautiful web pages. Discover browser developer tools and basic responsive design principles.
</p>
<div class="mt-4 flex flex-wrap gap-2 justify-center md:justify-end">
<span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">HTML5</span>
<span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">CSS3</span>
<span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">Responsive Design</span>
</div>
</div>
<div class="w-px h-16 bg-yellow-700 dark:bg-yellow-600 md:hidden my-4"></div>
<div class="w-5 h-5 rounded-full bg-yellow-700 dark:bg-yellow-600 border-2 border-white dark:border-gray-900 z-10 md:hidden"></div>
<div class="w-px h-16 bg-yellow-700 dark:bg-yellow-600 md:hidden my-4"></div>
<div class="md:flex-1 md:pl-8 mt-6 md:mt-0">
<img src="https://picsum.photos/400/250?random=1" alt="Foundations" class="rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 object-cover w-full h-auto">
<div class="mt-4 text-sm text-gray-600 dark:text-gray-400 flex items-center justify-center md:justify-start">
<svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-400" 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
Approx. 40 hours
</div>
</div>
</div>
<!-- Timeline Item 2 -->
<div class="relative flex flex-col md:flex-row-reverse items-center">
<div class="hidden md:block absolute left-1/2 -translate-x-1/2 w-0.5 bg-yellow-700 dark:bg-yellow-600 h-full -top-6 bottom-auto"></div>
<div class="hidden md:block absolute left-1/2 -ml-2.5 w-5 h-5 rounded-full bg-yellow-700 dark:bg-yellow-600 border-2 border-white dark:border-gray-900 z-10"></div>
<div class="md:flex-1 md:pl-8 md:text-left">
<p class="text-sm text-yellow-700 dark:text-yellow-600 font-semibold mb-1">Level 2</p>
<h2 class="text-2xl font-bold mb-3 text-yellow-900 dark:text-yellow-50">Interactive Frontend with JavaScript</h2>
<p class="text-base text-gray-700 dark:text-gray-300 leading-relaxed">
Unlock dynamic behavior using JavaScript. Master DOM manipulation, event handling, and asynchronous programming. Build interactive user interfaces and enhance user experience.
</p>
<div class="mt-4 flex flex-wrap gap-2 justify-center md:justify-start">
<span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">JavaScript ES6+</span>
<span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">DOM Manipulation</span>
<span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">APIs (Fetch)</span>
</div>
</div>
<div class="w-px h-16 bg-yellow-700 dark:bg-yellow-600 md:hidden my-4"></div>
<div class="w-5 h-5 rounded-full bg-yellow-700 dark:bg-yellow-600 border-2 border-white dark:border-gray-900 z-10 md:hidden"></div>
<div class="w-px h-16 bg-yellow-700 dark:bg-yellow-600 md:hidden my-4"></div>
<div class="md:flex-1 md:pr-8 mt-6 md:mt-0">
<img src="https://picsum.photos/400/250?random=2" alt="Frontend Interactive" class="rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 object-cover w-full h-auto">
<div class="mt-4 text-sm text-gray-600 dark:text-gray-400 flex items-center justify-center md:justify-end">
<svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-400" 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
Approx. 50 hours
</div>
</div>
</div>
<!-- Timeline Item 3 -->
<div class="relative flex flex-col md:flex-row items-center">
<div class="hidden md:block absolute left-1/2 -translate-x-1/2 w-0.5 bg-yellow-700 dark:bg-yellow-600 h-full -top-6 bottom-auto"></div>
<div class="hidden md:block absolute left-1/2 -ml-2.5 w-5 h-5 rounded-full bg-yellow-700 dark:bg-yellow-600 border-2 border-white dark:border-gray-900 z-10"></div>
<div class="md:flex-1 md:pr-8 md:text-right">
<p class="text-sm text-yellow-700 dark:text-yellow-600 font-semibold mb-1">Level 3</p>
<h2 class="text-2xl font-bold mb-3 text-yellow-900 dark:text-yellow-50">Modern Frameworks: Building SPAs</h2>
<p class="text-base text-gray-700 dark:text-gray-300 leading-relaxed">
Step into the world of Single Page Applications. Learn the fundamentals of popular JavaScript frameworks like React, Vue, or Angular. Understand component-based architecture and state management.
</p>
<div class="mt-4 flex flex-wrap gap-2 justify-center md:justify-end">
<span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">React/Vue/Angular</span>
<span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">Component Architecture</span>
<span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">State Management</span>
</div>
</div>
<div class="w-px h-16 bg-yellow-700 dark:bg-yellow-600 md:hidden my-4"></div>
<div class="w-5 h-5 rounded-full bg-yellow-700 dark:bg-yellow-600 border-2 border-white dark:border-gray-900 z-10 md:hidden"></div>
<div class="w-px h-16 bg-yellow-700 dark:bg-yellow-600 md:hidden my-4"></div>
<div class="md:flex-1 md:pl-8 mt-6 md:mt-0">
<img src="https://picsum.photos/400/250?random=3" alt="Modern Frameworks" class="rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 object-cover w-full h-auto">
<div class="mt-4 text-sm text-gray-600 dark:text-gray-400 flex items-center justify-center md:justify-start">
<svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-400" 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
Approx. 60 hours
</div>
</div>
</div>
<!-- Timeline Item 4 -->
<div class="relative flex flex-col md:flex-row-reverse items-center">
<div class="hidden md:block absolute left-1/2 -translate-x-1/2 w-0.5 bg-yellow-700 dark:bg-yellow-600 h-full -top-6 bottom-auto"></div>
<div class="hidden md:block absolute left-1/2 -ml-2.5 w-5 h-5 rounded-full bg-yellow-700 dark:bg-yellow-600 border-2 border-white dark:border-gray-900 z-10"></div>
<div class="md:flex-1 md:pl-8 md:text-left">
<p class="text-sm text-yellow-700 dark:text-yellow-600 font-semibold mb-1">Level 4</p>
<h2 class="text-2xl font-bold mb-3 text-yellow-900 dark:text-yellow-50">Backend Fundamentals & Databases</h2>
<p class="text-base text-gray-700 dark:text-gray-300 leading-relaxed">
Explore server-side development. Learn to build RESTful APIs with Node.js and Express. Understand database concepts with SQL (PostgreSQL) and NoSQL (MongoDB) and connect them to your frontend.
</p>
<div class="mt-4 flex flex-wrap gap-2 justify-center md:justify-start">
<span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">Node.js</span>
<span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">Express.js</span>
<span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">SQL/NoSQL DBs</span>
</div>
</div>
<div class="w-px h-16 bg-yellow-700 dark:bg-yellow-600 md:hidden my-4"></div>
<div class="w-5 h-5 rounded-full bg-yellow-700 dark:bg-yellow-600 border-2 border-white dark:border-gray-900 z-10 md:hidden"></div>
<div class="w-px h-16 bg-yellow-700 dark:bg-yellow-600 md:hidden my-4"></div>
<div class="md:flex-1 md:pr-8 mt-6 md:mt-0">
<img src="https://picsum.photos/400/250?random=4" alt="Backend & Databases" class="rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 object-cover w-full h-auto">
<div class="mt-4 text-sm text-gray-600 dark:text-gray-400 flex items-center justify-center md:justify-end">
<svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-400" 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
Approx. 70 hours
</div>
</div>
</div>
<!-- Timeline Item 5 -->
<div class="relative flex flex-col md:flex-row items-center">
<div class="hidden md:block absolute left-1/2 -translate-x-1/2 w-0.5 bg-yellow-700 dark:bg-yellow-600 h-full -top-6 bottom-auto"></div>
<div class="hidden md:block absolute left-1/2 -ml-2.5 w-5 h-5 rounded-full bg-yellow-700 dark:bg-yellow-600 border-2 border-white dark:border-gray-900 z-10"></div>
<div class="md:flex-1 md:pr-8 md:text-right">
<p class="text-sm text-yellow-700 dark:text-yellow-600 font-semibold mb-1">Level 5</p>
<h2 class="text-2xl font-bold mb-3 text-yellow-900 dark:text-yellow-50">Deployment & DevOps Basics</h2>
<p class="text-base text-gray-700 dark:text-gray-300 leading-relaxed">
Take your applications live. Understand deployment strategies, CI/CD pipelines, and cloud platforms like Netlify/Vercel for frontend and Heroku/AWS for backend. Learn basic version control with Git.
</p>
<div class="mt-4 flex flex-wrap gap-2 justify-center md:justify-end">
<span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">Git & GitHub</span>
<span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">CI/CD</span>
<span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">Cloud Deployment</span>
</div>
</div>
<div class="w-px h-16 bg-yellow-700 dark:bg-yellow-600 md:hidden my-4"></div>
<div class="w-5 h-5 rounded-full bg-yellow-700 dark:bg-yellow-600 border-2 border-white dark:border-gray-900 z-10 md:hidden"></div>
<div class="w-px h-16 bg-yellow-700 dark:bg-yellow-600 md:hidden my-4"></div>
<div class="md:flex-1 md:pl-8 mt-6 md:mt-0">
<img src="https://picsum.photos/400/250?random=5" alt="Deployment & DevOps" class="rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 object-cover w-full h-auto">
<div class="mt-4 text-sm text-gray-600 dark:text-gray-400 flex items-center justify-center md:justify-start">
<svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-400" 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
Approx. 35 hours
</div>
</div>
</div>
<!-- Example of the final step, could be a certificate or portfolio link -->
<div class="relative flex flex-col items-center justify-center mt-12">
<div class="absolute left-1/2 -ml-2.5 w-5 h-5 rounded-full bg-green-700 dark:bg-green-600 border-2 border-white dark:border-gray-900 z-10"></div>
<h2 class="text-3xl font-bold text-center text-green-700 dark:text-green-500 mt-8 mb-6">
Your Journey Completed!
</h2>
<p class="text-lg text-gray-700 dark:text-gray-300 text-center max-w-2xl mx-auto">
Congratulations on completing your full-stack web development journey! You are now equipped with the skills to build and deploy modern web applications. Continue exploring and building!
</p>
<button class="mt-8 px-6 py-3 bg-green-700 hover:bg-green-800 dark:bg-green-600 dark:hover:bg-green-700 text-white font-semibold rounded-lg shadow-md transition-colors duration-300">
Explore More Courses
</button>
</div>
</div>
</div>
</div>Related Components
Timeline Component
A responsive timeline component for dashboards, with microinteractions and a pastel color scheme, featuring dark theme support. It uses Tailwind CSS for styling and includes placeholder images from picsum.photos and avatars from randomuser.me.
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.
Skeuomorphic Timeline Component
A Skeuomorphic Timeline Component with responsive effects and dark theme support, built using Tailwind CSS. No JavaScript needed, only HTML and CSS.