JSFiddle - React, Tailwind, and code Playground

HTML

<div class="month-subsection-news">
    
      <div class="line-timeline">
        <div class="black-segment"></div>
        
        <div class="dots dots1"></div>
        <div class="dots dots2"></div>

        <div class="dots dots3"></div>

        <div class="dots dots4"></div>

        <div class="dots dots5"> <a class="hover-me" href="#"> a<span >Hello, World!</span></a></div>

      </div>

CSS

.month-subsection-news {
  height: 62vh;
  //background-color: blue;
  position: relative;
}
.month-name-news {
  font-size: 36vh;
  position: absolute;
  height: 100px;
  width: 100px;

  top: 5vh;
  //margin-top: ;
  font-family: GothamMedium;
  color: #ededed;
}
.line-timeline {
  width: 100%;
  position: absolute;
  height: 0.1vh;
  top: 54%;
  z-index: 3;
  background-color: black;
 // mix-blend-mode: exclusion;
  
  
}
.arrow-left-timeline {
  position: absolute;
  //@at-root: 2vh;
  //width: 2vh;
  left: 10vh;
  top: 47%;
  //background-color:blue
}
.arrow-right-timeline {
  position: absolute;
  //height: 2vh;
  // width: 2vh;
  right: 10vh;
  top: 47%;
  //background-color:blue
}
.dots {
  position: absolute;
  height: 1vh;
  width: 1vh;
  //left: 20vh;
  top: -0.5vh;
  background-color: black;
  z-index: 999;
  
  border-radius: 100px;
}
.dots1 {
  left: 30vw;
  
}
.dots2 {
  left: 50vw;
}
.dots3 {
  left: 70vw;
}
.dots4 {
  left: 60vw;
}
.dots5 {
  left: 55vw;
}

// News cards

.news-card {
  font-size: 30px;
  width: 500px;
  margin: 50px;
}
.top-photo-name {
  border-top: 8.7px solid black;
  //width: 75%;
}
.title-news-card {
  margin: 40px 0px 20px 0px;
  font-family: RobotoBold;
  // width: 75%;
}

//End of news apge
.left-nav {
  height: 100vh;
}
.news-page-api {
  min-height: 100vh;
  // height: 100vh;
  //background-color: ;
}
.second-nav-news {
  background-color: white !important;
  border: 5px solid black;
  top: 68.6px;
}
.column-icons-news {
  width: fit-content;
  border: 5px solid black;
}
.font-roboto-medium {
  font-family: robotoMedium;
}
.number-of-news {
  font-size: 311px;
  top: 20vh;
  font-family: robotoMEdium;
}
.margin-article {
  margin-top: 10vh;
}
.news-title-in {
  font-size: 59px;
  font-family: RobotoBold;
}
.news-article-in {
  font-size: 29px;
  font-family: RobotoLight;
  width: 80%;
}
.z-index {
  z-index: 9999;
}
// .date-news{
//   width: 75%;
// }
.img-news img {
  width: 375px;
}
// .img-news{
//   width: 75%;
//...