JSFiddle - React, Tailwind, and code Playground

by zpao

HTML

<div class="small container light">
  <div class="alpha">
    The quick brown fox jumps over the lazy dog
  </div>
  <div class="solid">
    The quick brown fox jumps over the lazy dog
  </div>
</div>

<div class="small container dark">
  <div class="alpha">
    The quick brown fox jumps over the lazy dog
  </div>
  <div class="solid">
    The quick brown fox jumps over the lazy dog
  </div>
</div>

<div class="medium container light">
  <div class="alpha">
    The quick brown fox jumps over the lazy dog
  </div>
  <div class="solid">
    The quick brown fox jumps over the lazy dog
  </div>
</div>

<div class="medium container dark">
  <div class="alpha">
    The quick brown fox jumps over the lazy dog
  </div>
  <div class="solid">
    The quick brown fox jumps over the lazy dog
  </div>
</div>

<div class="large container light">
  <div class="alpha">
    The quick brown fox jumps over the lazy dog
  </div>
  <div class="solid">
    The quick brown fox jumps over the lazy dog
  </div>
</div>

<div class="large container dark">
  <div class="alpha">
    The quick brown fox jumps over the lazy dog
  </div>
  <div class="solid">
    The quick brown fox jumps over the lazy dog
  </div>
</div>

SCSS

.container {
  padding: 2em;
  font-family: Helvetica, Arial, sans-serif;
}

.small {
  font-size: 12px;
}

.medium {
  font-size: 16px;
}

.large {
  font-size: 20px;
}

.light {
  background: #fff;
  
  .alpha {
    color: rgba(0, 0, 0, 0.5);
  }
  
  .solid {
    color: rgb(50%, 50%, 50%);
  }
}
  
.dark {
  background: #000;
  
    .alpha {
    color: rgba(255, 255, 255, 0.5);
  }
  
  .solid {
    color: rgb(50%, 50%, 50%);
  }
}