JSFiddle - React, Tailwind, and code Playground

by denzdii

HTML

<div class="container">
<div class="row">
<div class="sixcol">
<div class="judul">
Typography Poster by : by doodoodle</div>
<a href="http://doodoodle.deviantart.com/" target="_blank"><img border="0" src="http://3.bp.blogspot.com/-72uGjVIYALI/Tz1CWRq1l0I/AAAAAAAAHVI/heVioRlR0xA/s1600/tipo-2.jpg" /></a> </div>
<div class="sixcol last">
<div class="judul">
Typography Poster by : bombermandz</div>
<a href="http://www.blogger.com/bombermandz.deviantart.com" target="_blank"><img border="0" src="http://1.bp.blogspot.com/-OUZ4RagUewE/Tz1CbzCw-DI/AAAAAAAAHVo/m7smQKoOSP4/s1600/tipo-3.jpg" /></a> </div>
</div>
<div class="row">
<div class="sixcol">
<div class="judul">
Typography Poster by : sikahster</div>
<a href="http://sikahster.deviantart.com/" target="_blank"><img border="0" src="http://2.bp.blogspot.com/-bjjMatKSmo0/Tz1CJY4qljI/AAAAAAAAHT4/K1KMCVpuKK4/s1600/tipo-1.jpg" /></a></div>
<div class="sixcol last">
<div class="judul">
Typography Poster by : by JHallGraphics</div>
<a href="http://jhallgraphics.deviantart.com/" target="_blank"><img border="0" src="http://3.bp.blogspot.com/-uhZNGLBOB3E/Tz1CT36os8I/AAAAAAAAHU4/KRBt-JgRXzA/s1600/tipo-18.jpg" /></a></div>
</div>
<div class="row">
<div class="sixcol">
<div class="judul">
Typography Poster by : by cheesyGFX</div>
<a href="http://cheesygfx.deviantart.com/" target="_blank"><img border="0" src="http://2.bp.blogspot.com/-Ku1MIO6BZGE/Tz1CdeLOPzI/AAAAAAAAHVw/3HsQ0FAMQSM/s1600/tipo-4.jpg" /></a> </div>
<div class="sixcol last">
<div class="judul">
Typography Poster by : gorkisview</div>
<a href="http://gorkisview.deviantart.com/" target="_blank"><img border="0" src="http://4.bp.blogspot.com/-kkRFMPaOBxM/Tz1CelQj1II/AAAAAAAAHV4/KBZLNQo8IwE/s1600/tipo-5.jpg" /></a> </div>
</div>
<div class="row">
<div class="sixcol">
<div class="judul">
Typography Poster by : by cheesyGFX</div>
<a href="http://cheesygfx.deviantart.com/" target="_blank"><img border="0"...

CSS

.container{padding-left:20px;padding-right:20px;}.header{display:block;background:none;-webkit-border-radius:none;-moz-border-radius:none;border-radius:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}.header .nav a{font:bold 12px/12px verdana,'Helvetica Neue',arial,sans serif;color:#90797F;text-align:center;text-shadow:none;border-right:1px solid #3C3C3C;margin:0 auto;padding:123px 20px 8px;}.header .nav{border-bottom:4px solid #3C3C3C;padding:123px 20px 8px;}#toggle-container h2.active,#toggle-container h2{border:none;height:10px;margin-top:20px;padding:0;}a:link,a:visited,a:active,#header #nav a,a:hover{text-decoration:none;color:#333;}html,.footerwrap{color:#333;background:#0C0A0A;}.footergrd h1{color:#555;}.container img,.container .judul,#toggle-container h2.active,#toggle-container h2{border:1px solid rgba(255,255,255,0.03);border-top-color:rgba(255,255,255,0.04);border-bottom-color:rgba(255,255,255,0.01);box-shadow:0 5px 12px rgba(0,0,0,.7);-moz-box-shadow:0 5px 12px rgba(0,0,0,.7);-webkit-box-shadow:0 5px 12px rgba(0,0,0,.7);-webkit-transition:all .15s ease-in-out;-webkit-transform-origin:50% 1px;}.container img{max-width:95.4%;height:auto;margin:0 auto;padding:2%;}.judul{max-width:100%;text-transform:uppercase;color:#A73520;text-shadow:0 1px 2px hsla(1,1%,1%,.2);text-align:center;font:bold 14px arial,sans serif;margin:0 auto;padding:5px;}.row{width:100%;max-width:1140px;min-width:755px;overflow:hidden;margin:0 auto;padding:20px 0;}.row:before{content:"";display:block;border:11px solid #90797F;border-top:1px solid #3C3C3C;border-bottom:1px solid #1D191A;-moz-box-shadow:0 0 2px #171415;-webkit-box-shadow:0 0 2px #171415;box-shadow:0 0 2px #171415;margin:-15px 0 0;}.sixcol{margin-right:3.8%;float:left;min-height:1px;}.row .sixcol{width:48%;}.last{margin-right:0;}