JSFiddle - React, Tailwind, and code Playground

by Martin Malý

HTML

<!-- Bootstrap 5.2 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

    <div class="container py-5">
        <h1 class="text-center mb-5">Časová osa: Miloš Zeman</h1>

        <div class="timeline-container" id="timeline">
            <!-- Události budou vloženy JavaScriptem -->
        </div>
    </div>

    <!-- Bootstrap Bundle JS (obsahuje Popper.js) -->

CSS

body {
            background-color: #f0f2f5; /* Světlejší pozadí */
            color: #333;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
        }

        h1 {
            color: #2c3e50;
            margin-bottom: 40px;
            font-size: 2.5em;
            font-weight: 600;
        }

        .timeline-container {
            width: 90%;
            max-width: 800px; /* Zúžení pro jednodušší vzhled */
            margin: 0 auto;
            position: relative;
            padding: 20px 0;
        }

        /* Hlavní vertikální čára časové osy */
        .timeline-container::before {
            content: '';
            position: absolute;
            left: 20px; /* Osa je na levé straně */
            top: 0;
            bottom: 0;
            width: 4px;
            background-color: #a8a8a8;
            border-radius: 2px;
        }

        /* Jednotlivá událost na časové ose */
        .timeline-item {
            position: relative;
            margin-bottom: 30px; /* Mezera mezi událostmi */
            padding-left: 100px; /* Prostor pro datumovou bublinu a odsazení obsahu */
            min-height: 38px; /* Minimální výška pro bublinu, aby se správně zarovnala */
        }

        /* Datumová bublina (badge pill) na ose */
        .timeline-date-bubble {
            position: absolute;
            left: 20px; /* Zarovnání s hlavní osou */
            top: 50%; /* Vertikální zarovnání na střed události */
            transform: translate(-50%, -50%); /* Přesné vycentrování na ose */
            background-color: #6c757d; /* Barva Bootstrap secondary */
            color: white;
            padding: 5px 12px;
            border-radius: 50rem; /* Pill tvar */
            font-size: 0.9em;
            font-weight: bold;
            white-space: nowrap; /* Zabránění zalamování data */
            z-index: 2; /* Nad osou */
           ...

JavaScript

const timelineData = [
          {
            "event": "Narození Miloše Zemana",
            "date": "28. září 1944",
            "category": "personal"
          },
          {
            "event": "Vstup do Komunistické strany Československa",
            "date": "1968",
            "category": "political"
          },
          {
            "event": "Vyloučení z Komunistické strany Československa kvůli nesouhlasu s invazí vojsk Varšavské smlouvy",
            "date": "1970",
            "category": "political"
          },
          {
            "event": "Vstup do České strany sociálně demokratické (ČSSD)",
            "date": "1992",
            "category": "political"
          },
          {
            "event": "Zvolení předsedou České strany sociálně demokratické (ČSSD)",
            "date": "28. února 1993",
            "category": "political"
          },
          {
            "event": "Zvolení předsedou Poslanecké sněmovny Parlamentu České republiky",
            "date": "27. června 1996",
            "category": "political"
          },
          {
            "event": "Jmenování předsedou vlády České republiky",
            "date": "17. července 1998",
            "category": "political"
          },
          {
            "event": "Vstup České republiky do NATO (za jeho premiérského působení)",
            "date": "1999",
            "category": "political"
          },
          {
            "event": "Nahrazení na pozici předsedy ČSSD Vladimírem Špidlou",
            "date": "duben 2001",
            "category": "political"
          },
          {
            "event": "Konec působení ve funkci předsedy vlády",
            "date": "15. července 2002",
            "category": "political"
          },
          {
            "event": "Kandidatura v prezidentských volbách (a prohra)",
            "date": "2003",
            "category": "political"
          },
          {
           ...