JSFiddle - React, Tailwind, and code Playground

by Fansublogger

HTML

<div class="ongoinginfo">
<a href="URL Anime">
<img src="http://wardhanime.net/wp-content/uploads/2014/10/64911.jpg" alt="Akame ga Kill!" height="338" width="225">
<div class="onleft">
<h2><a href="URL Anime">Madan O no Ou to Vanadis</a></h2>
<div class="kiri"><span>Nama Lain Anime</span></div>
<div class="kiri">Jenis Anime</div>
<div class="kiri">Genre Anime</div>
<div class="kiri">Total Episode: Isi Sendiri</div>
<div class="cuplik"><p>Sinopsis Anime…</p>
</div>
</div>
<div class="ongoinginfo">
<a href="URL Anime">
<img src="http://wardhanime.net/wp-content/uploads/2014/10/66705.jpg" alt="Akame ga Kill!" height="338" width="225">
<div class="onleft">
<h2><a href="URL Anime">Judul Anime</a></h2>
<div class="kiri"><span>Nama Lain Anime</span></div>
<div class="kiri">Jenis Anime</div>
<div class="kiri">Genre Anime</div>
<div class="kiri">Total Episode: Isi Sendiri</div>
<div class="cuplik"><p>Sinopsis Anime…</p>
</div>
</div>

CSS

.ongoinginfo {
    overflow: hidden;
    float: left;
    width: 346px;
    height: 139px;
    margin-right: 15px;
    margin-bottom: 15px;
}
.ongoinginfo img {
    width: 105px;
    padding: 2px;
    border: 1px solid #DDD;
    height: 133px;
    margin-right: 5px;
    float: left;
}
.onleft {
    overflow: hidden;
    position: relative;
}
.onleft h2 {
    text-transform: none;
    font-size: 13px;
    margin: 0px;
    font-family: helvetica;
    border-bottom: 0px none;
    padding: 0px;
}
.onleft .kiri {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 11px;
    color: #696969;
}
.onleft .kiri span a {
    color: #696969;
}
.onleft .kiri a {
    color: #696969;
}
.cuplik {
    color: #696969;
    font-size: 11px;
}