JSFiddle - React, Tailwind, and code Playground

by joshuaohana

HTML

<div class="outer">
  <div class="inner">
  </div>
</div>

<p></p>

<div class="outer2">
  <div class="inner2">
  </div>
</div>

CSS

.outer {
  width: 300px;
  height: 100px;
  background-color: red;
  opacity: 0.1;
}
.outer .inner {
  height: 100px;
  width: 0;
  background-color: blue;
}
.outer:hover {
  opacity: 1;
  transition: opacity 1s;
}
.outer:hover .inner {
  width: 100px;
  transition: width 1s 0.5s;
}

.outer2 {
  width: 300px;
  height: 100px;
  background-color: red;
  opacity: 0.1;
}
.outer2 .inner2 {
  height: 100px;
  width: 0;
  background-color: blue;
}
.outer2:hover {
  opacity: 1;
  transition: opacity 1s;
}
.outer2:hover .inner2 {
  width: 100px;
  animate: widen 1s 0.5s forwards;
}

@keyframes widen {
    from {
      transform: scale(0);
    }
    to {
      transform: scale(1);
    }
}