JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
  
    <div id="list1">1</div>
    <div id="list2">2</div>
    <div id="list3">3</div>
    <div id="list4">4</div>
    
    
  
  <ul class="ul1">
    <li><a href="#list1">11</a></li>
    <li><a href="#list2">22</a></li>
    <li><a href="#list3">33</a></li>
    <li><a href="#list4">44</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%;
}

div:target{
  color: red;
  background: red;
}
div[id="list1"]:target ~ .ul1 a[href^="#list1"],
div[id="list2"]:target ~ .ul1 a[href^="#list2"],
div[id="list3"]:target ~ .ul1 a[href^="#list3"],
div[id="list4"]:target ~ .ul1 a[href^="#list4"] {
  background: #5CB433;
  color: #fff;
}