JSFiddle - React, Tailwind, and code Playground
HTML
<div class="checkout-cart-2" id="cartgrid" style="
display: inline-block;
height: 100%;
">
<div class="cart-left">
<h1>Cart/Checkout</h1>
<div class="cm">
<!-- Content Managed -->
<!-- Content Managed -->
</div>
<div class="row medium-12 large-12 columns status">
<ul class="cart-status">
<li class="active msd-cart-full">Cart<div class="triangle"></div></li>
<li><span class="icon"><i class="fa fa-stop"></i></span><span class="text">Shipping</span></li>
<li><span class="icon"><i class="fa fa-stop"></i></span><span class="text">Billing</span></li>
<li><span class="icon"><i class="fa fa-stop"></i></span><span class="text">Confirmation</span></li>
</ul>
</div>
<div id="cartgrid">
<table id="cart-table">
<tbody><tr class="heading">
<th>Product Information</th>
<th>Quantity</th>
<th>Item Price</th>
<th>Subtotal</th>
<th></th>
</tr>
<tr class="cart-row gray" data-orderlineid="9d303f08-8b12-4435-85bc-a4dd00a6b725">
<td class="product-info" width="45%">
<div class="wrap">
<div class="small-4 columns item-thumb"><a href="/Catalog/Cardio/Treadmills/B456009801"><img src="/UserFiles/images/products/b2b/TreadA.png" alt="95T Achieve Treadmill"></a></div>
<div class="small-8 columns description">
<div class="item-name">
<a href="/Catalog/Cardio/Treadmills/B456009801">
95T Achieve Treadmill
</a>
</div>
<div class="item-num">
<span class="item-num-sku">Product Code: 456009801</span>
</div>
<div...
CSS
body.checkout-cart-2 { }
[role="main"] .main-row{
padding-bottom:0;
}
.checkout-cart-2 #cart-table{
width:100%;
}
.cart-status{
margin-left:0;
}
.cart-status li {
display: inline;
background: #eeeeee;
padding: 8px 20px;
font-family: 'VerbBlack';
font-size: 16px;
color: #0070c0;
position:relative;
text-transform:uppercase;
}
.cart-status li.active {
background: #464354;
color: white;
display:inline-block
}
.cart-status li.active:before{
margin-right:5px;
}
.cart-status .triangle{
width: 0;
height: 0;
border-style: solid;
border-width: 21px 0 20px 22px;
border-color: transparent transparent transparent #464354;
position: absolute;
top: 0;
right: -22px;
z-index: 99;
}
.checkout-cart-2 .return-link {
margin:1.5em 0;
}
.checkout-cart-2 .cart-left {
margin-bottom:0;
padding:0 15px 15px 15px;
}
.cart-left h1{
color:black;
}
.checkout-cart-2 .cart-left, .checkout-cart-2 .cart-right .wrapper{
background:white;
}
.checkout-cart-2 .cart-right{
padding-left:2px;
}
#cart-table {
border-collapse: collapse;
border:none;
}
#cart-table th {
font-family: 'Verdana';
font-size: 12px;
text-transform: uppercase;
padding:0;
}
table tr:nth-of-type(odd) {
background-color: white;
}
.cart-row td{
vertical-align:top;
padding:0;
}
.heading{
border-bottom:1px solid black;
background:white;
}
.cart-row.gray .wrap{
background: #f6f6f6;
border-bottom: 2px solid #f2f2f2;
}
.wrap{
height:100%;
padding:0 10px;
display:inline-block;
width:100%;
width:calc(100% - 2px);
margin-right:4px;
}
.wrap > div {
margin-top: 10px;
margin-bottom: 10px;
}
.cart-row td:last-child .wrap, .remove .wrap {
margin-right: 0; /* removes "pseudo/implied" border on last cell .wrap */
width: 100%; /* Calculates 100% width - 20 px padding */
}
.cart-row {
font-family: 'Verdana';
height:100%;
}
.cart-row .description{
...