JSFiddle - React, Tailwind, and code Playground

by j08691

HTML

<table class="cart_table">
    <tr class="cart_table_header">
        <th></th>
        <th>Item</th>
        <th>Price</th>
        <th>Quantity</th>
        <th>Total</th>
        <th>Remove</th>
    </tr>
    <tr valign="middle">
        <td>
            <img src="images/product-image.jpg" height="50px width:50px;"></img>
        </td>
        <td>Item name here</td>
        <td>$12</td>
        <td>2</td>
        <td>$24</td>
        <td> <a href="#"> <img src="images/delete_icon_normal.png" > </img> </a> 
        </td>
    </tr>
    <tr valign="middle">
        <td>
            <img src="images/product-image.jpg" height="50px width:50px;"></img>
        </td>
        <td>Item name here</td>
        <td>$12</td>
        <td>2</td>
        <td>$24</td>
        <td> <a href="#"> <img src="images/delete_icon_normal.png" > </img> </a> 
        </td>
    </tr>
</table>

CSS

.cart_table {
    width:100%;
    border-collapse:collapse;
}
.cart_table_header {
    border-bottom: 1px solid #ffb215;
    padding: 8px;
    background-color: #dedede;
}
.cart_table tr td {
    border-bottom: 1px solid #ccc;
}