JSFiddle - React, Tailwind, and code Playground
by Alexandr Loginov
HTML
<div class="table_cell_top center_cell">
<div class="global_bread">
<a href="#">Главная</a> / <span>Каталог шин</span> / <span>Шина кама ирбис 502</span>
</div>
<form action="#" class="select_tires">
<p>Изменить автопроизводителя и автомобиль</p>
<select>
<option value="1">item-1</option>
<option value="2">item-2</option>
<option value="3">item-3</option>
<option value="4">item-4</option>
<option value="5">item-5</option>
</select>
<select>
<option value="1">item-1</option>
<option value="2">item-2</option>
<option value="3">item-3</option>
<option value="4">item-4</option>
<option value="5">item-5</option>
</select>
<button>Применить</button>
</form>
<div id="selection_mod">
<h1>VAZ 21053 Classic</h1>
<div class="clear"></div>
<div class="item_mod item_mod_left">
<img class="auto" src="images/a1.jpg" alt="">
<div>
<p>Выберите год и модификацию:</p>
<select>
<option value="1" disabled selected="selected">Год выпуска</option>
<option value="2">item-2</option>
<option value="3">item-3</option>
<option value="4">item-4</option>
<option value="5">item-5</option>
</select>
<select>
<option value="1" disabled selected="selected">Модификаций нет</option>
</select>
<table>
<tr>
<th colspan="2">Справочные данные по автомобилю</th>
</tr>
<tr>
<td>Сверловка</td>
<td>4x100</td>
</tr>
<tr>
<td>Ступица</td>
<td>60,1</td>
</tr>
<tr>
<td>Крепеж</td>
<td>Болт: Болт: 12*1</td>
</tr>
</table>
</div>
</div>
<div class="item_mod item_mod_right">
<p class="del">
Чтобы посмотреть полный каталог литых дисков, дисков Реплика, Replay, LegeArtis, Roner для ВАЗ Ларгус, под картинкой выберите из...
CSS
#selection_mod {
overflow: hidden;
width: 100%;
padding-left: 20px;
}
#selection_mod h1 {
font-size: 22px;
margin: 10px 0;
}
#selection_mod .item_mod {
float: left;
width: 50%;
}
#selection_mod .item_mod_left {
padding-right: 10px;
}
#selection_mod .item_mod_left img.auto {
width: 300px;
}
#selection_mod .item_mod_left div p {
margin-bottom: 10px;
color: red;
}
#selection_mod .item_mod_left div select {
border: 1px solid #999;
}
#selection_mod .item_mod_left div table {
width: 100%;
margin-top: 20px;
}
#selection_mod .item_mod_left div table tr th {
text-align: left;
font-size: 18px;
padding: 5px 0;
padding-left: 10px;
}
#selection_mod .item_mod_left div table tr td {
padding: 10px 0;
padding-left: 10px;
border-top: 1px solid #CCC;
}
#selection_mod .item_mod_right {
padding-left: 10px;
}
#selection_mod .item_mod_right p.del {
color: #999;
}
#selection_mod .item_mod_right table {
width: 100%;
}
#selection_mod .item_mod_right table tr td {
width: 50%;
padding: 5px 0 5px 10px;
overflow: hidden;
}
#selection_mod .item_mod_right table tr td[colspan="2"] {
padding: 5px 0 5px 0;
}
#selection_mod .item_mod_right table tr td[colspan="2"] p {
background: #C3C3C3;
color: #FFF;
padding: 5px 0;
text-align: center;
border-radius: 5px 5px 0 0;
}
#selection_mod .item_mod_right table tr td a {
color: red;
}
#selection_mod .item_mod_right table thead tr td {
height: 50px;
vertical-align: middle;
}
#selection_mod .item_mod_right table thead tr td img {
margin-right: 10px;
float: left;
}
#selection_mod .item_mod_right table thead tr td em {
display: block;
line-height: 30px;
}
#selection_mod table.entire_selection {
width: 100%;
margin-top: 25px;
}
#selection_mod table.entire_selection a {
color: red;
}
#selection_mod table.entire_selection a.button {
padding: 5px 5px;
background: #f40000;
color: #FFF !important;
text-decoration: none;
}
#selection_mod table.entire_selection a.button:hover...