JSFiddle - React, Tailwind, and code Playground

by cathead

HTML

<div class="layer">
  <div class="layer__img">
    <img src="https://loremflickr.com/1000/600/charcuterie" alt="">  
  </div>

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

<div class="layer">
  <div class="layer__img">
    <img src="https://loremflickr.com/200/200/charcuterie" alt="">
  </div>
  <div class="layer__content">
    <h2>collaborative</h2>
    <p>Lorem ipsum dolor sit amet</p>
  </div>
</div>

SCSS

body, html {
  margin: 0; padding: 0;
}

.layer {
  background-color: DarkSlateGray;
  display: flex;
  flex-direction: row-reverse;
  
  &__img {
    max-width: 50%;
    flex-grow: 1;
    text-align: right;
    
    img {
      max-width: 100%;
    }`
  }
  
  &__content {
    max-width: 512px;
    flex-grow: 1;
    color: white;
  }
}