JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
 <head>
   <title>Product page</title>
   <meta charset="utf-8">
   <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
<div class="wrapper">
<header>header</header>

<section class="main">
	
<h1 class="product_name">Product name</h1>

<section class="photo">
<img src="image1.png">
<ul class="rotator">
<li><img class="mini" src="image1.png"></li>
<li><img class="mini" src="image1.png"></li>
<li><img class="mini" src="image1.png"></li>
<div class="clear_fix"></div>
</ul>
</section>
<section class="other">


<table>
<tr>

</tr>
</table>

<div class="product_price"> Product price <span class="price">100$</span></div>
<div class="count">

Count <input type="number">
</div>
<div class="shipping">
Shipping
<select>
<option>New Post</option>
</select>

<div class="shipping_price">  Shipping price <span class="price">5$</span> </div>


</div>

<div class="total_price">  Total price <span class="price">105$</span> </div>

<div class="confirm">Add to busket</div>

</section>
<div class="clear_fix"></div>

</section>

</div>
 </body> 
</html>

CSS

* {margin: 0; padding: 0;}

.clear_fix {
	clear: both;
}

body{
	background: #eee;
}

header {
	width: 100%;
	height: 150px;
	background: lightblue;
	margin-bottom: 20px;
}

.wrapper {
	width: 960px;
	margin: 0 auto;
}

section.main {
	box-sizing: border-box;
	padding: 10px;
	width: 100%;
	background: #fbb;
}

h1.product_name {
	margin: 10px;
	font-size: 16px;
	font-family: Arial;
}

section.photo {
	height: 300px;
	width: 250px;
	float: left;
	background: orange;
}

section.photo>img {
	display: block;
	height: 250px;
	width: auto;
	margin: 0 auto;
	margin-top: 5px;
}

.rotator {
	width: 200px;
	margin: 5px auto;
	text-align: center;
	position: relative;
}

.rotator:before {
	content: '';
	width: 25px;
	height: 25px;
	background-image: url('arrow_before.png');
	position: absolute;
	top: 7px;
	right: 187px;
}

.rotator:after {
	content: '';
	width: 25px;
	height: 25px;
	background-image: url('arrow_after.png');
	position: absolute;
	top: 7px;
	right: -12px;
}

.rotator li {
	display: inline;
	list-style-type: none;
	margin: 0 5px;
}

.mini{
	height: 35px;
}

section.other {
	box-sizing: border-box;
	height: 300px;
	width: auto;
	padding: 10px;
	font-size: 20px;
	margin-left: 10px;
	float: left;
	background: yellow;
}

.product_price {
}

.price {
	font-weight: bold;
}