JSFiddle - React, Tailwind, and code Playground

by jeryagus

HTML

<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>
<div class="note">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div><br/>
<div class="alert">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div><br/>
<div class="instruction">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div><br/>

CSS

body {background:#aaa;text-align:center;font:normal normal 13px/1.5 Ubuntu,"Trebuchet MS",Trebuchet,Geneva,Verdana,Arial,Sans-Serif;color:#333;}
.note,.alert,.instruction {width:500px; position:relative;display:block;font-style:normal;color:#555;padding:15px 18px 15px 48px;background-color:#f8e38d;border-radius:3px;border-bottom:2px solid rgba(0,0,0,.1)}
.note p,.alert p,.instruction p {margin:0px}
.note {background-color:#FCD683}
.alert {background-color:#db6161}
.alert a,.alert code {color:#FFC0A7}
.instruction {background-color:#58C99D}
.instruction a,.instruction code {color:#C4FCE5}
.note:before,.alert:before,.instruction:before {font-family:'FontAwesome';display:block;position:absolute;top:15px;left:16px;color:rgba(0,0,0,.15);font-size:22px;line-height:1}
.note:before {content:"\f040"}
.alert:before {content:"\f071"}
.instruction:before {content:"\f05a"}