JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Chronologie avec D3.js</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <style>
        .timeline {
            width: 100%;
            height: 100px;
            position: relative;
        }

        .bar {
            stroke: red; /* Couleur des barres */
            stroke-width: 3; /* Épaisseur des barres */
        }
    </style>
</head>
<body>
    <div class="chronologie">
        <p>
            <strong><span style="font-size: 83%;"><code>1833</code></span></strong>
            <span style="font-size: 83%;"><span class="y1861" style="background-color: #F5F5F5;"><code>1861</code></span></span>
            <span style="font-size: 83%;"><span class="y1866" style="background-color: #F5F5F5;"><code>1866</code></span></span>
            <span style="font-size: 83%;"><span class="y1868" style="background-color: #F5F5F5;"><code>1868</code></span></span>
            <span style="font-size: 83%;"><span class="y1872" style="background-color: #F5F5F5;"><code>1872</code></span></span>
            <span style="font-size: 83%;"><span class="y1916" style="background-color: #F5F5F5;"><code>1916</code></span></span>
            <span style="font-size: 83%;"><span class="y1917" style="background-color: #F5F5F5;"><code>1917</code></span></span>
            <span style="font-size: 83%;"><span class="y1917" style="background-color: #F5F5F5;"><code>1917</code></span></span>
            <span style="font-size: 83%;"><span class="y1917" style="background-color: #F5F5F5;"><code>1917</code></span></span>
            <span style="font-size: 83%;"><span class="y1917" style="background-color: #F5F5F5;"><code>1917</code></span></span>
            <span style="font-size: 83%;"><span class="y1917" style="background-color: #F5F5F5;"><code>1917</code></span></span>
            <span style="font-size: 83%;"><span class="y1917" style="background-color:...