JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<html lang="en">
    <head>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
        <link href="styles.css" rel="stylesheet">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>About me page</title>
    </head>
    <body class="about-me">
          <div class="timeline">
            <div class="container-timeline left-side">
                <div class="content-timeline">
                    <h2 class="timeline-heading">2011</h2>
                    <p class="timeline-text">Lorem ipsum.</p>
                </div>
            </div>
            <div class="container-timeline right-side">
                <div class="content-timeline">
                    <h2 class="timeline-heading">2012</h2>
                    <p class="timeline-text">Lorem ipsum.</p>
                </div>
            </div>
            <div class="container-timeline left-side">
                <div class="content-timeline">
                    <h2 class="timeline-heading">2013</h2>
                    <p class="timeline-text">Lorem ipsum.</p>
            </div>
            <div class="container-timeline right-side" style="border: 4px solid black;">
                <div class="content-timeline">
                    <h2 class="timeline-heading">2014</h2>
                    <p class="timeline-text">Lorem ipsum.</p>
                </div>
            </div>
         </div>
    </body>
</html>

CSS

/* Boilerplate CSS for box sizing and body */
* {
  box-sizing: border-box;
}

body {
  background-color: beige;
  font-family: Georgia, Times, Courier;
}

/* Special thanks to W3Schools for the
timeline tutorial: https://www.w3schools.com/howto/howto_css_timeline.asp */
/* Container around content */
.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

.timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: #327c9c;
  top: 0px;
  bottom: 0px;
  left: 50%;
}

.container-timeline {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
}

/* The circles on the timeline */
.container-timeline::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  right: -15px;
  background-color: white;
  border: 3px solid #327c9c;
  top: 19.2px;
  border-radius: 50%;
  z-index: 1;
}

.left-side {
  left: 0;
}

.right-side {
  left: 50%;
}


/* Add arrows to the left container (pointing right) */
.left-side::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid white;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent white;
}

/* Add arrows to the right container (pointing left) */
.right-side::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
}

/* Fix the circle for containers on the right side */
.right-side::after {
  left: -9px;
}

/* The actual content */
.content-timeline {
  padding: 20px 30px;
  background-color: #327c9c;
  position: relative;
  border-radius: 6px;
}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {

  /* Place the timelime to the left */
  .timeline::after {
    left: 25px;
  }

 ...