JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="box">
    <div class="back" style="background: url(https://picsum.photos/1200/600) no-repeat;"></div>
    <div class="front">
        <h1>dddd</h1>
        <div class="img" style="background: url(https://picsum.photos/1200/600) no-repeat;"></div>
    </div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="88.098" height="86.92" viewBox="0 0 88.098 86.92">
  <g id="Group_1305" data-name="Group 1305" transform="translate(-1606 -2168)">
    <g id="feedback" transform="translate(1615 2161.081)">
      <g id="Group_52" data-name="Group 52" transform="translate(0 21.333)">
        <g id="Group_51" data-name="Group 51" transform="translate(0 0)">
          <path id="Path_389" data-name="Path 389" d="M108.314,131.295h36.253a1.648,1.648,0,1,0,0-3.3H108.314a1.648,1.648,0,0,0,0,3.3Z" transform="translate(-90.187 -111.52)" fill="#fff"/>
          <path id="Path_390" data-name="Path 390" d="M128.088,256H108.314a1.648,1.648,0,1,0,0,3.3h19.774a1.648,1.648,0,1,0,0-3.3Z" transform="translate(-90.187 -219.747)" fill="#fff"/>
          <path id="Path_391" data-name="Path 391" d="M72.789,27.925c-.1,0-.188.024-.283.028v-.028a6.6,6.6,0,0,0-6.592-6.592H6.592A6.6,6.6,0,0,0,0,27.925V92.191a1.649,1.649,0,0,0,1.017,1.522,1.629,1.629,0,0,0,.631.126,1.647,1.647,0,0,0,1.165-.483l16-16H65.915a6.6,6.6,0,0,0,6.592-6.592V43.437l4.744-4.743v0a6.307,6.307,0,0,0-4.461-10.767ZM69.21,70.769a3.3,3.3,0,0,1-3.3,3.3H18.126a1.647,1.647,0,0,0-1.165.483L3.3,88.213V27.925a3.3,3.3,0,0,1,3.3-3.3H65.915a3.3,3.3,0,0,1,3.3,3.3V29.05a6.2,6.2,0,0,0-.882.722L50.4,47.7H18.126a1.648,1.648,0,1,0,0,3.3H47.755l-1.582,7.916a1.648,1.648,0,0,0,1.616,1.971,1.682,1.682,0,0,0,.322-.032L56.346,59.2a1.638,1.638,0,0,0,.843-.451L69.21,46.732Zm-14-14.7L49.89,57.134l1.065-5.33L65.914,36.845l4.262,4.262ZM74.92,36.363l-2.414,2.414-4.262-4.262L70.659,32.1a3.014,3.014,0,0,1,4.261,4.263Z" transform="translate(0 -21.333)" fill="#fff"/>
        </g>
      </g>
    </g>
    <circle id="Ellipse_9" data-name="Ellipse 9"...

CSS

* {
    box-sizing: border-box;
}
body {
    background: black;
}
.box {
    width: 100%;
    overflow: hidden;
    border-radius: 10px;
    position: relative;
}
.box .back {
    width: 100%;
    height: 100%;
    background-size: cover;
    position:absolute;
    top:0;
    left:0;
    background-position: center;
}
.box .back:after {
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: white;
    z-index: 2;
    opacity: 0.5;
    position: absolute;
}
.box .front {
    position: relative;
    z-index: 2;
    border-radius: 10px;
    margin: 20px;
    overflow: hidden;
}
.box .front h1 {
    position: relative;
    z-index: 2;
    color: white;
    padding-left: 50px;
    padding-top: 30px;
    padding-bottom: 30px;
}
.box .front .img {
    width: calc(100% + 40px);
    height: calc(100% + 40px);
    background-size: cover;
    position:absolute;
    top: -20px;
    left: -20px;
    background-position: center;
}