JSFiddle - React, Tailwind, and code Playground

by Alexey Lisovy

HTML

<div>

</div>

CSS

/* служебная песочница для исследования теней */
div
      {
          margin: 75px 100px;
          width: 200px;
          height: 100px;
          --border-radius: 25px;
          border-radius:var(--border-radius);
          background: RGBA(128, 137, 126, .7);
          --transition: 1s;
          --first-color: RGBA(128, 240, 225, 1);
          --second-color: RGBA(210, 210, 160, 1);
          --fascia: 25px;
          --transition: 1s;
          transition: var(--transition);
          box-shadow: var(--fascia)   0    0    var(--first-color),
                      calc(2*var(--fascia))   0    0    var(--second-color);          
      }
div:hover
      {
          background: RGBA(128, 137, 126, .4);
          box-shadow: calc(-1*var(--fascia))   0    0    var(--first-color),
                      calc(-2*var(--fascia))   0    0    var(--second-color);
      }