Componente de línea de tiempo

<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>