Vertical Timeline Component - Copy this Html, Tailwind Component to your project
Relpase code completely with this one <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> </head> <body> <script src="https://cdn.tailwindcss.com"></script> <div class="relative w-full min-h-screen p-4 md:p-8"> <div class="w-full max-w-[100%] mx-auto container"> <div class="relative w-full px-[2%] sm:px-[4%] md:px-[6%]"> <div class="absolute left-1/2 transform -translate-x-1/2 h-full w-0.5 bg-gray-200 hidden sm:block"></div> <div class="space-y-[4%] sm:space-y-[6%] md:space-y-[8%]"> <div class="relative flex flex-col sm:flex-row items-center sm:items-center justify-between group" data-aos="fade-up"> <div class="w-full sm:w-[48%] pr-0 sm:pr-[4%] md:pr-[6%] text-center sm:text-right mb-4 sm:mb-0"> <span class="text-base sm:text-lg md:text-xl font-playfair text-gray-500">2023</span> <h3 class="text-lg sm:text-xl md:text-2xl font-playfair text-gray-900 mt-2">Digital Renaissance</h3> <p class="mt-2 text-sm sm:text-base text-gray-600 font-lato">The emergence of revolutionary digital platforms transforms modern journalism and storytelling methods.</p> </div> <div class="absolute left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[3%] h-[3%] min-w-[24px] min-h-[24px] bg-white border-2 border-gray-200 group-hover:border-indigo-500 transition-colors duration-300 rotate-45 hidden sm:block"></div> <div class="w-full sm:w-[48%] pl-0 sm:pl-[4%] md:pl-[6%]"> <img src="https://images.unsplash.com/photo-1516116216624-53e697fedbea" alt="Digital Media" class="w-full aspect-video object-cover rounded-lg shadow-lg"> </div> </div> <div class="relative flex flex-col sm:flex-row items-center sm:items-center justify-between group" data-aos="fade-up"> <div class="w-full sm:w-[48%] pr-0 sm:pr-[4%] md:pr-[6%] order-2 sm:order-1"> <img src="https://images.unsplash.com/photo-1542744094-24638eff58bb" alt="Print Innovation" class="w-full aspect-video object-cover rounded-lg shadow-lg"> </div> <div class="absolute left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[3%] h-[3%] min-w-[24px] min-h-[24px] bg-white border-2 border-gray-200 group-hover:border-indigo-500 transition-colors duration-300 rotate-45 hidden sm:block"></div> <div class="w-full sm:w-[48%] pl-0 sm:pl-[4%] md:pl-[6%] order-1 sm:order-2 text-center sm:text-left mb-4 sm:mb-0"> <span class="text-base sm:text-lg md:text-xl font-playfair text-gray-500">2022</span> <h3 class="text-lg sm:text-xl md:text-2xl font-playfair text-gray-900 mt-2">Print Evolution</h3> <p class="mt-2 text-sm sm:text-base text-gray-600 font-lato">Traditional print media adapts to modern demands while maintaining its timeless appeal.</p> </div> </div> <div class="relative flex flex-col sm:flex-row items-center sm:items-center justify-between group" data-aos="fade-up"> <div class="w-full sm:w-[48%] pr-0 sm:pr-[4%] md:pr-[6%] text-center sm:text-right mb-4 sm:mb-0"> <span class="text-base sm:text-lg md:text-xl font-playfair text-gray-500">2021</span> <h3 class="text-lg sm:text-xl md:text-2xl font-playfair text-gray-900 mt-2">Visual Storytelling</h3> <p class="mt-2 text-sm sm:text-base text-gray-600 font-lato">The art of visual narrative reaches new heights with immersive technologies and creative direction.</p> </div> <div class="absolute left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[3%] h-[3%] min-w-[24px] min-h-[24px] bg-white border-2 border-gray-200 group-hover:border-indigo-500 transition-colors duration-300 rotate-45 hidden sm:block"></div> <div class="w-full sm:w-[48%] pl-0 sm:pl-[4%] md:pl-[6%]"> <img src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0" alt="Visual Story" class="w-full aspect-video object-cover rounded-lg shadow-lg"> </div> </div> </div> </div> </div> </div> </body> </html>