JSFiddle - React, Tailwind, and code Playground

by cathead

HTML

<div class="m-layer">
  <div class="a-heading m-layer__heading">hello world</div>
  <div class="m-layer__content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, quisquam.</p>
    <p>Repellendus nemo omnis nostrum error molestias velit maiores sapiente debitis!</p>
    <p>Alias quia, soluta ab! Laborum consectetur ad veritatis eos inventore.</p>
  </div>
</div>

<div class="m-layer -dark">
  <div class="a-heading -underlined m-layer__heading -clipped">hello world</div>
    <div class="m-layer__content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, quisquam.</p>
    <p>Repellendus nemo omnis nostrum error molestias velit maiores sapiente debitis!</p>
    <p>Alias quia, soluta ab! Laborum consectetur ad veritatis eos inventore.</p>
  </div>
</div>

SCSS

// block (atom)
.a-heading {
  font-size: 4rem;
  
  // block modifeir
  &.-underlined {
    box-shadow: 0 -.5rem 0 inset;
    margin-bottom: 1rem;
  }
}

// block (molecule)
.m-layer {
  padding: 1.5rem 3rem 3rem 6rem;
  background-color: silver;
  
  // block modifier
  &.-dark {
    background-color: indigo;
    color: white;
  }
  
  // element
  &__heading {
    margin-left: -3rem;
    
    // element modifier
    &.-clipped {
      margin-top: -3rem;
    }
  }
}