JSFiddle - React, Tailwind, and code Playground

by Alexey Lisovy

HTML

<div class="container no_shift">
    <div class="every">
        <span></span>
    </div>
    <div class="every">
        <span></span>
    </div>
    <div class="every last">
        <span></span>
    </div>
</div>

CSS

/* полоски с помощью тени. полоски сворачиваются внутрь,
   дополнительно становятся прозрачными. единственные полоски не становящиеся прозрачными - предпоследние. именно из-за них и приходится регулировать полоски с помощью теней */
:root, html
		{
			font-size: 62.5%;				/*конкретный размер (например в px) не указываем, чтоб оставить возможность изменять в браузере шрифт по-умолчанию*/
		}
body
		{
			font-size: 1.6rem;		/*возвращаем стандартное значение в 16px. При этом rem везде, кроме медиазапросов, остаётся 10px, что удобно для назначения размеров */
		}
.container
      {
          margin: 75px 100px;
          background: RGBA(235, 150, 88, .4);
          --fascia: 25px;
          padding: 0   var(--fascia);
      }
.no_shift	
	  	{
	  	  	font-size: 0;
		  }
.no_shift > *:not(.no_shift)
	  	{
	  	  	font-size: 1.6rem; 
	  	}
.every
      {         
          display: inline-block;
          width: 200px;
          height: 100px;
          --border-radius: 25px;
          border-radius:var(--border-radius);
          position: relative;
          --first-color: RGBA(128, 240, 225, 1);
          --second-color: RGBA(210, 210, 160, 1);
          --transition: 1s;
          transition: var(--transition);
      }
.every:hover
        {
           background: RGBA(128, 240, 232, .3);
        }
.every::before
      {
          content: '';
          display: block;
          position: absolute;
          height: 100%; width: 100%;
          opacity: 1;
          transition: var(--transition);         
          box-shadow: inset var(--fascia)            0    0    var(--second-color),
                      calc(-1*var(--fascia))         0    0    var(--first-color);          
      }
.every:hover::before, .every:hover + .every::before
       {
           opacity: 0;
           box-shadow: none;
       }
.every.last::before
      {
          width: calc(100% - 2*var(--fascia)); left: var(--fascia);
          
          box-shadow:       var(--fascia)             ...