JSFiddle - React, Tailwind, and code Playground

by Alexey Lisovy

HTML

<div class="maxi">
  <div class="mini">
    <span>пример текста</span>
  </div>
</div>
<span>пример текста после блока</span>

CSS

.maxi
    {
      height: 100px;
      background: #acb;
    }
.mini
    {
      height: 100%;
      position: relative;
      z-index: 0;
    }
.mini::before, .mini::after
    {
      content: '';
      display: block;
      position: absolute;
      left: 0; top: 0;
      height: 100%;
      width: 50px;
      box-sizing: border-box;
      background: #ABC;
      border-left: 25px solid #cab;
      background-clip: content-box;
      z-index: auto;
      z-index: -1;
    }
.mini::after
    {
      left: auto;
      right: 0;
    }
.mini:hover::before, .mini:hover::after
    {
      background: transparent;
      border-color: transparent;
    }
.mini span
    {
      display: block;
      height: 100%;
      position: relative;
    }
.mini span::after
    {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      background: linear-gradient(to bottom, RGBA(123, 186, 205, 1), #fff);
      z-index: -1;
      opacity: 0;      
    }
.mini span:hover::after
    {
      opacity: 1;      
    }
.mini::before, .mini::after, .mini span::after
    {
      transition: background 3s ease, border-color 3s ease, opacity 3s ease;      
    }