Bootdey

bs4 timeline

Ready-to-use bs4 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>Modern Timeline</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 min-h-screen py-8">
    <div class="container mx-auto px-4 max-w-5xl">
        <ul class="relative">
            <!-- Vertical line -->
            <div class="absolute left-[20%] top-2 bottom-2 w-1 bg-gray-800 -ml-0.5"></div>
            
            <!-- Timeline Item 1 -->
            <li class="relative min-h-[50px] py-5">
                <!-- Time -->
                <div class="absolute left-0 w-[18%] text-right top-8">
                    <span class="block text-xs font-semibold leading-4 text-gray-600">today</span>
                    <span class="block text-xl font-semibold leading-6 text-gray-900">04:20</span>
                </div>
                
                <!-- Icon -->
                <div class="absolute left-[15%] w-[10%] text-center top-10">
                    <span class="inline-block w-5 h-5 rounded-full bg-gray-300 border-4 border-gray-800"></span>
                </div>
                
                <!-- Content -->
                <div class="ml-[23%] mr-[17%] bg-white rounded-lg shadow-sm relative p-6">
                    <!-- Arrow -->
                    <div class="absolute left-0 top-5 -ml-2 w-0 h-0 border-t-8 border-b-8 border-r-8 border-transparent border-r-white"></div>
                    
                    <!-- Header -->
                    <div class="pb-3 border-b border-gray-200 leading-8">
                        <img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="John Smith" class="float-left w-9 h-9 rounded-full overflow-hidden mr-3 -mt-0.5">
                        <span class="text-base font-semibold text-gray-900">John Smith</span>
                        <span class="float-right text-gray-500 text-sm">18 Views</span>
                    </div>
                    
                    <!-- Content Text -->
                    <div class="mt-4 text-sm leading-relaxed text-gray-700">
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc faucibus turpis quis tincidunt luctus.
                            Nam sagittis dui in nunc consequat, in imperdiet nunc sagittis.
                        </p>
                    </div>
                    
                    <!-- Stats -->
                    <div class="mt-4 text-xs font-semibold text-gray-600 flex justify-between items-center">
                        <div class="flex items-center gap-2">
                            <span class="relative inline-flex items-center justify-center">
                                <svg class="w-5 h-5 text-red-500" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"/>
                                </svg>
                            </span>
                            <span class="relative inline-flex items-center justify-center -ml-1">
                                <svg class="w-5 h-5 text-blue-500" fill="currentColor" viewBox="0 0 20 20">
                                    <path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z"/>
                                </svg>
                            </span>
                            <span class="ml-1">4.3k</span>
                        </div>
                        <div class="flex gap-4">
                            <span>259 Shares</span>
                            <span>21 Comments</span>
                        </div>
                    </div>
                    
                    <!-- Footer Actions -->
                    <div class="mt-4 pt-4 border-t border-gray-100 flex gap-6 text-gray-600">
                        <a href="#" class="flex items-center gap-2 text-sm font-medium hover:text-gray-900 transition">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5"/>
                            </svg>
                            Like
                        </a>
                        <a href="#" class="flex items-center gap-2 text-sm font-medium hover:text-gray-900 transition">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
                            </svg>
                            Comment
                        </a>
                        <a href="#" class="flex items-center gap-2 text-sm font-medium hover:text-gray-900 transition">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"/>
                            </svg>
                            Share
                        </a>
                    </div>
                    
                    <!-- Comment Box -->
                    <div class="bg-gray-50 -mx-6 -mb-6 mt-4 p-6 rounded-b-lg">
                        <div class="flex gap-3">
                            <img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="User" class="w-9 h-9 rounded-full flex-shrink-0">
                            <div class="flex-1">
                                <form class="flex gap-2">
                                    <input type="text" class="flex-1 px-4 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Write a comment...">
                                    <button type="button" class="px-6 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition">Comment</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            
            <!-- Timeline Item 2 -->
            <li class="relative min-h-[50px] py-5">
                <!-- Time -->
                <div class="absolute left-0 w-[18%] text-right top-8">
                    <span class="block text-xs font-semibold leading-4 text-gray-600">24 February 2014</span>
                    <span class="block text-xl font-semibold leading-6 text-gray-900">08:17</span>
                </div>
                
                <!-- Icon -->
                <div class="absolute left-[15%] w-[10%] text-center top-10">
                    <span class="inline-block w-5 h-5 rounded-full bg-gray-300 border-4 border-gray-800"></span>
                </div>
                
                <!-- Content -->
                <div class="ml-[23%] mr-[17%] bg-white rounded-lg shadow-sm relative p-6">
                    <!-- Arrow -->
                    <div class="absolute left-0 top-5 -ml-2 w-0 h-0 border-t-8 border-b-8 border-r-8 border-transparent border-r-white"></div>
                    
                    <!-- Header -->
                    <div class="pb-3 border-b border-gray-200 leading-8">
                        <img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="Richard Leong" class="float-left w-9 h-9 rounded-full overflow-hidden mr-3 -mt-0.5">
                        <span class="text-base font-semibold text-gray-900">Richard Leong</span>
                        <span class="float-right text-gray-500 text-sm">1,282 Views</span>
                    </div>
                    
                    <!-- Content Text -->
                    <div class="mt-4 text-lg leading-relaxed text-gray-700 italic">
                        <svg class="w-6 h-6 text-gray-400 float-left mr-2 mt-1" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"/>
                        </svg>
                        <p>
                            Quisque sed varius nisl. Nulla facilisi. Phasellus consequat sapien sit amet nibh molestie placerat. Donec nulla quam, ullamcorper ut velit vitae, lobortis condimentum magna. Suspendisse mollis in sem vel mollis.
                        </p>
                        <svg class="w-6 h-6 text-gray-400 float-right ml-2 mt-1" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M9.983 3v7.391c0 5.704-3.731 9.57-8.983 10.609l-.995-2.151c2.432-.917 3.995-3.638 3.995-5.849h-4v-10h9.983zm14.017 0v7.391c0 5.704-3.748 9.57-9 10.609l-.996-2.151c2.433-.917 3.996-3.638 3.996-5.849h-3.983v-10h9.983z"/>
                        </svg>
                    </div>
                    
                    <!-- Footer Actions -->
                    <div class="mt-6 pt-4 border-t border-gray-100 flex gap-6 text-gray-600">
                        <a href="#" class="flex items-center gap-2 text-sm font-medium hover:text-gray-900 transition">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5"/>
                            </svg>
                            Like
                        </a>
                        <a href="#" class="flex items-center gap-2 text-sm font-medium hover:text-gray-900 transition">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
                            </svg>
                            Comment
                        </a>
                        <a href="#" class="flex items-center gap-2 text-sm font-medium hover:text-gray-900 transition">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"/>
                            </svg>
                            Share
                        </a>
                    </div>
                </div>
            </li>
            
            <!-- Timeline Item 3 -->
            <li class="relative min-h-[50px] py-5">
                <!-- Time -->
                <div class="absolute left-0 w-[18%] text-right top-8">
                    <span class="block text-xs font-semibold leading-4 text-gray-600">10 January 2014</span>
                    <span class="block text-xl font-semibold leading-6 text-gray-900">20:43</span>
                </div>
                
                <!-- Icon -->
                <div class="absolute left-[15%] w-[10%] text-center top-10">
                    <span class="inline-block w-5 h-5 rounded-full bg-gray-300 border-4 border-gray-800"></span>
                </div>
                
                <!-- Content -->
                <div class="ml-[23%] mr-[17%] bg-white rounded-lg shadow-sm relative p-6">
                    <!-- Arrow -->
                    <div class="absolute left-0 top-5 -ml-2 w-0 h-0 border-t-8 border-b-8 border-r-8 border-transparent border-r-white"></div>
                    
                    <!-- Header -->
                    <div class="pb-3 border-b border-gray-200 leading-8">
                        <img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="Lelouch Wong" class="float-left w-9 h-9 rounded-full overflow-hidden mr-3 -mt-0.5">
                        <span class="text-base font-semibold text-gray-900">Lelouch Wong</span>
                        <span class="float-right text-gray-500 text-sm">1,021,282 Views</span>
                    </div>
                    
                    <!-- Content Text -->
                    <div class="mt-4 text-sm leading-relaxed text-gray-700">
                        <h4 class="text-base font-semibold mb-3 flex items-center gap-2">
                            <svg class="w-5 h-5 text-red-500" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
                            </svg>
                            795 Folsom Ave, Suite 600 San Francisco, CA 94107
                        </h4>
                        <p>In hac habitasse platea dictumst. Pellentesque bibendum id sem nec faucibus. Maecenas molestie, augue vel accumsan rutrum, massa mi rutrum odio, id luctus mauris nibh ut leo.</p>
                        <p class="mt-5">
                            <img src="https://bootdey.com/img/Content/avatar/avatar7.png" alt="Location" class="max-w-full rounded-lg">
                        </p>
                    </div>
                    
                    <!-- Footer Actions -->
                    <div class="mt-4 pt-4 border-t border-gray-100 flex gap-6 text-gray-600">
                        <a href="#" class="flex items-center gap-2 text-sm font-medium hover:text-gray-900 transition">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5"/>
                            </svg>
                            Like
                        </a>
                        <a href="#" class="flex items-center gap-2 text-sm font-medium hover:text-gray-900 transition">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
                            </svg>
                            Comment
                        </a>
                        <a href="#" class="flex items-center gap-2 text-sm font-medium hover:text-gray-900 transition">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"/>
                            </svg>
                            Share
                        </a>
                    </div>
                </div>
            </li>
            
            <!-- Loading Item -->
            <li class="relative py-5">
                <!-- Icon -->
                <div class="absolute left-[15%] w-[10%] text-center top-5">
                    <span class="inline-block w-5 h-5 rounded-full bg-gray-300 border-4 border-gray-800"></span>
                </div>
                
                <!-- Content -->
                <div class="ml-[23%] mr-[17%] bg-white rounded-lg shadow-sm relative p-6">
                    <div class="flex items-center justify-center gap-2 text-gray-500">
                        <svg class="animate-spin w-5 h-5" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                        </svg>
                        Loading...
                    </div>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>