JSFiddle - React, Tailwind, and code Playground

by yeonhapark

HTML

<div class="outer">
  Work
  <div class="inside"></div>
</div><br/>
<div class="outer">
  Love
  <div class="inside"></div>
</div><br/>
<div class="outer">
  Tools
  <div class="inside"></div>
</div>

CSS

* {
  font-family: calibri;
  font-style: italic;
  font-size: 32px;
  font-weight: 700;
}

.outer {
  position: relative;
  display: inline-block;
}

.outer:hover .inside {
  width: 100%;
  z-index: -1;
  -webkit-transition: width 0.3s;
  -moz-transition: width 0.3s;
  -ms-transition: width 0.3s;
  -o-transition: width 0.3s;
  transition: width 0.3s;
}

.outer .inside {
  background-color: yellow;
  position: absolute;
  width: 0%;
  height: 20px;
  margin-top: -24%;
  -webkit-transition: width 0.3s;
  -moz-transition: width 0.3s;
  -ms-transition: width 0.3s;
  -o-transition: width 0.3s;
  transition: width 0.3s;
  z-index: -1;
}