JSFiddle - React, Tailwind, and code Playground

HTML

<figure class="item">

  <div class="item__content">
    <div class="item__image"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="item__text">
      <h2>Заголовок</h2>
      <p>Demos for docs Bug reporting (test-case) for Github Issues code answers on Stack Overflow code collaboration Code snippets hosting</p>
    </div>
  </div>
  
</figure>

SCSS

.item {
  font-family: sans-serif;
  font-family: sans-serif;
  position: relative;
  width: 250px;
  padding: 15px;
  border-radius: 4px;
  box-shadow: 0 0 10px 0 #0004;
  background: #fff;
  
  &__content {
    
  }
  
  &__image {
    img {
      max-width: 100%;
      border-radius: 4px;
    }
  }
  
  &__text {
    
    h2 {
      margin: .5em 0 .25em 0;
      font-weight: 700;
    }
    
    p {
      margin: 0;
      font-size: .75em;
    }
    
  }
  
  &:before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    background: linear-gradient(30deg, blue, red);
    border-radius: 4px;
    z-index: -1;
    transform: scale(.9);
    transition: all .3s;
  }
  
  &:hover {
      &:before {
         transform: none;
      }
  }
  
}