JSFiddle - React, Tailwind, and code Playground

by bluetidepro

HTML

<link rel="stylesheet" href="http://iamzachreed.com/css/style.css" type="text/css">

<span class="entypo phone"></span>
<span class="entypo smartphone"></span>
<span class="entypo mouse"></span>
<span class="entypo roadsign"></span>
<span class="entypo mail"></span>
<span class="entypo write"></span>
<span class="entypo attachment"></span>
<span class="entypo back"></span>
<span class="entypo doubleback"></span>
<span class="entypo forward"></span>
<span class="entypo user"></span>
<span class="entypo usergroup"></span>
<span class="entypo adduser"></span>
<span class="entypo profie"></span>
<span class="entypo newwindow"></span>
<span class="entypo mappin"></span>
<span class="entypo map"></span>
<span class="entypo compass"></span>
<span class="entypo compasshand"></span>
<span class="entypo crosshair"></span>
<span class="entypo link"></span>
<span class="entypo heart"></span>
<span class="entypo star"></span>
<span class="entypo thumbsup"></span>
<span class="entypo conversation"></span>
<span class="entypo comment"></span>
<span class="entypo rightquote"></span>
<span class="entypo printer"></span>
<span class="entypo bell"></span>
<span class="entypo brokenlink"></span>
<span class="entypo flag"></span>
<span class="entypo gear"></span>
<span class="entypo flashlight"></span>
<span class="entypo trophy"></span>
<span class="entypo tag"></span>
<span class="entypo camera"></span>
<span class="entypo moon"></span>
<span class="entypo palette"></span>
<span class="entypo envato"></span>
<span class="entypo musicnote"></span>
<span class="entypo bag"></span>
<span class="entypo airplane"></span>
<span class="entypo lifesaver"></span>
<span class="entypo rings"></span>
<span class="entypo eye"></span>
<span class="entypo clock"></span>
<span class="entypo microphone"></span>
<span class="entypo calender"></span>
<span class="entypo bolt"></span>
<span class="entypo hourglass"></span>
<span class="entypo rss"></span>
<span class="entypo signal"></span>
<span...

CSS

.entypo{font-family:'EntypoRegular'; font-size:60px; content:'\0050'; margin-left:5px; position:relative; top:1px;}

.entypo.phone:before{ content:'\0021'; }
.entypo.smartphone:before{ content:'\0022'; }
.entypo.mouse:before{ content:'\0023'; }
.entypo.roadsign:before{ content:'\0024'; }
.entypo.mail:before{ content:'\0025'; }
.entypo.write:before{ content:'\0026'; }
.entypo.attachment:before{ content:'\0027'; }
.entypo.back:before{ content:'\0028'; }
.entypo.doubleback:before{ content:'\0029'; }
.entypo.forward:before{ content:'\002A'; }
.entypo.user:before{ content:'\002B'; }
.entypo.usergroup:before{ content:'\002C'; }
.entypo.adduser:before{ content:'\002D'; }
.entypo.profie:before{ content:'\002E'; }
.entypo.newwindow:before{ content:'\002F'; }
.entypo.mappin:before{ content:'\0030'; }
.entypo.map:before{ content:'\0031'; }
.entypo.compass:before{ content:'\0032'; }
.entypo.compasshand:before{ content:'\0033'; }
.entypo.crosshair:before{ content:'\0034'; }
.entypo.link:before{ content:'\0035'; }
.entypo.heart:before{ content:'\0036'; }
.entypo.star:before{ content:'\0037'; }
.entypo.thumbsup:before{ content:'\0038'; }
.entypo.conversation:before{ content:'\0039'; }
.entypo.comment:before{ content:'\003A'; }
.entypo.rightquote:before{ content:'\003B'; }
.entypo.printer:before{ content:'\003C'; }
.entypo.bell:before{ content:'\003D'; }
.entypo.brokenlink:before{ content:'\003E'; }
.entypo.flag:before{ content:'\003F'; }
.entypo.gear:before{ content:'\0040'; }
.entypo.flashlight:before{ content:'\0041'; }
.entypo.trophy:before{ content:'\0042'; }
.entypo.tag:before{ content:'\0043'; }
.entypo.camera:before{ content:'\0044'; }
.entypo.moon:before{ content:'\0045'; }
.entypo.palette:before{ content:'\0046'; }
.entypo.envato:before{ content:'\0047'; }
.entypo.musicnote:before{ content:'\0048'; }
.entypo.bag:before{ content:'\0049'; }
.entypo.airplane:before{ content:'\004A'; }
.entypo.lifesaver:before{ content:'\004B'; }
.entypo.rings:before{ content:'\004C';...