JSFiddle - React, Tailwind, and code Playground

by cathead

HTML

<a href="" class="button">Lorem ipsum</a>
<a href="" class="button -secondary">Lorem ipsum</a>



<div class="siteHeaderABEM">
  <div class="siteHeaderABEM__utility">
      <a href="" class="button siteHeaderABEM__buttonSignup">Lorem ipsum</a>
  </div>
</div>

<hr>
<hr>
<hr>
<hr>
<hr>
<hr>


<a href="" class="button">Lorem ipsum</a>
<a href="" class="button button--secondary">Lorem ipsum</a>



<div class="siteHeaderBEM">
  <div class="siteHeaderBEM__utility">
      <a href="" class="button siteHeaderBEM__buttonSignup">Lorem ipsum</a>
  </div>
</div>

SCSS

.button {
  background-color: purple;
  box-shadow: inset 0 0 0 5px;
  color: orange;
  font-family: georgia, serif;
  padding: 10px;
  
  &.-secondary {  // 0 2 0
    background-color: green;
    color: navy;
  }
}

.siteHeaderABEM {
  margin-top: 40px;
  
  &__buttonSignup {
    &.button { // 0 2 0
      box-shadow: 0 -6px 0 0px red;
    }
  }
}


/////////////////////

.button {
  background-color: purple;
  box-shadow: inset 0 0 0 5px;
  color: orange;
  font-family: georgia, serif;
  padding: 10px;
  
  &--secondary {  // 0 1 0
    background-color: green;
    color: navy;
  }
}

.siteHeaderBEM {
  margin-top: 40px;
  
  &__buttonSignup {
    box-shadow: 0 -6px 0 0px red;
  }
}




body {
  padding: 40px;
}