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;
}
}