JSFiddle - React, Tailwind, and code Playground

by JamesKyle

HTML

<div class="white-text">xxx</div>
<div class="lightergray-text">xxx</div>
<div class="lightgray-text">xxx</div>
<div class="gray-text">xxx</div>
<div class="darkgray-text">xxx</div>
<div class="black-text">xxx</div>
<hr>
<div class="black">
    <div class="bright-text">xxx</div>
    <div class="lightest-text">xxx</div>
    <div class="lighter-text">xxx</div>
    <div class="light-text">xxx</div>
</div>
<hr>
<div class="white">
    <div class="dim-text">xxx</div>
    <div class="dark-text">xxx</div>
    <div class="darker-text">xxx</div>
    <div class="darkest-text">xxx</div>
</div>

CSS

body { opacity: .999999; }

.black {
    background: #000;
}


.white-text       { color: #fff    }
.lightergray-text { color: #f2f2f2 }
.lightgray-text   { color: #d9d9d9 }
.gray-text        { color: #808080 }
.darkgray-text    { color: #262626 }
.black-text       { color: #000    }

.bright-text      { color: #f2f2f2; color: #f2ffffff; color: rgba(255, 255, 255, .95) }
.lightest-text    { color: #d9d9d9; color: #d9ffffff; color: rgba(255, 255, 255, .85) }
.lighter-text     { color: #808080; color: #80ffffff; color: rgba(255, 255, 255, .5 ) }
.light-text       { color: #262626; color: #26ffffff; color: rgba(255, 255, 255, .15) }
.trans-text       { color: transparent                                                }
.dim-text         { color: #0D0D0D; color: #0D000000; color: rgba(0, 0, 0, .05)       }
.dark-text        { color: #262626; color: #26000000; color: rgba(0, 0, 0, .15)       }
.darker-text      { color: #808080; color: #80000000; color: rgba(0, 0, 0, .5 )       }
.darkest-text     { color: #d9d9d9; color: #d9000000; color: rgba(0, 0, 0, .85)       }

/* ///////////////////////////////
// COLOR PALETTE /////////////////
//////////////////////////////////

// B&W'S /////////////////////////

        white = #FFFFFF
   brightgray = #D9D9D9
         gray = #808080
     darkgray = #262626
        black = #000000
     lightest = rgba(255,255,255,.85)
      lighter = rgba(255,255,255,.5)
        light = rgba(255,255,255,.15)
        trans = transparent
         dark = rgba(0,0,0,.15)
       darker = rgba(0,0,0,.5)
      darkest = rgba(0,0,0,.85)

// BLUES /////////////////////////

brightestblue = #DEF5FC
 brighterblue = #90DCF5
   brightblue = #45C3ED
 lightestblue = rgba(31,184,235,.15)
  lighterblue = rgba(31,184,235,.5)
    lightblue = rgba(31,184,235,.85)
         blue = #1FB8EB
     darkblue = #1CAAD9
   darkerblue = #116480
  darkestblue = #051E26

// P!NKS /////////////////////////

brightestpink = #FAD4EC
 brighterpink = #ED79C3
   brightpink =...