JSFiddle - React, Tailwind, and code Playground

by Anderson Carlos Woss

HTML

<section id="animations">
  <section>
    <p>Coloque o mouse sobre o elemento</p>
    <div class="space">
      <div class="box"></div>
    </div>
  </section>
</section>

CSS

#animations:hover .box {
  width: 100%;
}

.box {
  width: 10%;
  height: 20px;
  background-color: red;
  transition: width 2s;
}

.box {
  transition-timing-function: steps(10, end);
}