JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#tag1">Tag1</a>
<a href="#tag2">Tag2</a>
<a href="#tag3">Tag3</a>

<div id="wrap">
  <div id="container">
    <div id="tag1"></div>
    <div id="tag2"></div>
    <div id="tag3"></div>
  </div>
</div>

CSS

#container>div,#wrap{
  width: 100px;
  height: 100px;
  /* border-radius: 50%; */
}
#wrap{
  overflow: hidden;
}
#container{
  /* overflow:hidden; */
  margin-top: 10px;
  outline: 1px solid red;
  height: 300%;
}
#container>div{
  transition: all ease-out 0.2s;
}
#tag1{
  background: #f66;
}
#tag2{
  background: orange;
}
#tag3{
  background: gray;
}
#tag1:not(:target){
  /* margin-top: -100%; */
}
#tag2:target{
  margin-top: -100%;
}
#tag3:target{
  margin-top: -200%;
}