JSFiddle - React, Tailwind, and code Playground

by Mawel Don

HTML

<div class="products">
              <article class="product product-categoryOne">
                <img class="product__img" src="https://placekitten.com/g/500/500">
                  <div class="product-categoryOne--details--text">
                      <header>
                          <h1>{{ category.name }}</h1>
                          <p>{{ category.shortDescription|raw }}</p>
                      </header>
                    <div class="products__quantities">
                    </div>
                  </div>
              </article>     
              
              <article class="product product-categoryTwo">
                <img class="product__img" src="https://placekitten.com/g/500/500">
                  <div class="product-categoryOne--details--text">
                      <header>
                          <h1>{{ category.name }}</h1>
                          <p>{{ category.shortDescription|raw }}</p>
                      </header>
                    <div class="products__quantities">
                    </div>
                  </div>
              </article>  
              
              <article class="product product-categoryThree">
                <img class="product__img" src="https://placekitten.com/g/500/500">
                  <div class="product-categoryOne--details--text">
                      <header>
                          <h1>{{ category.name }}</h1>
                          <p>{{ category.shortDescription|raw }}</p>
                      </header>
                    <div class="products__quantities">
                    </div>
                  </div>
              </article>  
              
              <article class="product product-categoryThree">
                <img class="product__img" src="https://placekitten.com/g/500/500">
                  <div class="product-categoryOne--details--text">
                      <header>
                          <h1>{{ category.name }}</h1>
                          <p>{{...

SASS

body
    background: cyan
.product
    background-color: #fff
    display: flex
    img
      object-fit: cover
    &-categoryOne
        flex-direction: row
        width: 100%
        img
            width: 50%
    &-categoryTwo, &-categoryThree
        flex-direction: column
    &-categoryTwo
        width: 50%
        img
            height: 30vh
    &-categoryThree
        width: 25%
        img
            height: 10vh
    &__img
        max-width: 100%