JSFiddle - React, Tailwind, and code Playground

by Felype Rennan

HTML

<div class="line ActiveBorder"></div>
<div class="line ActiveCaption"></div>
<div class="line AppWorkspace"></div>
<div class="line Background"></div>
<div class="line ButtonFace"></div>
<div class="line ButtonHighlight"></div>
<div class="line ButtonShadow"></div>
<div class="line ButtonText"></div>
<div class="line CaptionText"></div>
<div class="line GrayText"></div>
<div class="line Highlight"></div>
<div class="line HighlightText"></div>
<div class="line InactiveBorder"></div>
<div class="line InactiveCaption"></div>
<div class="line InactiveCaptionText"></div>
<div class="line InfoBackground"></div>
<div class="line InfoText"></div>
<div class="line Menu"></div>
<div class="line MenuText"></div>
<div class="line Scrollbar"></div>
<div class="line ThreeDDarkShadow"></div>
<div class="line ThreeDFace"></div>
<div class="line ThreeDHighlight"></div>
<div class="line ThreeDLightShadow"></div>
<div class="line ThreeDShadow"></div>
<div class="line Window"></div>
<div class="line WindowFrame"></div>
<div class="line WindowText"></div>

CSS

.line {
  padding: 8px;
  display: block;
  text-shadow: 0 0 1px black, 0 0 2px white;
  color: white;
}
.line:before {
  background: rgba(0,0,0,0.6);
  border: 1px solid white;
  padding: 4px 12px;
  width: 30%;
  display: block;
}

.ActiveBorder { background-color: ActiveBorder; } .ActiveBorder:before { content: 'ActiveBorder'; } 
.ActiveCaption { background-color: ActiveCaption; } .ActiveCaption:before { content: 'ActiveCaption'; } 
.AppWorkspace { background-color: AppWorkspace; } .AppWorkspace:before { content: 'AppWorkspace'; } 
.Background { background-color: Background; } .Background:before { content: 'Background'; } 
.ButtonFace { background-color: ButtonFace; } .ButtonFace:before { content: 'ButtonFace'; } 
.ButtonHighlight { background-color: ButtonHighlight; } .ButtonHighlight:before { content: 'ButtonHighlight'; } 
.ButtonShadow { background-color: ButtonShadow; } .ButtonShadow:before { content: 'ButtonShadow'; } 
.ButtonText { background-color: ButtonText; } .ButtonText:before { content: 'ButtonText'; } 
.CaptionText { background-color: CaptionText; } .CaptionText:before { content: 'CaptionText'; } 
.GrayText { background-color: GrayText; } .GrayText:before { content: 'GrayText'; } 
.Highlight { background-color: Highlight; } .Highlight:before { content: 'Highlight'; } 
.HighlightText { background-color: HighlightText; } .HighlightText:before { content: 'HighlightText'; } 
.InactiveBorder { background-color: InactiveBorder; } .InactiveBorder:before { content: 'InactiveBorder'; } 
.InactiveCaption { background-color: InactiveCaption; } .InactiveCaption:before { content: 'InactiveCaption'; } 
.InactiveCaptionText { background-color: InactiveCaptionText; } .InactiveCaptionText:before { content: 'InactiveCaptionText'; } 
.InfoBackground { background-color: InfoBackground; } .InfoBackground:before { content: 'InfoBackground'; } 
.InfoText { background-color: InfoText; } .InfoText:before { content: 'InfoText'; } 
.Menu { background-color: Menu; }...