JSFiddle - React, Tailwind, and code Playground

by swfour

HTML

<table class="basket">
    <tr class="head">
        <th class="title">Product</th>
        <th class="price">Unit Price</th>
        <th class="quantity">Quantity</th>
        <th class="total">Total</th>
    </tr>
    <tr class="item">
        <td class="title"><a href="#">Product 1</a>

        </td>
        <td class="price">&pound;0.30</td>
        <td class="quantity">
            <input value="2" />
        </td>
        <td class="total">&pound;0.60</td>
    </tr>
    <tbody class="ordersummary" style="border-top: 3px solid blue;">
        <tr class="subtotal">
            <td colspan="3" class="label">Subtotal</td>
            <td class="value">&pound;0.60</td>
        </tr>
        <tr class="shipping">
            <td colspan="3" class="label">Shipping</td>
            <td class="value">&pound;0.00</td>
        </tr>
        <tr class="total">
            <td colspan="3" class="label">Total</td>
            <td class="value">&pound;0.60</td>
        </tr>
    </tbody>
</table>

CSS

table {
    border-collapse: collapse;
}