Bootdey

bs4 my experience timeline

Ready-to-use bs4 my experience timeline using Tailwind utility classes. No dependencies, no setup—just grab the code and ship.

Preview HTML

HTML code

This is the html code used to create this tailwind snippet

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Experience Timeline - Tailwind CSS</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 pt-5">
    <div class="container mx-auto px-4 max-w-6xl">
        <!-- Timeline Container -->
        <div class="relative">
            <!-- Central Vertical Line -->
            <div class="absolute left-1/2 transform -translate-x-1/2 w-0.5 h-full bg-gray-400 hidden md:block"></div>
            <div class="absolute left-2 w-0.5 h-full bg-gray-400 md:hidden"></div>

            <!-- Timeline Item 1 (Left) -->
            <div class="relative mb-10 group">
                <!-- Center Icon -->
                <div class="absolute left-1/2 transform -translate-x-1/2 w-[18px] h-[18px] z-10 hidden md:block">
                    <div class="absolute w-full h-full rounded-full bg-white border-2 border-gray-900 -left-[3px] group-hover:left-[3px] transition-all duration-300"></div>
                    <div class="absolute w-full h-full rounded-full border-2 border-gray-400 left-[3px] group-hover:-left-[3px] transition-all duration-300"></div>
                </div>

                <!-- Left Side Icon (Mobile) -->
                <div class="absolute left-2 transform -translate-x-1/2 w-[18px] h-[18px] z-10 md:hidden">
                    <div class="absolute w-full h-full rounded-full bg-white border-2 border-gray-900"></div>
                </div>

                <div class="md:flex md:items-center">
                    <!-- Date Section (Left on Desktop) -->
                    <div class="md:w-1/2 md:pr-10 md:text-right relative md:mt-5.5">
                        <!-- Horizontal Line Connecting Date to Center -->
                        <div class="absolute right-2.5 top-1/2 transform -translate-y-1/2 w-[36.5%] h-0.5 bg-gray-400 hidden md:block"></div>
                        
                        <!-- Date Circle -->
                        <div class="relative inline-block w-[125px] h-[125px] ml-10 md:ml-0">
                            <div class="absolute w-full h-full rounded-full bg-white border-2 border-gray-900 -left-1.5 group-hover:left-1.5 transition-all duration-300"></div>
                            <div class="absolute w-full h-full rounded-full border-2 border-gray-400 left-1.5 group-hover:-left-1.5 transition-all duration-300"></div>
                            
                            <div class="absolute top-[27%] left-0 w-full text-center">
                                <span class="block text-lg font-bold text-gray-900">2 Years</span>
                                <span class="block text-3xl font-bold text-gray-900 leading-9">2013</span>
                            </div>
                        </div>
                    </div>

                    <!-- Content Section (Right on Desktop) -->
                    <div class="md:w-1/2 md:pl-12 pl-10 pr-0 py-5 md:py-5">
                        <h5 class="text-lg font-bold leading-6 mb-4">Visual Art & Design</h5>
                        <p class="text-gray-700 mb-0">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur ex sit amet massa scelerisque scelerisque. Aliquam erat volutpat. Aenean interdum finibus efficitur. Praesent dapibus dolor felis, eu ultrices elit molestie.
                        </p>
                    </div>
                </div>
            </div>

            <!-- Timeline Item 2 (Right) -->
            <div class="relative mb-10 group">
                <!-- Center Icon -->
                <div class="absolute left-1/2 transform -translate-x-1/2 w-[18px] h-[18px] z-10 hidden md:block">
                    <div class="absolute w-full h-full rounded-full bg-white border-2 border-gray-900 -left-[3px] group-hover:left-[3px] transition-all duration-300"></div>
                    <div class="absolute w-full h-full rounded-full border-2 border-gray-400 left-[3px] group-hover:-left-[3px] transition-all duration-300"></div>
                </div>

                <!-- Left Side Icon (Mobile) -->
                <div class="absolute left-2 transform -translate-x-1/2 w-[18px] h-[18px] z-10 md:hidden">
                    <div class="absolute w-full h-full rounded-full bg-white border-2 border-gray-900"></div>
                </div>

                <div class="md:flex md:items-center md:flex-row-reverse">
                    <!-- Date Section (Right on Desktop) -->
                    <div class="md:w-1/2 md:pl-10 md:text-left relative md:mt-5.5">
                        <!-- Horizontal Line Connecting Date to Center -->
                        <div class="absolute left-2.5 top-1/2 transform -translate-y-1/2 w-[36.5%] h-0.5 bg-gray-400 hidden md:block"></div>
                        
                        <!-- Date Circle -->
                        <div class="relative inline-block w-[125px] h-[125px] ml-10 md:ml-0">
                            <div class="absolute w-full h-full rounded-full bg-white border-2 border-gray-900 -left-1.5 group-hover:left-1.5 transition-all duration-300"></div>
                            <div class="absolute w-full h-full rounded-full border-2 border-gray-400 left-1.5 group-hover:-left-1.5 transition-all duration-300"></div>
                            
                            <div class="absolute top-[27%] left-0 w-full text-center">
                                <span class="block text-lg font-bold text-gray-900">1 Years</span>
                                <span class="block text-3xl font-bold text-gray-900 leading-9">2015</span>
                            </div>
                        </div>
                    </div>

                    <!-- Content Section (Left on Desktop) -->
                    <div class="md:w-1/2 md:pr-12 pl-10 pr-0 py-5 md:py-5 md:text-right">
                        <h5 class="text-lg font-bold leading-6 mb-4">Product Designer</h5>
                        <p class="text-gray-700 mb-0">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur ex sit amet massa scelerisque scelerisque. Aliquam erat volutpat. Aenean interdum finibus efficitur. Praesent dapibus dolor felis, eu ultrices elit molestie.
                        </p>
                    </div>
                </div>
            </div>

            <!-- Timeline Item 3 (Left) -->
            <div class="relative mb-10 group">
                <!-- Center Icon -->
                <div class="absolute left-1/2 transform -translate-x-1/2 w-[18px] h-[18px] z-10 hidden md:block">
                    <div class="absolute w-full h-full rounded-full bg-white border-2 border-gray-900 -left-[3px] group-hover:left-[3px] transition-all duration-300"></div>
                    <div class="absolute w-full h-full rounded-full border-2 border-gray-400 left-[3px] group-hover:-left-[3px] transition-all duration-300"></div>
                </div>

                <!-- Left Side Icon (Mobile) -->
                <div class="absolute left-2 transform -translate-x-1/2 w-[18px] h-[18px] z-10 md:hidden">
                    <div class="absolute w-full h-full rounded-full bg-white border-2 border-gray-900"></div>
                </div>

                <div class="md:flex md:items-center">
                    <!-- Date Section (Left on Desktop) -->
                    <div class="md:w-1/2 md:pr-10 md:text-right relative md:mt-5.5">
                        <!-- Horizontal Line Connecting Date to Center -->
                        <div class="absolute right-2.5 top-1/2 transform -translate-y-1/2 w-[36.5%] h-0.5 bg-gray-400 hidden md:block"></div>
                        
                        <!-- Date Circle -->
                        <div class="relative inline-block w-[125px] h-[125px] ml-10 md:ml-0">
                            <div class="absolute w-full h-full rounded-full bg-white border-2 border-gray-900 -left-1.5 group-hover:left-1.5 transition-all duration-300"></div>
                            <div class="absolute w-full h-full rounded-full border-2 border-gray-400 left-1.5 group-hover:-left-1.5 transition-all duration-300"></div>
                            
                            <div class="absolute top-[27%] left-0 w-full text-center">
                                <span class="block text-lg font-bold text-gray-900">2 Years</span>
                                <span class="block text-3xl font-bold text-gray-900 leading-9">2016</span>
                            </div>
                        </div>
                    </div>

                    <!-- Content Section (Right on Desktop) -->
                    <div class="md:w-1/2 md:pl-12 pl-10 pr-0 py-5 md:py-5">
                        <h5 class="text-lg font-bold leading-6 mb-4">Web Designer</h5>
                        <p class="text-gray-700 mb-0">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur ex sit amet massa scelerisque scelerisque. Aliquam erat volutpat. Aenean interdum finibus efficitur. Praesent dapibus dolor felis, eu ultrices elit molestie.
                        </p>
                    </div>
                </div>
            </div>

            <!-- Timeline Item 4 (Right) -->
            <div class="relative mb-10 group">
                <!-- Center Icon -->
                <div class="absolute left-1/2 transform -translate-x-1/2 w-[18px] h-[18px] z-10 hidden md:block">
                    <div class="absolute w-full h-full rounded-full bg-white border-2 border-gray-900 -left-[3px] group-hover:left-[3px] transition-all duration-300"></div>
                    <div class="absolute w-full h-full rounded-full border-2 border-gray-400 left-[3px] group-hover:-left-[3px] transition-all duration-300"></div>
                </div>

                <!-- Left Side Icon (Mobile) -->
                <div class="absolute left-2 transform -translate-x-1/2 w-[18px] h-[18px] z-10 md:hidden">
                    <div class="absolute w-full h-full rounded-full bg-white border-2 border-gray-900"></div>
                </div>

                <div class="md:flex md:items-center md:flex-row-reverse">
                    <!-- Date Section (Right on Desktop) -->
                    <div class="md:w-1/2 md:pl-10 md:text-left relative md:mt-5.5">
                        <!-- Horizontal Line Connecting Date to Center -->
                        <div class="absolute left-2.5 top-1/2 transform -translate-y-1/2 w-[36.5%] h-0.5 bg-gray-400 hidden md:block"></div>
                        
                        <!-- Date Circle -->
                        <div class="relative inline-block w-[125px] h-[125px] ml-10 md:ml-0">
                            <div class="absolute w-full h-full rounded-full bg-white border-2 border-gray-900 -left-1.5 group-hover:left-1.5 transition-all duration-300"></div>
                            <div class="absolute w-full h-full rounded-full border-2 border-gray-400 left-1.5 group-hover:-left-1.5 transition-all duration-300"></div>
                            
                            <div class="absolute top-[27%] left-0 w-full text-center">
                                <span class="block text-lg font-bold text-gray-900">2 Years</span>
                                <span class="block text-3xl font-bold text-gray-900 leading-9">2018</span>
                            </div>
                        </div>
                    </div>

                    <!-- Content Section (Left on Desktop) -->
                    <div class="md:w-1/2 md:pr-12 pl-10 pr-0 py-5 md:py-5 md:text-right">
                        <h5 class="text-lg font-bold leading-6 mb-4">Graphic Designer</h5>
                        <p class="text-gray-700 mb-0">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur ex sit amet massa scelerisque scelerisque. Aliquam erat volutpat. Aenean interdum finibus efficitur. Praesent dapibus dolor felis, eu ultrices elit molestie.
                        </p>
                    </div>
                </div>
            </div>

        </div>
    </div>
</body>
</html>