JSFiddle - React, Tailwind, and code Playground

by yoowordpress

HTML

<nav>
  <a href="#a">A</a>
  <a href="#b">B</a>
  <a href="#c">C</a>
  <a href="#d">D</a>
  <a href="#e">E</a>
  <a href="#f">F</a>
  <a href="#g">G</a>
  <a href="#h">H</a>
  <a href="#i">I</a>
</nav>

<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>
<div id="d">D</div>
<div id="e">E</div>
<div id="f">F</div>
<div id="g">G</div>
<div id="h">H</div>
<div id="i">I</div>

CSS

nav {
  position: fixed;
  top: 0; right: 0;
  width: 5em;
  padding: .5em;
  background: white;
}
nav a {
  border: solid 1px gray;
  border-radius: 20%;
  padding: .2em;
  font-weight: bold;
  text-decoration: none;
  line-height: 2em;
}
nav a:active {
  background: orange;
}

div {
  height: 50vh;
  margin: 2vh;
  background: gray;
  font-size: 30vh;
}

div:target {
  background: orange;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: inset 0 0 0 0 tomato;
  }
  70% {
    box-shadow: inset 0 0 0 10px tomato;
  }
  100% {
    box-shadow: inset 0 0 0 0 red;
  }
}