JSFiddle - React, Tailwind, and code Playground

by shanejones

HTML

<div class="releases">
  <div class="release">
    <div class="content">
       <h2>Artist name</h2>
       <p>Release name</p>   
    </div>
    <div class="image" style="background-image: url(https://subculttechno.com/wp-content/uploads/2020/03/SUBCULTSPECIALSERIESEP36-500x500.jpg)">
    </div> 
  </div>
</div>

SCSS

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;700&display=swap');

* {
  font-family: Roboto, sans-serif;
}

.releases {
  background: white;
  display: flex;
  
  .release {
    position: relative;
    &:before {
      display: block;
      content: "";
      width: 100%;
      padding-top: (1 / 1) * 100%;
    }
  }
  
  .content, .image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}