JSFiddle - React, Tailwind, and code Playground

by Sasá Rafalsky

HTML

<div class="common-description">
  <div class="container container1">
    <div class="item item1">
      <div class="inner">
        <div class="text">
          <h3 class="ttl">
            Premium Care for Your Pet
          </h3>
          <div class="dsc">
            At PawClawLab.com, we understand your pet is family. That's why our products are crafted with your pet's well-being in mind. Whether you need nutritious food, fun toys, or practical accessories, we offer only the best for your furry friend.
          </div>
        </div>
      </div>
    </div>
    <div class="item item2">
      <div class="inner">
        <div class="image">
          <div class="in">
            <img src="https://cdn.shopify.com/s/files/1/0879/2211/4878/files/1-3.jpg?v=1724701366" alt="premium care 1">
          </div>
        </div>
      </div>
    </div>
    <div class="item item3">
      <div class="inner">
        <div class="image">
          <div class="in">
            <img src="https://cdn.shopify.com/s/files/1/0879/2211/4878/files/1-2.jpg?v=1724701366" alt="premium care 2">
          </div>
        </div>
      </div>
    </div>
    <div class="item item4">
      <div class="inner">
        <div class="image">
          <div class="in">
            <img src="https://cdn.shopify.com/s/files/1/0879/2211/4878/files/1-1.webp?v=1724701366" alt="premium care 3">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="container container2">
    <div class="item item1">
      <div class="inner">
        <div class="text">
          <h3 class="ttl">
            Natural Ingredients You Can Trust
          </h3>
        </div>
      </div>
    </div>
    <div class="item item2">
      <div class="inner">
        <div class="text">
          <div class="dsc">
            Your pet’s health matters. Our food and treats are made with high-quality, natural ingredients to support a long, healthy life. We also offer a selection of organic products for...

SCSS

.common-description {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .container {
    display: flex;
    box-sizing: border-box;
    position: relative;
    background-color: #fff;
    border-radius: 12px;
    margin: 20px 0;
    padding: 0;
    width: 100%;
    max-width: 1200px;

    .item {
      box-sizing: border-box;
      border-radius: 12px;
      padding: 4px;

      .inner {
        width: 100%;
        height: 100%;
        box-sizing: border-box;

        .text {
          display: flex;
          justify-content: center;
          flex-direction: column;
          box-sizing: border-box;
          width: 100%;
          height: 100%;

          .ttl {
            font-size: 4rem;
            font-weight: bold;
            padding: 12px;
            margin: 0;
          }

          .dsc {
            font-size: 13px;
            padding: 12px;
          }
        }

        .image {
          position: relative;
          height: 100%;
          width: 100%;

          .in {
            border-radius: 12px;
            box-sizing: border-box;
            position: absolute;
            overflow: hidden;
            height: 100%;
            width: 100%;
            left: 0;

            img {
              background-position: center 65%;
              background-repeat: no-repeat;
              box-sizing: border-box;
              background-size: cover;
              display: inline-block;
              overflow: hidden;
              height: 100%;
              width: 100%;
              object-fit: cover;
            }
          }
        }
      }
    }

    &.container1 {
      flex-wrap: wrap;
      height: 600px;

      .item {
        &.item1 {
          width: 60%;
          height: 70%;
        }

        &.item2 {
          width: 40%;
          height: 70%;
        }

        &.item3 {
          flex: 0 0 60%;
          height: 30%;
        }

        &.item4 {
         ...