JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
  <div id="lol">32123123123</div>
  <ul class="ul2">
    <li id="list1">1</li>
    <li id="list2">2</li>
    <li id="list3">3</li>
    <li id="list4">4</li>
    </ul>
    
  
  <ul class="ul1">
    <li><a href="#lol">1</a></li>
    <li><a href="#list2">2</a></li>
    <li><a href="#list3">3</a></li>
    <li><a href="#list4">4</a></li>
  </ul>   
  </div>

CSS

*{
  margin: 0;
  padding: 0;
  box-sizing:border-box;
}

.ul1{
  overflow: hidden;
}


.ul1 a{
  display:flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  border:1px solid #5CB433;
  border-radius:50%;
  text-decoration:none;
  color: #5CB433;
  margin-top: 50px;
  position:relative;
  
}

.ul1 a:hover{
  background: #5CB433;
  color: #fff;
}

.ul1 li{
  width: 35px;
  height: 35px;
}

.ul1 li:not(:first-of-type) a:before{
  content:'';
  width: 2px;
  height: 50px;
  background: #5CB433;
  position:absolute;
  bottom:100%;
  left:50%;
}

.ul2 #list1:target{
  color: red;
  background: red;
}

#lol:target ~ .ul1  a[href="#lol"] {
  background: red;
}