JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="card">
  <div class="card__imgAlt" style="background-image: url(https://placebear.com/300/300)"></div>
  <div class="card__content">
    <h2>Bears</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus, animi!</p>
  </div>
</div>

<div class="card">
  <div class="card__img">
    <img src="https://placebear.com/300/300" alt="">
  </div>
  <div class="card__content">
    <h2>Bears</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus, animi!</p>
  </div>
</div>

SCSS

.card {
  display: flex;
  border: 10px solid red;
  margin: 1rem;
  
  &__img,
  &__imgAlt,
  &__content {
    flex-basis: 50%;
  }
  
  &__img img {
    object-fit: cover;
    width: 100%;
    height: 100%
  }
  
  &__imgAlt {
    background-position: center;
    background-size: cover;
  }
}