Bootdey

tickets timeline

Ready-to-use tickets 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>Tickets Timeline - Modern Tailwind Version</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-200 mt-5 antialiased">

    <div class="container mx-auto px-4 lg:max-w-4xl">
        <div class="relative">
            <div class="absolute left-1/2 transform -translate-x-1/2 top-5 bottom-5 w-1.5 bg-white hidden md:block"></div>

            <div class="space-y-12 md:space-y-0">

                <article class="relative flex flex-col md:flex-row md:justify-end items-center md:items-start group">
                    <div class="md:absolute md:right-[calc(50%+60px)] md:text-right p-2.5 w-full md:w-auto mb-2 md:mb-0">
                        <span class="block text-lg font-bold text-gray-700">12:45 AM</span>
                        <span class="block text-xs uppercase tracking-wider text-gray-500">Today</span>
                    </div>

                    <div class="z-10 flex items-center justify-center w-14 h-14 bg-violet-600 text-white rounded-full border-[6px] border-white shadow-sm md:absolute md:left-1/2 md:-translate-x-1/2">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                        </svg>
                    </div>

                    <div class="relative w-full md:w-[45%] bg-white p-6 rounded shadow-sm md:ml-20">
                        <div class="absolute top-5 -left-2 w-4 h-4 bg-white rotate-45 hidden md:block"></div>
                        <h4 class="text-lg font-bold text-gray-800 mb-2">New Project</h4>
                        <p class="text-gray-500 leading-relaxed">Tolerably earnestly middleton extremely distrusts she boy now not. Add and offered prepare how cordial.</p>
                    </div>
                </article>

                <article class="relative flex flex-col md:flex-row md:justify-start items-center md:items-start group md:mt-16">
                    <div class="md:absolute md:left-[calc(50%+60px)] md:text-left p-2.5 w-full md:w-auto mb-2 md:mb-0 order-first md:order-none">
                        <span class="block text-lg font-bold text-gray-700">9:15 AM</span>
                        <span class="block text-xs uppercase tracking-wider text-gray-500">Today</span>
                    </div>

                    <div class="z-10 flex items-center justify-center w-14 h-14 bg-emerald-600 text-white rounded-full border-[6px] border-white shadow-sm md:absolute md:left-1/2 md:-translate-x-1/2">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                        </svg>
                    </div>

                    <div class="relative w-full md:w-[45%] bg-emerald-600 p-6 rounded shadow-sm md:mr-20">
                        <div class="absolute top-5 -right-2 w-4 h-4 bg-emerald-600 rotate-45 hidden md:block"></div>
                        <h4 class="text-lg font-bold text-white mb-2 uppercase">Job Meeting</h4>
                        <p class="text-emerald-50 leading-relaxed">Caulie dandelion maize lentil collard greens radish arugula sweet pepper water spinach kombu courgette.</p>
                    </div>
                </article>

                <article class="relative flex flex-col md:flex-row md:justify-end items-center md:items-start group md:mt-16">
                    <div class="md:absolute md:right-[calc(50%+60px)] md:text-right p-2.5 w-full md:w-auto mb-2 md:mb-0">
                        <span class="block text-lg font-bold text-gray-700">8:20 PM</span>
                        <span class="block text-xs uppercase tracking-wider text-gray-500">04/03/2013</span>
                    </div>

                    <div class="z-10 flex items-center justify-center w-14 h-14 bg-orange-500 text-white rounded-full border-[6px] border-white shadow-sm md:absolute md:left-1/2 md:-translate-x-1/2">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
                        </svg>
                    </div>

                    <div class="relative w-full md:w-[45%] bg-orange-500 p-6 rounded shadow-sm md:ml-20">
                        <div class="absolute top-5 -left-2 w-4 h-4 bg-orange-500 rotate-45 hidden md:block"></div>
                        <h4 class="text-lg font-bold text-white mb-2 uppercase">Daily Feeds</h4>
                        <div class="flex items-start">
                            <img src="https://www.bootdey.com/image/45x45/" alt="feed" class="w-12 h-12 rounded mr-4 bg-white/20">
                            <p class="text-orange-50 leading-relaxed">Parsley amaranth tigernut silver beet maize fennel spinach ricebean black-eyed. Tolerably earnestly middleton extremely distrusts she boy now not.</p>
                        </div>
                    </div>

                    <div class="z-10 flex items-center justify-center w-10 h-10 bg-white text-gray-400 rounded-full border-4 border-white shadow-sm md:absolute md:left-1/2 md:-translate-x-1/2 md:mt-64 -rotate-90 hidden md:flex">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
                        </svg>
                    </div>
                </article>

            </div>
        </div>
    </div>

</body>
</html>