JSFiddle - React, Tailwind, and code Playground

by NOVUSIDEA

HTML

<div id="app" class="container mx-auto px-4">

    <div v-for="i in 5" class="flex [--distance-x:calc(var(--spacing)*8)] [--distance-y:calc(var(--spacing)*8)]">

        <div class="border-r border-dotted border-black w-0"></div>

        <details class="w-full px-(--distance-x) py-(--distance-y) space-y-2 group open:bg-black/10">

            <summary class="list-none select-none cursor-pointer space-y-3">
                <div class="flex items-center relative">
                    <div class="absolute inline-block w-2 h-6 bg-black -translate-x-(--distance-x) [clip-path:polygon(0_0,0%_100%,100%_50%)]"></div>
                    <div class="grow font-bold text-xl flex items-center gap-2 sm:gap-4">
                        <span>08/2025</span>
                        <span class="grow border-t border-dotted"></span>
                        <span>heute</span>
                    </div>
                </div>

                <div class="flex max-md:flex-col md:items-center"> 
                    <h3 class="font-bold text-3xl grow">Mustermann GmbH & Co. KG</h3>
                    <div class="whitespace-nowrap rounded-md bg-black/10 leading-none py-1.5 px-2 text-xs">                        
                        <span class="group-open:hidden">+ Details anzeigen</span>
                        <span class="hidden group-open:inline-block">&times; Details ausblenden</span>
                    </div>
                </div>
            </summary>

            <div class="space-y-4">
                <div class="space-y-2">
                    <div class="text-xs font-medium flex max-md:flex-col md:items-center gap-2 md:gap-4">
                        <span class="flex items-center gap-1.5 whitespace-nowrap">Ilmenau</span>
                        <span class="flex items-center gap-1.5 whitespace-nowrap">Remote</span>
                        <span class="flex items-center gap-1.5 whitespace-nowrap">6 Monate</span>
                   ...