JSFiddle - React, Tailwind, and code Playground

by arackaf

HTML

<div class="box">

</div>

CSS

.box {
  width: 150px;
  height: 150px;
  background-color: red;
  box-shadow: 5px 5px 25px #000;
    transition: 
    /* step 1 */
    width      1s,
    /* step 2 */
    background 0.5s 1s;
}

/* On hover... */
.box:hover {
  /* Increase width */
  width: 300px;
  /* Change color */
  background-color: orange;
  /* Move the shadow */
  box-shadow: -5px 5px 25px #000;
}