JSFiddle - React, Tailwind, and code Playground

by Kirubel Girma

HTML

<div class="cont">
  <div class="bar" href="#">Snips</div>
  <div class="bar" href="#">Projects</div>
  <div class="bar" href="#">Downloads</div>
  <div class="bar" href="#">Tools</div>
  <div class="bar" href="#">Gists</div>
</div>

CSS

* {
  font-family: arial;
}
body{background-color:#9b59b6;}
.cont {
  width: 12em;
}
.subtxt{font-size:.8em;}
.bar {
  text-decoration: none;
  color: black;
  padding: .4em;
  cursor: pointer;
  -webkit-transition: padding .145s;
  color:white;
}

@keyframes xmpl {
  from {
    padding-left: .3em;
  }
  to {
    padding-left: .9em;
  }
}

.bar:hover {
  animation: xmpl .145s;
  padding-left: .9em;
  border-left: 0.3em solid white;
}