JSFiddle - React, Tailwind, and code Playground
HTML
<div class="komentar">
<div class="komentar__item">
<div class="komentar__gambar">
<img src="https://api.adorable.io/avatars/100/sekolahkoding1@adorable.io.png" alt="Gambar Avatar">
</div>
<div class="komentar__konten">
<h3 class="komentar__nama">Nama Anda</h3>
<p class="komentar__paragraph">Have no fear, they're still there! We updated our demo to showcase our generated avatars, but the original avatars are still in the same place.</p>
</div>
</div>
<div class="komentar__item">
<div class="komentar__gambar">
<img src="https://api.adorable.io/avatars/100/sekolahkoding2@adorable.io.png" alt="Gambar Avatar">
</div>
<div class="komentar__konten">
<h3 class="komentar__nama">Nama Anda</h3>
<p class="komentar__paragraph">Have no fear, they're still there! We updated our demo to showcase our generated avatars, but the original avatars are still in the same place.</p>
</div>
</div>
<div class="komentar__item">
<div class="komentar__gambar">
<img src="https://api.adorable.io/avatars/100/sekolahkoding3@adorable.io.png" alt="Gambar Avatar">
</div>
<div class="komentar__konten">
<h3 class="komentar__nama">Nama Anda</h3>
<p class="komentar__paragraph">Have no fear, they're still there! We updated our demo to showcase our generated avatars, but the original avatars are still in the same place.</p>
</div>
</div>
</div>
CSS
@import url('https://fonts.googleapis.com/css?family=Overpass');
body {
font-family: 'Overpass', sans-serif;
}
p {
font-size: calc(14/16 * 100%);
}
.komentar {}
.komentar__item {
background-color: #34495E;
margin-bottom: 10px;
padding-top: 20px;
padding-bottom: 20px;
}
.komentar__item::after {
display: block;
clear: both;
content: '';
}
.komentar__gambar {
float: left;
width: 100px;
height: 100px;
padding-left: 20px;
}
.komentar__konten {
float: left;
padding-left: 20px;
box-sizing: border-box;
width: calc(100% - 120px);
}
.komentar__nama {
margin: auto auto 20px;
color: white;
}
.komentar__paragraph {
color: white;
margin-bottom: 0;
}