JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html> 
<head> 
<title></title> 
<meta charset="utf-8">
<style>
html, body {width: 100%; height: 100%; padding: 0; margin: 0;}
#wrap{
height:200px;
        background: #9d9582;
    background: -o-linear-gradient(#eeece6, #9d9582);
    background: -moz-linear-gradient(#eeece6, #9d9582);
    background: -webkit-linear-gradient(#eeece6, #9d9582);
    background: linear-gradient(#eeece6, #9d9582);
}
.text {
font-family: Calibri;    
color: #bd2026;
    font-size: 72px;
    font-weight: bold;
margin-left: 200px;
line-height:180px;
text-align: left;
text-shadow:0 -1px 1px rgba(0, 0, 0, 0.5), -1px 0 1px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(255, 255, 255, 0.75), 1px 0 2px rgba(255, 255, 255, 0.75);     
}
.main, .shadow, .light {position: absolute; top: 50px; left: 0; -moz-transform: scale(1.5, 1.5);}
.main div, .shadow div, .light div {
    height: 5px;
    position: absolute;
    border-radius: 5px;
}
.main div {background: #18578a;}
.shadow div {background: black; box-shadow: -0.5px -0.5px 1px rgba(0, 0, 0, 0.75);}
.light div {background: white; box-shadow: 0.5px 0.5px 1px rgba(255, 255, 255, 0.75);}
#net {
    float: left;  position: relative;
}
</style>
</head> 
<body> 
<div id="wrap">

<div id="net">
    <div class="light">
        <div style="width: 90px; top: 25px; left: 25px; -moz-transform: rotate(-50deg); -moz-transform-origin: center center"></div>
        <div style="width: 90px; top: 25px; left: 25px; -moz-transform: rotate(10deg); -moz-transform-origin: center center"></div>
        <div style="width: 90px; top: 25px; left: 25px; -moz-transform: rotate(70deg); -moz-transform-origin: center center"></div>
        <div style="width: 35px; top: 35px; left: 25px; -moz-transform: rotate(72deg); -moz-transform-origin: center center"></div>
        <div style="width: 35px; top: 15px; left: 80px; -moz-transform: rotate(72deg); -moz-transform-origin: center center"></div>
        <div style="width: 38px; top: -5px; left: 57px; -moz-transform:...