JSFiddle - React, Tailwind, and code Playground

by Chris Buttery

HTML

<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>

CSS

body {
        padding: 100px;
      }
      .item {
        background: brown;
        border-radius: 25px;
        box-shadow: 1px 3px 1px rgba(0,0,0,0.5);
        float: left;
        height: 50px;
        margin: 0 20px;
        width: 50px;
      }

      .item:hover {
        box-shadow: 1px 23px 1px rgba(0,0,0,0.1);
        position: relative;
        top: -20px;
      }