JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<table style="background: #DEE3E0" class="table table-responsive table-condensed">
    <thead>
        <tr style="padding: 0">
            <th class="text-center" style="font-size: 12px; padding: 0">Name & Qty</th>
            <th class="text-center" style="font-size: 12px; width: 50px;padding: 0">Rate</th>
            <th class="text-center" style="font-size: 12px; width: 50px;padding: 0">Amount</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="font-size: 12px">
                <img src="//placehold.it/45" alt="Product Image" /><span>1x</span> <a href="" style="margin: 0; padding: 0">Product Name</a>  <a href="javascript:void(0)" title="Remove product from the cart"><span class="pull-right text-danger"><i class="fa fa-trash fa-lg"></i></span></a>

            </td>
            <td class="text-right" style="padding-top: 7.5px; font-size: 12px">150.00</td>
            <td class="text-right" style="padding-top: 7.5px; font-size: 12px">150.00</td>
        </tr>
        <tr>
            <td style="font-size: 12px">
                <img src="//placehold.it/45" alt="Product Image" /><span>1x</span> <a href="" style="margin: 0; padding: 0">Product Name</a>  <a href="javascript:void(0)" title="Remove product from the cart"><span class="pull-right text-danger"><i class="fa fa-trash fa-lg"></i></span></a>

            </td>
            <td class="text-right" style="padding-top: 7.5px; font-size: 12px">125.00</td>
            <td class="text-right" style="padding-top: 7.5px; font-size: 12px">125.00</td>
        </tr>
        <tr>
            <td style="font-size: 12px">
                <img src="//placehold.it/45" alt="Product Image" /><span>1x</span> <a href="" style="margin: 0; padding: 0">Product Name</a>  <a href="javascript:void(0)" title="Remove product from the cart"><span class="pull-right text-danger"><i class="fa fa-trash...