JSFiddle - React, Tailwind, and code Playground

by Trevor Power

HTML

<div class="white">
   <div class="rgba">
      rgba color
   </div>
   <div class="simple">
      simple color
   </div>
</div>
<div class="check">
   <div class="rgba">
      rgba color
   </div>
   <div class="simple">
      simple color
   </div>
</div>
<div class="grey">
   <div class="rgba">
      rgba color
   </div>
   <div class="simple">
      simple color
   </div>
</div>
<div class="black">
   <div class="rgba">
      rgba color
   </div>
   <div class="simple">
      simple color
   </div>
</div>

SCSS

body {
   .white {
      background: white;
   }
   .check {
      background-image: url("data:image/gif;base64,R0lGODlhEAAQAPEAAAAAAICAgMzMzAAAACH5BAEAAAIALAAAAAAQABAAAAIfjG+iq4jM3IFLJipswNly/XkcBpIiVaInlLJr9FZWAQA7");
   }
   .grey {
      background: grey;
   }
   .black {
      background: black;
   }
   div {
      border: 1px solid white;
      div {
         margin: 30px;
         padding: 2px;
         background-color: white;
         background-color: white;
      }
   }
   .rgba {
      box-shadow: 3px 3px 25px -1px rgba(#808080, 0.3);
   }
   .simple {
      box-shadow: 3px 3px 25px -1px #d9d9d9;
   }
}