JSFiddle - React, Tailwind, and code Playground

by dafin defandaky

HTML

<div id="db">
<div class="db-kolor">
	<div class="db-tengah"></div>
	<div class="ngok"></div>
	<div class="sem"></div>
	<div class="sem joh"></div>
	<div class="datar"></div>
	<div id="kocone"></div>
</div>
</div>

CSS

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

.db-kolor{
width:180px;
height:220px;
background:red;
-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);
}
.db-tengah{
width:180px;
height:180px;
background:green;
background:-webkit-linear-gradient(top, #0099cc, #33cccc);
background:-moz-linear-gradient(top, #0099cc, #33cccc);
background:-ms-linear-gradient(top, #0099cc, #33cccc);
background:-o-linear-gradient(top, #0099cc, #33cccc);
background:linear-gradient(top, #0099cc, #33cccc);
border-left:20px solid red;
border-right:20px solid red;
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);
}
.ngok{
position:absolute;
width:100px;
height:40px;
top:100px;
left:20px;
background:transparent;
border-left:20px solid #369;
border-right:20px solid #369;
}
.sem{
position:absolute;
width:60px;
height:20px;
background:transparent;
border-left:20px solid darkorange;
border-right:20px solid darkorange;
top:60px;
left:40px;
}
.sem.joh{
bottom:40px;
top:auto;
border-left:20px solid #369;
border-right:20px solid #369;
}
.datar{
position:absolute;
width:60px;
height:20px;
background:#369;
left:60px;
bottom:20px;
}

#kocone{
position:absolute;
top:0px;
left:-20px;
z-index:100;
width:220px;
height:120px;
background:-webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0.35));
background:-moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0.35));
background:-ms-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0.35));
background:-o-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0.35));
background:linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0.35));
-webkit-border-radius:70px / 30px;
-moz-border-radius:70px / 30px;
border-radius:70px / 30px;
}