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: linear-gradient(RGBA(235, 150, 88, .6), RGBA(235, 128, 103, .6));
      }
.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;
          --fascia: 25px;
          --transition: 1s;
          transition: box-shadow var(--transition) ease;
      }
.every > span
      {
          display: block; position: absolute; z-index: 1;
          height: 100%; width: 100%;
          border-radius:var(--border-radius);
          left: calc(-1*var(--fascia)); padding: 0  var(--fascia);
 			  	transition: background var(--transition) ease;         
      }
.every:hover > span
      {
          background: coral;
      }
.every::before, .last::after
      {
          content: '';
			  	display: block;
		  		position: absolute;
		  		top: 0;
	  			left: calc(-1*var(--fascia));
		  		height: 100%;
		  		width: var(--fascia);
          background: RGBA(128, 240, 225, 1); background-clip: content-box;
		  		border-right: var(--fascia) solid RGBA(210, 210, 160, 1);
			  	transition: opacity var(--transition) ease;
			}
.last::after
      {
          left: auto;
          right: calc(-1*var(--fascia));
      }
.every:hover::before, .every:hover + .every::before, .last:hover::after
			{
					opacity: 0;
			}
.every:hover
      {
         box-shadow:  0 0 5rem         RGBA(30, 110, 125, 1);
      }