JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="layer">
  <div class="layer__img">
    <img src="https://picsum.photos/1000/600" 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://picsum.photos/200/200" 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: grid;
  grid-template-columns: minmax(auto, 512px) 50%;
  justify-content: end;
  
  &__img {
    grid-area: 1 / 2;
    
    img {
      max-width: 100%;
    }
  }
}