JSFiddle - React, Tailwind, and code Playground

HTML

<div class="card">
  <div class="bcg">
  </div>
  <img src="https://i.ytimg.com/vi/QsceGUjxRpQ/hqdefault.jpg" class="image">
</div>

CSS

html, body {
    width: 100%;
    height: 100%;  
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.card, img, .bcg {
    width: 400px;
    height: 300px;
    border-radius: 9px;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
}

.bcg {
    position: absolute;
    background: linear-gradient(60deg, red, yellow, purple);
    z-index: 4;
    transform: translate(-19px, -18px);
}

.image {
    z-index: 10;
    position: relative;
}