JSFiddle - React, Tailwind, and code Playground

by Dedi Wibisono

HTML

<div id="all">
  <div class="left-side">
    <img src="http://lorempixel.com/image_output/nightlife-q-c-480-480-8.jpg" alt="" width="150">
  </div>

  


<div class="right-side">
  <span class="nav"><a href="#">informasi</a></span>
  <span class="nav"><a href="#">ulasan</a></span>
  <span class="nav"><a href="#">diskusi</a></span>
</div>

<div class="clear"></div>

<table class="info">
  <tr>
    <td><b>Lihat</b></td>
    <td>120</td>
    <td><b>Berat</b></td>
    <td>10 kg</td>
  </tr>
  
  <tr>
    <td><b>Terjual</b></td>
    <td>2</td>
    <td><b>Asuransi</b></td>
    <td>opsional</td>
  </tr>
</table>
</div>

CSS

#all{
  width:100%;
  border:1px solid blue;
  padding:10px;
}

.left-side{
 float:left;
}

.right-side{
  text-align:center;
	--border:1px solid blue;
	--float:left;
  display:inline-block;
}

.nav{
  border: 1px solid red;
  padding: 10px 20px;
}

.nav a{
  text-decoration:none;
}

.nav:hover{
  border-top:2px solid green;
}

.clear{
  clear: both;
}

.info{
  border:1px solid red;
  width:60%;
}