JSFiddle - React, Tailwind, and code Playground

by Jake

HTML

<main>
  <div style="background:tomato" class="dark">Tomato</div>
  <div style="background:gainsboro">Gainsboro</div>
  <div style="background:whitesmoke">Whitesmoke</div>
  <div style="background:darkred" class="dark">Darkred</div>
</main>

SCSS

body, html, main { margin: 0; padding: 0 }
main {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
div {
  width: 100%;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
  font-size: 18px;
  font-family: helvetica, arial;
  text-shadow: 1px 1px 2p hsla(0,0%,100%,.8);
  
  &.dark {
    color: white;
    text-shadow: 1px 1px 2px hsla(0,0%,0%,.6);
  }
}