JSFiddle - React, Tailwind, and code Playground

by Daffa Aditya

HTML

<div class="box1">-webkit-box-shadow: 10px 5px 7px #222;<br/>
    -moz-box-shadow: 10px 5px 7px #222;<br/>
    box-shadow: 10px 5px 7px #222;<br/>
</div>
<div class="box2">-webkit-box-shadow: 0 10px 7px #222;<br/>
    -moz-box-shadow: 0 10px 7px #222;<br/>
    box-shadow: 0 10px 7px #222;<br/>
</div>
<div class="box3">-webkit-box-shadow: 10px 0 7px #222;<br/>
    -moz-box-shadow: 10px 0 7px #222;<br/>
    box-shadow: 10px 0 7px #222;<br/>
</div>
<div class="box4">-webkit-box-shadow: 0 0 7px #222;<br/>
    -moz-box-shadow: 0 0 7px #222;<br/>
    box-shadow: 0 0 7px #222;<br/>
</div>
<div class="box5">-webkit-box-shadow: 0 0 20px #222;<br/>
    -moz-box-shadow: 0 0 20px #222;<br/>
    box-shadow: 0 0 20px #222;<br/>
</div>
<div class="box6">-webkit-box-shadow: 0 0 20px #f10c0c;<br/>
    -moz-box-shadow: 0 0 20px #f10c0c;<br/>
    box-shadow: 0 0 20px #f10c0c;<br/>
</div>
<div class="box7">-webkit-box-shadow: inset 10px 5px 7px #222;<br/>
    -moz-box-shadow: inset 10px 5px 7px #222;<br/>
    box-shadow: inset 10px 5px 7px #222;<br/>
</div>
<div class="box8">-webkit-box-shadow: inset 0 0 20px #222;<br/>
    -moz-box-shadow: inset 0 0 20px #222;<br/>
    box-shadow: inset 0 0 20px #222;<br/>
</div>
<div class="box9">-webkit-box-shadow: inset 0 0 20px #f10c0c;<br/>
    -moz-box-shadow: inset 0 0 20px #f10c0c;<br/>
    box-shadow: inset 0 0 20px #f10c0c;<br/>
</div>
<div class="box10">-webkit-box-shadow: inset -10px -5px 0 #222;<br/>
    -moz-box-shadow: inset -10px -5px 0 #222;<br/>
    box-shadow: inset -10px -5px 0 #222;<br/>
</div>

CSS

.box1 {
    background:#e74c3c;
    width:400px;
    height:auto;
    padding:10px;
    -webkit-box-shadow: 10px 5px 7px #222;
    -moz-box-shadow: 10px 5px 7px #222;
    box-shadow: 10px 5px 7px #222;
    margin:10px;
    margin-bottom:35px;
}
.box2 {
    background:#1abc9c;
    width:400px;
    height:auto;
    padding:10px;
    -webkit-box-shadow: 0 10px 7px #222;
    -moz-box-shadow: 0 10px 7px #222;
    box-shadow: 0 10px 7px #222;
    margin:10px;
    margin-bottom:35px;
}
.box3 {
    background:#2ecc71;
    width:400px;
    height:auto;
    padding:10px;
    -webkit-box-shadow: 10px 0 7px #222;
    -moz-box-shadow: 10px 0 7px #222;
    box-shadow: 10px 0 7px #222;
    margin:10px;
    margin-bottom:35px;
}
.box4 {
    background:#3498db;
    width:400px;
    height:auto;
    padding:10px;
    -webkit-box-shadow: 0 0 7px #222;
-moz-box-shadow: 0 0 7px #222;
box-shadow: 0 0 7px #222;
    margin:10px;
    margin-bottom:35px;
}
.box5 {
    background:#9b59b6;
    width:400px;
    height:auto;
    padding:10px;
    -webkit-box-shadow: 0 0 20px #222;
-moz-box-shadow: 0 0 20px #222;
box-shadow: 0 0 20px #222;
    margin:10px;
    margin-bottom:35px;
}
.box6 {
    background:#34495e;
    width:400px;
    height:auto;
    padding:10px;
    -webkit-box-shadow: 0 0 20px #f10c0c;
-moz-box-shadow: 0 0 20px #f10c0c;
box-shadow: 0 0 20px #f10c0c;
    margin:10px;
    margin-bottom:35px;
}
.box7 {
    background:#f1c40f;
    width:400px;
    height:auto;
    padding:10px;
    -webkit-box-shadow: inset 10px 5px 7px #222;
-moz-box-shadow: inset 10px 5px 7px #222;
box-shadow: inset 10px 5px 7px #222;
    margin:10px;
    margin-bottom:35px;
}
.box8 {
    background:#e67e22;
    width:400px;
    height:auto;
    padding:10px;
    -webkit-box-shadow: inset 0 0 20px #222;
-moz-box-shadow: inset 0 0 20px #222;
box-shadow: inset 0 0 20px #222;
    margin:10px;
    margin-bottom:35px;
}
.box9 {
    background:#ecf0f1;
    width:400px;
    height:auto;
    padding:10px;
   ...