<div class="card">

    <div class="card-body">
        <div class="flex flex-row justify-between items-center">
            <h1 class="font-extrabold text-lg">best sellers</h1>
            <a href="#" class="btn-gray text-sm">view all</a>
        </div>
    
        <table class="table-auto w-full mt-5 text-right">
    
            <thead>
                <tr>
                    <td class="py-4 font-extrabold text-sm text-left">product</td>
                    <td class="py-4 font-extrabold text-sm">price</td>
                    <td class="py-4 font-extrabold text-sm">sold</td>
                    <td class="py-4 font-extrabold text-sm">profit</td>
                </tr>
            </thead>
    
            <tbody>
    
                <!-- item -->
                <tr class="">
                    <td class="py-4 text-sm text-gray-600 flex flex-row items-center text-left">
                        <div class="w-8 h-8 overflow-hidden mr-3">
                            <img src="img/sneakers.svg" class="object-cover">
                        </div>
                        Sneakers and Tennis 
                    </td>
                    <td class="py-4 text-xs text-gray-600">$ <span class="num-2"></span></td>
                    <td class="py-4 text-xs text-gray-600"><span class="num-3"></span></td>
                    <td class="py-4 text-xs text-gray-600">$ <span class="num-4"></span></td>
                </tr>
                <!-- end item -->
    
                <!-- item -->
                <tr class="">
                    <td class="py-4 text-sm text-gray-600 flex flex-row items-center">
                        <div class="w-8 h-8 overflow-hidden mr-3">
                            <img src="img/socks.svg" class="object-cover">
                        </div>
                        Crazy Socks & Graphic Socks for Men
                    </td>
                    <td class="py-4 text-xs text-gray-600">$ <span class="num-2"></span></td>
                    <td class="py-4 text-xs text-gray-600"><span class="num-3"></span></td>
                    <td class="py-4 text-xs text-gray-600">$ <span class="num-4"></span></td>
                </tr>
                <!-- end item -->
    
                <!-- item -->
                <tr class="">
                    <td class="py-4 text-sm text-gray-600 flex flex-row items-center">
                        <div class="w-8 h-8 overflow-hidden mr-3">
                            <img src="img/soccer.svg" class="object-cover">
                        </div>
                        Adidas Soccer Ball
                    </td>
                    <td class="py-4 text-xs text-gray-600">$ <span class="num-2"></span></td>
                    <td class="py-4 text-xs text-gray-600"><span class="num-3"></span></td>
                    <td class="py-4 text-xs text-gray-600">$ <span class="num-4"></span></td>
                </tr>
                <!-- end item -->
    
                <!-- item -->
                <tr class="">
                    <td class="py-4 text-sm text-gray-600 flex flex-row items-center">
                        <div class="w-8 h-8 overflow-hidden mr-3">
                            <img src="img/food.svg" class="object-cover">
                        </div>
                        Best Chocolate Chip Cookies
                    </td>
                    <td class="py-4 text-xs text-gray-600">$ <span class="num-2"></span></td>
                    <td class="py-4 text-xs text-gray-600"><span class="num-3"></span></td>
                    <td class="py-4 text-xs text-gray-600">$ <span class="num-4"></span></td>
                </tr>
                <!-- end item -->
    
            </tbody>
    
        </table>
    
    </div>
</div>