JSFiddle - React, Tailwind, and code Playground

by seevis

HTML

<div class="menu">
  <center>
    <div class="linki">Lorem</div>
    <div class="linki">IPSUM</div>
  </center>
</div>

CSS

.linki {
  border-bottom: 2px dotted #1C3345;
  width: 150px;
  height: 16px;
  text-transform: uppercase;
  margin-top: 5px;
  font-size: 12px;
  letter-spacing: 1px;
  font-family: Calibri, sans-serif;
  padding: 2px 5px 2px 5px;
  color: #ffffff;
  text-decoration: none;
  text-align: center;
  transition-duration: 0.4s;
  transition-delay: 0.2s;
}

.linki:hover {
  border-bottom: 2px dotted #ff0;
  -webkit-transition: 0.3s linear;
  -moz-transition: 0.3s linear;
  -o-transition: 0.3s linear;
  transition: 0.3s linear;

}

.menu {
  border-left: none;
  background-color: #00ffff;
  border-right: 10px solid #ff00ff;
  border-left: 10px solid #ff00ff;
  width: 180px;
  height: 100%;
  position: fixed;
  top: 0px;
  left: -130px;
  font-size: 10px;
  text-transform: uppercase;
  display: block;
}

.menu:hover {
  -webkit-transition: 0.7s linear;
  -moz-transition: 0.7s linear;
  -o-transition: 0.7s linear;
  transition: 0.7s linear;
  left: -8px;
}