JSFiddle - React, Tailwind, and code Playground

by Sasá Rafalsky

HTML

<div class="container1">
  <div class="item item1">
    <div class="inner">
      <div class="text">
        <div class="title">
          Premium Care for Your Pet
        </div>
        <div class="description">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="//pawclawlab.com/cdn/shop/files/nav-menu-ECO-PRODUCTS.png?v=1720891244&amp;width=500" alt="" srcset="//pawclawlab.com/cdn/shop/files/nav-menu-ECO-PRODUCTS.png?v=1720891244&amp;width=352 352w, //pawclawlab.com/cdn/shop/files/nav-menu-ECO-PRODUCTS.png?v=1720891244&amp;width=500 500w" width="500" height="500">

        </div>
      </div>
    </div>
  </div>
  <div class="item item3">
    <div class="inner">
      <div class="image">
        <div class="in">
          <img src="//pawclawlab.com/cdn/shop/files/nav-menu-LIFE_STAGES.png?v=1720894888&amp;width=500" alt="" srcset="//pawclawlab.com/cdn/shop/files/nav-menu-LIFE_STAGES.png?v=1720894888&amp;width=352 352w, //pawclawlab.com/cdn/shop/files/nav-menu-LIFE_STAGES.png?v=1720894888&amp;width=500 500w" width="500" height="500">
        </div>
      </div>
    </div>
  </div>
  <div class="item item4">
    <div class="inner">
      <div class="image">
        <div class="in">
          <img src="//pawclawlab.com/cdn/shop/files/nav-menu-CAT.png?v=1720894888&amp;width=500" alt="" srcset="//pawclawlab.com/cdn/shop/files/nav-menu-CAT.png?v=1720894888&amp;width=352 352w, //pawclawlab.com/cdn/shop/files/nav-menu-CAT.png?v=1720894888&amp;width=500 500w" width="500" height="500">
        </div>
      </div>
    </div>
  </div>
</div>

<div class="container2">
  <div class="item item1">
    <div class="inner">
   ...

SCSS

body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #ccc;
}

.container1 {
  //display: none !important;
  margin: 10px 0;
  max-width: 800px;
  max-height: 600px;
  display: flex;
  flex-wrap: wrap;
  width: 80%;
  height: 80vh;
  background-color: #fff;
  padding: 8px;
  border-radius: 12px;
  box-sizing: border-box;

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

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

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

        .title {
          font-size: 2rem;
          font-weight: bold;
          text-align: left;
          padding: 0 0 1rem;
        }

        .description {
          font-size: 13px;
        }
      }

      .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;
          }
        }
      }
    }

    &.item1 {
      width: 60%;
      height: 60%;
      //background-color: lightblue;
    }

    &.item2 {
      width: 40%;
      height: 60%;
      //background-color: lightgreen;
    }

    &.item3 {
      flex: 0 0 60%;
      height: 40%;
      //background-color: lightcoral;
    }

    &.item4 {
      flex: 0 0 40%;
      height: 40%;
     ...