JSFiddle - React, Tailwind, and code Playground

by Maz Soma

HTML

<div id="dhf">
<div class="dhf-box1">
<div class="dhf-mid"></div>
<div class="dhf-d"></div>
<div class="dhf-e"></div>
<div class="dhf-f"></div>
<div class="dhf-g"></div>
<div class="dhf-h"></div>
<div class="dhf-i"></div>
<div class="dhf-j"></div>  
<div id="glass"></div>
</div></div>
<div id="ribbon"><a href="http://www.blogsmz.com">By Soma Anggoro</a></div>
<h2 class="judul">SMZ - Somazing Blog</h2><a class="credit" href="http://www.dhf.web.id/">Logo and CSS3 Experiments are Copyrighted to Soma Anggoro</a>

CSS

* {
  margin: 0px;
  padding: 0px;
  -webkit-transition: all 0.26s ease-out;
  -moz-transition: all 0.26s ease-out;
  -ms-transition: all 0.26s ease-out;
  -o-transition: all 0.26s ease-out;
  transition: all 0.26s ease-out;
}
body {
  background:#114287;
  background:-webkit-radial-gradient(center top,circle,#2C5DA0,#003171);
  background:-moz-radial-gradient(center top,circle,#2C5DA0,#003171);
  background:-ms-radial-gradient(center top,circle,#2C5DA0,#003171);
  background:-o-radial-gradient(center top,circle,#2C5DA0,#003171);
  background:radial-gradient(center top,circle,#2C5DA0,#003171);
  height:570px;
  text-align:center;
}

html {
  overflow:hidden;
}

a {
  color:#fff;
  text-decoration:none;
}

a:hover {
  color:#eee;
}

h2.judul {
  position: relative;
  left: 0px;
  width: 560px;
  margin: 80px auto 0px;
  font: bold 40px 'Courier MS',Monospace;
  text-shadow: 0 0 1px rgba(0,0,0,0.4);
  color: #666;
}

#dhf {
  position: relative;
  width: 200px;
  height: 200px;
  left: 20px;
  margin: 100px auto 0;
}

.dhf-box1 {
  width: 180px;
  height: 220px;
  background: #000;
  -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.7);
  -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.7);
  box-shadow: 0 1px 5px rgba(0,0,0,0.7);
}

.dhf-mid {
  width: 180px;
  height: 180px;
  background: #4861a3;
  background: -webkit-linear-gradient(top, #EA0303, #4861a3);
  background: -moz-linear-gradient(top, #EA0303, #4861a3);
  background: -ms-linear-gradient(top, #EA0303, #4861a3);
  background: -o-linear-gradient(top, #EA0303, #4861a3);
  background: linear-gradient(top, #EA0303, #4861a3);
  border-left: 20px solid #000;
  border-right: 20px solid #000;
  position: absolute;
  top: 20px;
  left: -20px;
  -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.7);
  -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.7);
  box-shadow: 0 1px 5px rgba(0,0,0,0.7);
}

.dhf-d {
  position: absolute;
  width: 20px;
  height: 90px;
  top: 55px;
  left: 80px;
  background: transparent;
  border-left: 20px solid...