JSFiddle - React, Tailwind, and code Playground

by cathead

HTML

<div class="layer">
  <img class="layer__img" src="https://dummyimage.com/600x400/ba7773/33387a.png" alt="">
  <div class="layer__content">
    <h2>collaborative</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero minima, quidem iusto sunt voluptate earum ab vel veniam dolorum, ad sequi laboriosam quia iste, ea itaque debitis, doloremque ipsa incidunt?</p>
  </div>
</div>

SCSS

$container: 1200px;

.layer {
  background-color: DarkSlateGray;
  display: flex;
  flex-direction: row-reverse;
  
  &__img {
    max-width: 50%;
  }
  
  &__content {
    max-width: $container / 2;
    color: white;
  }
}