JSFiddle - React, Tailwind, and code Playground
by est vavivu
HTML
<div id='reko'>
<div class='rekomendasi'>
<h2>NEW ANIME SERIES</h2>
<div class='listreko'>
<div class='boxreko'>
<div class='gambar'>
<a href='/search/label/Akame%20ga%20Kill'><img src='http://cdn.myanimelist.net/images/anime/5/64581.jpg' style='width: 148px; height: 209px;'/><h2>Akame ga Kill!</h2></a></div></div>
<div class='boxreko'>
<div class='gambar'>
<a href='/search/label/Sword%20Art%20Online'><img src='http://cdn.myanimelist.net/images/anime/11/65185.jpg' style='width: 148px; height: 209px;'/><h2>Sword Art Online II</h2></a></div></div>
<div class='boxreko'>
<div class='gambar'>
<a href='/search/label/Tokyo%20Ghoul'><img src='http://cdn.myanimelist.net/images/anime/5/64449.jpg' style='width: 148px; height: 209px;'/><h2>Tokyo Ghoul</h2></a></div></div>
<div class='boxreko'>
<div class='gambar'>
<a href='/search/label/Haikyuu%21%21'><img src='http://cdn.myanimelist.net/images/anime/4/60431.jpg' style='width: 148px; height: 209px;'/><h2>Haikyuu!!</h2></a></div></div>
<div class='boxreko'>
<div class='gambar'>
<a href='/search/label/Psycho%20-%20Pass'><img src='http://cdn.myanimelist.net/images/anime/9/66879.jpg' style='width: 148px; height: 209px;'/><h2>Psycho - Pass</h2></a></div></div>
<div class='boxreko'>
<div class='gambar'>
<a href='/search/label/Naruto%20Shippuden'><img src='http://cdn.myanimelist.net/images/anime/13/11194.jpg' style='width: 148px; height: 209px;'/><h2>Naruto Shippuden</h2></a></div></div>
<div class='boxreko'>
<div class='gambar'>
<a href='/search/label/Gintama'><img src='http://cdn.myanimelist.net/images/anime/13/50359.jpg' style='width: 148px; height: 209px;'/><h2>Gintama</h2></a></div></div>
<div class='boxreko'>
<div class='gambar'>
<a href='/search/label/Fate%20%2F%20Stay%20Night%20Unlimited%20Blade%20Works'><img src='http://cdn.myanimelist.net/images/anime/10/58805.jpg' style='width: 148px; height: 209px;'/><h2>Fate / Stay Night Unlimited Blade Works</h2></a></div></div>
<div class='boxreko'>
<div class='gambar'>
<a...CSS
#reko {position: relative; height: auto; overflow: hidden;}
.rekomendasi {margin: 10px;}
.rekomendasi h2 {box-shadow: none;background-color: #2e6df4;background-image: -moz-linear-gradient(center top , #2e6df4, #2e6df4);border: 1px solid transparent;color: #fff;text-shadow: 0px 1px rgba(0, 0, 0, 0.1);border-radius: 2px;font:bold 13px Arial;text-align: left;padding: 5px 10px;margin-bottom: 5px;}
.listreko {height: auto;}
.gambar {float: left;margin: 4px 7px 0 0px;position: relative;}
.gambar img {width: 148px;height: 209px;padding: 0px;border: 1px solid #777;}
.rekomendasi .gambar h2 {margin-bottom:6px;position: absolute;bottom: 0px;font-size: 12px;text-align: center;width: 142px;background: none repeat scroll 0% 0% #1D1D1D;opacity: 0.7;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #fff;padding: 3px;}
.clear {clear: both;}
.breadcrumbs {border:1px solid #C4C4C4; border-top-color:#E4E4E4; border-left-color:#E4E4E4; color:#424242 !important; text-align:left; text-shadow:0 -1px 0 white; text-decoration:none; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; background:#EDEDED; background:-webkit-gradient( linear,left top,left bottom,color-stop(.2,white),color-stop(1,#E5E5E5) ); background:-moz-linear-gradient( center top,white 20%,#E5E5E5 100% );padding:5px 10px; margin:0 10px 10px; font-size:85%; line-height: 1.4em;}
h2{line-height:1.4em;text-transform:none;color:#000;margin:.5em 0 .25em}
h3.date-header{text-transform:none;font: 11px Arial;color:#0030cb;line-height:1.2em;margin:.1em 0}
.post{background:#fff;margin:5px 5px 15px;padding:5px 15px 15px;}
.rilatest {margin: 0px 10px 10px 10px;}
.rilatest h2 {box-shadow: none;background-color: #e77522;background-image: -moz-linear-gradient(center top , #DD4B39, #e77522);border: 1px solid transparent;color: #fff;text-shadow: 0px 1px rgba(0, 0, 0, 0.1);border-radius: 2px;font:bold 13px Arial;text-transform: uppercase;text-align: left;padding: 5px 10px;margin-bottom: 5px;}
.post...