JSFiddle - React, Tailwind, and code Playground

by pleinx

HTML

<div class="rich-content">
  <div class="container">
    Container 1
    <div class="children">
      Container 1 Childen
      
        <div class="container">
          Container 2
          <div class="children">
            Container 2 Childen
            
              <div class="container">
                Container 3
                <div class="children">
                  Container 3 Childen
                  
                  <div class="crazy-component">
                    <div class="comparision container left">
                      a
                    </div>
                    <div class="comparision container vs">
                      vs.
                    </div>                    
                    <div class="comparision container right">
                      c
                    </div>                    
                  </div>
                </div>
              </div>            
          </div>
        </div>
    </div>
  </div>

</div>

SCSS

.rich-content {
  .container {
    background: grey;

    &:not(.transparent) {
      > .children {
        padding: 25px;
      }
    }
  }
}