JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<h2>The Good</h2>

<div class="point pG">
<div class="poTop"><div class="bul bulG"></div>Good: Some text here</div>
<div class="poBot"><p>Eros pulvinar accumsan vitae ut dolor. Fusce odio est, dictum et lorem sit amet, euismod lacinia erat. Curabitur egestas faucibus mi ac consectetur.</p><p>Eros pulvinar accumsan vitae ut dolor. Fusce odio est, dictum et lorem sit amet, euismod lacinia erat. Curabitur egestas faucibus mi ac consectetur.</p></div>
</div>

<div class="point pG">
<div class="poTop"><div class="bul bulG"></div>Good: Some text here</div>
<div class="poBot"><p>Eros pulvinar accumsan vitae ut dolor. Fusce odio est, dictum et lorem sit amet, euismod lacinia erat. Curabitur egestas faucibus mi ac consectetur.</p><p>Eros pulvinar accumsan vitae ut dolor. Fusce odio est, dictum et lorem sit amet, euismod lacinia erat. Curabitur egestas faucibus mi ac consectetur.</p></div>
</div>

<h2>The Bad</h2>

<div class="point pB">
<div class="poTop"><div class="bul bulB"></div>Bad: Some text here</div>
<div class="poBot"><p>Eros pulvinar accumsan vitae ut dolor. Fusce odio est, dictum et lorem sit amet, euismod lacinia erat. Curabitur egestas faucibus mi ac consectetur.</p><p>Eros pulvinar accumsan vitae ut dolor. Fusce odio est, dictum et lorem sit amet, euismod lacinia erat. Curabitur egestas faucibus mi ac consectetur.</p></div>
</div>

<div class="point pB">
<div class="poTop"><div class="bul bulB"></div>Bad: Some text here</div>
<div class="poBot"><p>Eros pulvinar accumsan vitae ut dolor. Fusce odio est, dictum et lorem sit amet, euismod lacinia erat. Curabitur egestas faucibus mi ac consectetur.</p><p>Eros pulvinar accumsan vitae ut dolor. Fusce odio est, dictum et lorem sit amet, euismod lacinia erat. Curabitur egestas faucibus mi ac consectetur.</p></div>
</div>

<h2>The Ugly</h2>

<div class="point pU">
<div class="poTop"><div class="bul bulU"></div>Ugly: Some text here</div>
<div class="poBot"><p>Eros pulvinar accumsan vitae ut dolor. Fusce odio est,...

CSS

h2 {font-family:arial;font-size:16px;color:#405C9E;margin-top:30px;}

.point {font-family:arial;font-size:15px;-webkit-box-shadow: 0px 5px 4px -5px rgba(0,0,0,0.6);
-moz-box-shadow: 0px 5px 4px -5px rgba(0,0,0,0.6);
box-shadow: 0px 5px 4px -5px rgba(0,0,0,0.6);} 

.pG .poTop {background-color:#468C00;}.pG .poBot {border-color:#468C00;}
.pB .poTop {background-color:#FF9326;}.pB .poBot {border-color:#FF9326;}
.pU .poTop {background-color:#D93600;}.pU .poBot {border-color:#D93600;}

.poTop {font-weight:bold;line-height:29px;border-radius: 5px 5px 0 0;text-indent:10px;color:#fff;}
.poBot {border:solid;border-width:0 2px 2px 2px;padding:0 8px;border-radius: 0 0 5px 5px;margin:0 0 10px 0;}
.poBot p {display:inline-block;line-height:20px;margin:8px 0;}

.bul {float:right;width:12px;height:14px;margin-top:7px;margin-right:7px;}

.bulG {background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAOCAMAAAAsYw3eAAAATlBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////+QlxstAAAAGXRSTlMAngPXQc80+OGQgHAOCPDowa1mTjkqIRYVrMEUugAAAFtJREFUCNdFjUcSwCAMAwmml/Sm/380tIAvXmskmY1xYrCC7BwJUz8sTPhZADnCMwcDm3PFOYFiWoSTsQNQVZP8XeBK8pmxb0moPR4a+mqlnADPxou1mUrH3eADH5YDhX2pYfoAAAAASUVORK5CYII=');}

.bulB {background-image:url('data:image/gif;base64,R0lGODlhDAAOAIAAAP///8zMzCH5BAEHAAEALAAAAAAMAA4AAAIPjI+py+2vgJy02gmz3twUADs=');}

.bulU {background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAOBAMAAADpk+DfAAAAD1BMVEUAAAD///////////////+PQt5oAAAABHRSTlMAl4gBz5LqOgAAAC9JREFUCNdjQAVMwkAswMDkaMCgIsDAoCIMYgG5KkBxIBfIgVJQQagSqAaYdhQAAPZFBQ+vTDS5AAAAAElFTkSuQmCC');}

JavaScript

// Good, Bad, Ugly Boxes