JSFiddle - React, Tailwind, and code Playground

by ahodhellysar

HTML

<html>
<body>

<div class="parent">
    <div class="content two">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
</div>  
<div class="parent">
    <div class="section-title"> section title </div>
    <div class="content">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
</div>

<div class="parent">
    <div class="content two">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
</div>  
</body>
</html>

CSS

.parent {
        position: relative;
        display: flex;
        flex-wrap: wrap;
    }

    .section-title {
        float:left;
        position: sticky;
        transform-origin: 0% 0;
        transform: rotate(-90deg) translateX(-111%) translateY(0);
         font-size: 5em;
        line-height: 100%;
        font-weight: 600;
        top: 0;
        text-align: left;
        -webkit-transform-origin: 0% 0;
        -ms-transform-origin: 0% 0;}
    
    .content {
        display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-gap: 5px;
    }
    .content div {
        background-color:green;
        height:500px;
        width:500px;
    }
    .content.two {
        z-index:-1;
    }
    .content.two div {
        background-color:red;
        height:500px;
        width:500px;
    }