JSFiddle - React, Tailwind, and code Playground
by abang ichal
HTML
<center><span style="font:200% Impact;color:#c4ff6b;text-shadow:1px 1px;border-top:solid 4px #c4ff6b;">Terserah Mau Diapain</span><br/><span style="font:100% Arial;color:#c4ff6b;">No Images No Javascript</span><br/><br/></center>
<center>
<div id='poster1'>
<div class='pbesar'>P</div>
<div class='wajah'>
<div class='odua'>ÔÔ</div>
<div class='duak'>)</div></div>
</div>
<br/>
<div id='poster2'>
<div class='gdua'>- -</div>
<div class='hidung'>.</div>
<div class='mulut'>
<div class='gigiatas'>]</div>
<div class='gigibawah'>[</div>
</div>
</div>
<br/>
<div id='poster3'>
<div class='odua'>ÒØ</div>
<div class='duak'>`</div>
<div class='garis'>(</div>
</div>
<br/>
<div id='poster4'>
<div class='patas'>^ ^</div>
<div class='kotas'>'</div>
<div class='garis'>D</div>
</div>
<br/>
<div id='poster5'>
<div class='bbesar'>B</div>
<div class='katas'>`</div>
<div class='duak'>`</div>
<div class='garis'>\</div>
</div>
<br/>
<div id='poster6'>
<div class='dbesar'>D</div>
<div class='lkecil'>l</div>
<div class='duap'>Ø Ø</div>
<div class='garis'>]</div>
</div>
<br/>
<div id='poster7'>
<div class='muka'>
<div class='patak'>ſ</div>
<div class='kotas'>..</div>
<div class='mulut'>/</div></div>
<div class='jaz'>v</div>
</div>
<br/>
<div id='poster8'>
<div class='dbesar'>D</div>
<div class='lkecil2'>l</div>
<div class='duaq'>Q Q</div>
<div class='garis'>~</div>
</div>
<br/>
<div id='poster9'>
<div class='odua'>ÒÓ</div>
<div class='lidah'>
<div class='duag'>]</div>
<div class='dbesar'>D</div>
<div class='garis'>-</div></div>
</div>
<br/>
<div id='poster10'>
<div class='odua'>ÕÕ</div>
<div class='duak'>`</div>
<div class='garis'>(</div>
</div>
</center>CSS
body{color:black;background:#c4ff6b;background: -webkit-gradient(radial, center center, 0, center center, 460, from(#c4ff6b), to(#2F2727));background: -webkit-radial-gradient(circle, #c4ff6b, #2F2727);background: -moz-radial-gradient(circle, #c4ff6b, #2F2727);background: -ms-radial-gradient(circle, #c4ff6b, #2F2727);}
#poster1, #poster2, #poster3, #poster4, #poster5, #poster6, #poster7, #poster8, #poster9, #poster10{width:300px;height:400px;position:relative;overflow:hidden;display:block;}
#poster1::before, #poster2::before, #poster3::before, #poster4::before, #poster5::before, #poster6::before, #poster7::before, #poster8::before, #poster9::before, #poster10::before{content:'Blog ARS';position:absolute;bottom:0px;right:3px;font:bold 100% Arial}
#poster1{background:grey;background: -webkit-gradient(radial, center center, 0, center center, 460, from(grey), to(#2F2727));background: -webkit-radial-gradient(circle, grey, #2F2727);background: -moz-radial-gradient(circle, grey, #2F2727);background: -ms-radial-gradient(circle, grey, #2F2727);border:inset 15px grey;}
#poster1 .pbesar{position:absolute;font:1600%/0px Arial;top:130px;left:96px;-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-o-transform: rotate(-90deg);}
#poster1 .wajah{left:90px;top:230px;position:relative;}
#poster1 .wajah .odua{font:400%/0px Arial;left:0px;top:0px;position:absolute;}
#poster1 .wajah .duak{-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);-o-transform: rotate(90deg);position:absolute;left:45px;top:60px;font:500%/0px Arial;}
#poster2{background:brown;background: -webkit-gradient(radial, center center, 0, center center, 460, from(brown), to(#2F2727));background: -webkit-radial-gradient(circle, brown, #2F2727);background: -moz-radial-gradient(circle, brown, #2F2727);background: -ms-radial-gradient(circle, brown, #2F2727);border:inset 15px brown;}
#poster2 .gdua{font:1200%/0px Arial;left:60px;top:100px;position:absolute;}
#poster2 .hidung{font:1200%/0px...