JSFiddle - React, Tailwind, and code Playground

HTML

<table class="product_table">
					<tr>
						<td class="check_td"><input type="checkbox" name="products" value="<?php echo $row['id']; ?>"</td>
						<td class="product_td">
							<div class="product">
								<div class="thumbnail">
									<img class="img" src="<?php echo $row['img_path'].'/'.$row['img_name']; ?>">
								</div>
								<div class="name">
safvsadgvsegvswegegwsegwe		safvsadgvsegvswegegwsegwe								
	 safvsadgvsegvswegegwsegwe								safvsadgvsegvswegegwsegwe								

					
</div>							
								<div class="list">
									<ul>
										<li>
											ProdavaÄŤ: <a href="" style="color:black;"><strong><?php echo $data['username']; ?></strong></a>
											(<a href="">98% <img src="img/stars/star.png" width="18px" style="margin-bottom:-3px;"/></a>)
										</li>
										<li><?php echo $address['city']; ?></li>
									</ul>
								</div>
								<div class="comm">
									<img src="icons/comment.png" width="23px"/>(6)
								</div>
								<div class="id"><?php echo $row['id']; ?></div>
							</div>
						</td>
						<td class="price_td">
							<ul>
								<li style="font-size:23px;">
									<strong><?php echo $row['price']; ?> kn</strong>
								</li>
								<li><br>
									<ul class="ship">
										<li>
											<?php echo $row['ship']; ?>
										</li>
										<li>
											<strong><?php echo $row['ship_price']; ?> kn</strong>
										</li>											
									</ul>
								</li>
							</ul>
						</td>
						<td class="button_td"><button class="menu_buttons1">Istaknite oglas &raquo;</button></td>
					</tr>		
		</table>

CSS

.product{
	position:relative;
	width:100%;
	margin:0 auto;
	float:left;
}

input[type=checkbox]
{
  -ms-transform: scale(1.5); /* IE */
  -moz-transform: scale(1.5); /* FF */
  -webkit-transform: scale(1.4); /* Safari and Chrome */
  -o-transform: scale(1.5); /* Opera */
}

.thumbnail{
	float:left;
	width:20%;
	height:150px;
	margin:10px;
	margin-bottom:5px;
	display:inline-block;
	position:relative;
}

.img{
	width:auto;
	max-width:100%;
    height:auto;
    max-height:100%;
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	margin: auto;
}

.thumbnail1{
	float:left;
	width:20%;
	height:120px;
	margin:10px;
	margin-bottom:5px;
	display:inline-block;
	position:relative;
}

.img1{
	width:auto;
	max-width:100%;
    height:auto;
    max-height:100%;
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	margin:0 auto;
}

.comm{
	position:absolute;
	bottom:0;
	left:20%;
	margin:5px 5px 5px 5px;
	padding-left:15px;
}

.comm img{
	cursor:pointer;
}

.id{
	position:absolute;
	right:0;
	bottom:0;
	padding:5px;
}

.expire{
	position:absolute;
	right:10%;
	bottom:0;
	padding:5px;
}

.red{
	color:red;
}

.name{
	display:block;
	float:left;
	margin:6px 0 10px 0;
	width:75%;
	max-width:75%;
	font-size:20px;
	color:black;
	font-weight: 900;
	white-space: nowrap;
	overflow:hidden;
	text-overflow: ellipsis;
}

.name:hover{
	text-decoration:underline;
	cursor:pointer;
}

.check_td{
	width:3%;
	text-align:center;
}

.product_td{
	width:60%;
	border-left:5px solid #EBEBEB;
}

.price_td{
	text-align:center;
	width:20%;
	border-left:5px solid #EBEBEB;
}

.price_td ul{
	list-style:none;
	margin:0;
	padding:0;
}

.button_td{
	width:15%;
	border-left:5px solid #EBEBEB; 
	text-align:center;
}

.list{
	float:left;
}

.list ul{
	list-style:none;
	padding:0;
}