JSFiddle - React, Tailwind, and code Playground

by calder12

HTML

<div class="container">
  <div class="card">
    <div class="card-photo">
      <div class="card-body">
        <h3>
          Hello World
        </h3>
      </div>
    </div>
   </div>
</div>

SCSS

.container {
  width: 100%;
  display: flex;
}
.card {
  margin: 1rem;
  flex-basis: 50%;
  .card-photo {
    background-image: url('https://picsum.photos/400/300?image=1049');
    background-size: cover;
    padding-bottom: 56.25%;
    position: relative;
    z-index: 0;
  }
  .card-body {
    background-color: #0F3448;
    color: #fff;
    margin-top: 3rem;
  }
}

JavaScript

const images = [
	'https://picsum.photos/400/300?image=1049'
]