JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="CssStyle">
  <h2 class="CssStyle-Heading">Some Heading</h2>
  <p class="CssStyle-Description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, voluptatum aliquam, eaque tempore sed ullam eum tenetur maiores excepturi veritatis. Ullam mollitia fugit fuga, eos.</p>
    <a class="CssStyle-SomeBtn" href="#">BEM Alt</a>
</div>

<div class="CssStyle">
  <h2 class="CssStyle-Heading">Some Heading</h2>
  <p class="CssStyle-Description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, voluptatum aliquam, eaque tempore sed ullam eum tenetur maiores excepturi veritatis. Ullam mollitia fugit fuga, eos.</p>
    <a class="CssStyle-SomeBtn CssStyle-SomeBtn--highlight" href="#">BEM Alt</a>
</div>

<div class="CssStyle CssStyle--dark">
  <h2 class="CssStyle-Heading">Some Heading</h2>
  <p class="CssStyle-Description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, voluptatum aliquam, eaque tempore sed ullam eum tenetur maiores excepturi veritatis. Ullam mollitia fugit fuga, eos.</p>
    <a class="CssStyle-SomeBtn" href="#">BEM Alt</a>
</div>

SCSS

.CssStyle {
  margin: 1em;
  padding: 1em;
  background: silver;

  &-Heading {
    border-bottom: 2px solid;
  }
  
  &-SomeBtn {
    background: salmon;
    padding: 1em;
    border: 2px solid gray;
    border-radius: 2em;
    display: inline-block;
    
    &--highlight {
      background: gold;
    }
  }
    
  &--dark {
    background: navy;
    color: white;
    
    .CssStyle-SomeBtn {
      border-color: white;
      background: lightblue;
    }
  }
}