JSFiddle - React, Tailwind, and code Playground
by Ilhom Maksadkulov
HTML
<div class="cart-item group layout-center-cart" >
<div class="item-cart-clear">
<a href="#" class="">Убрать</a>
</div>
<div class="cart-item-image">
<div class="image">
<img src="./pictures/cat-pages-4/cat-pages-elsma.jpg" alt="">
</div>
</div>
<div class="cart-item-description">
<div class="description">
Постельное белье "Хоккеист. Сочи 2014" (семейный КПБ из 5 предметов, ранфорс, наволочки 50х70)
</div>
<div class="item-price">1 090 р.</div>
<form action="" class="cart-additionals">
<label for=""><input type="checkbox"> Дополнительный замок (+152)</label>
<label for=""><input type="checkbox" checked>Иглы (+30 р.)</label>
</form>
</div>
<div class="cart-item-quantity">
<select name="" id="">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div class="cart-item-price">
1 090 р. м
</div>
</div>
CSS
cart-item {
border-top: 1px solid #000;
}
.item-cart-clear {
width: 17px;
float: left;
}
.item-cart-clear a {
background: url(../img/icon-recycle-bin.png) 0 0 no-repeat;
text-indent: -10000px;
}
.cart-item-image {
width: 96px;
float: left;
}
.cart-item-image .image {
width: 96px;
height: 96px;
}
.cart-item-image .image img {
width: 100%;
}
.cart-item-description {
width: 150px;
float: left;
}
.cart-item-quantity {
width: 80px;
float: left;
}
.cart-item-price {
width: 50px;
float: right;
}