JSFiddle - React, Tailwind, and code Playground

by Trina Lu

HTML

<div class="box">
  <div class="background-shadow"></div>
</div>

CSS

/**
 * This is a simple UI which will enlarge the shadow when hovering on the box
 *
 * <div class="box">
 *   <div class="background-shadow></div>
 * </div>
 */

.box {
  display: block;
  position: relative;
  width: 120px;
  height: 200px;
}

.background-shadow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease-out;
}

.box:hover .background-shadow {
  box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.3);