<div class="card">    

    <div class="card-body">
        <h2 class="font-bold text-lg mb-10">Recent Orders</h2>
    
    <!-- start a table -->
    <table class="table-fixed w-full">
        
        <!-- table head -->
        <thead class="text-left">
            <tr>
                <th class="w-1/2 pb-10 text-sm font-extrabold tracking-wide">customer</th>
                <th class="w-1/4 pb-10 text-sm font-extrabold tracking-wide text-right">Product</th>
                <th class="w-1/4 pb-10 text-sm font-extrabold tracking-wide text-right">Invoice</th>
                <th class="w-1/4 pb-10 text-sm font-extrabold tracking-wide text-right">price</th>
                <th class="w-1/4 pb-10 text-sm font-extrabold tracking-wide text-right">status</th>
            </tr>
        </thead>
        <!-- end table head -->

        <!-- table body -->
        <tbody class="text-left text-gray-600">

            <!-- item -->
            <tr>
                <!-- name -->
                <th class="w-1/2 mb-4 text-xs font-extrabold tracking-wider flex flex-row items-center w-full">
                    <div class="w-8 h-8 overflow-hidden rounded-full">
                        <img src="img/user2.jpg" class="object-cover">
                    </div>
                    <p class="ml-3 name-1">user name</p>                    
                </th>
                <!-- name -->
                
                <!-- product -->
                <th class="w-1/4 mb-4 text-xs font-extrabold tracking-wider text-right">Nike Sport</th>
                <!-- product -->

                <!-- invoice -->
                <th class="w-1/4 mb-4 text-xs font-extrabold tracking-wider text-right">#<span class="num-4"></span></th>
                <!-- invoice -->

                <!-- price -->
                <th class="w-1/4 mb-4 text-xs font-extrabold tracking-wider text-right">$<span class="num-2"></span></th>
                <!-- price -->

                <!-- status -->
                <th class="w-1/4 mb-4 text-xs font-extrabold tracking-wider text-right">shipped</th>
                <!-- status -->

            </tr>
            <!-- item -->


            <!-- item -->
            <tr>
                <!-- name -->
                <th class="w-1/2 mb-4 text-xs font-extrabold tracking-wider flex flex-row items-center w-full">
                    <div class="w-8 h-8 overflow-hidden rounded-full">
                        <img src="img/user3.jpg" class="object-cover">
                    </div>
                    <p class="ml-3 name-1">user name</p>                    
                </th>
                <!-- name -->
                
                <!-- product -->
                <th class="w-1/4 mb-4 text-xs font-extrabold tracking-wider text-right">Nike Sport</th>
                <!-- product -->

                <!-- invoice -->
                <th class="w-1/4 mb-4 text-xs font-extrabold tracking-wider text-right">#<span class="num-4"></span></th>
                <!-- invoice -->

                <!-- price -->
                <th class="w-1/4 mb-4 text-xs font-extrabold tracking-wider text-right">$<span class="num-2"></span></th>
                <!-- price -->

                <!-- status -->
                <th class="w-1/4 mb-4 text-xs font-extrabold tracking-wider text-right">shipped</th>
                <!-- status -->

            </tr>
            <!-- item -->


            <!-- item -->
            <tr>
                <!-- name -->
                <th class="w-1/2 mb-4 text-xs font-extrabold tracking-wider flex flex-row items-center w-full">
                    <div class="w-8 h-8 overflow-hidden rounded-full">
                        <img src="img/user2.jpg" class="object-cover">
                    </div>
                    <p class="ml-3 name-1">user name</p>                    
                </th>
                <!-- name -->
                
                <!-- product -->
                <th class="w-1/4 mb-4 text-xs font-extrabold tracking-wider text-right">Nike Sport</th>
                <!-- product -->

                <!-- invoice -->
                <th class="w-1/4 mb-4 text-xs font-extrabold tracking-wider text-right">#<span class="num-4"></span></th>
                <!-- invoice -->

                <!-- price -->
                <th class="w-1/4 mb-4 text-xs font-extrabold tracking-wider text-right">$<span class="num-2"></span></th>
                <!-- price -->

                <!-- status -->
                <th class="w-1/4 mb-4 text-xs font-extrabold tracking-wider text-right">shipped</th>
                <!-- status -->

            </tr>
            <!-- item -->

            <!-- item -->
            <tr>
                <!-- name -->
                <th class="w-1/2 mb-4 text-xs font-extrabold tracking-wider flex flex-row items-center w-full">
                    <div class="w-8 h-8 overflow-hidden rounded-full">
                        <img src="img/user1.jpg" class="object-cover">
                    </div>
                    <p class="ml-3 name-1">user name</p>                    
                </th>
                <!-- name -->
                
                <!-- product -->
                <th class="w-1/4 mb-4 text-xs font-extrabold tracking-wider text-right">Nike Sport</th>
                <!-- product -->

                <!-- invoice -->
                <th class="w-1/4 mb-4 text-xs font-extrabold tracking-wider text-right">#<span class="num-4"></span></th>
                <!-- invoice -->

                <!-- price -->
                <th class="w-1/4 mb-4 text-xs font-extrabold tracking-wider text-right">$<span class="num-2"></span></th>
                <!-- price -->

                <!-- status -->
                <th class="w-1/4 mb-4 text-xs font-extrabold tracking-wider text-right">shipped</th>
                <!-- status -->

            </tr>
            <!-- item -->

            <!-- item -->
            <tr>
                <!-- name -->
                <th class="w-1/2 mb-4 text-xs font-extrabold tracking-wider flex flex-row items-center w-full">
                    <div class="w-8 h-8 overflow-hidden rounded-full">
                        <img src="img/user3.jpg" class="object-cover">
                    </div>
                    <p class="ml-3 name-1">user name</p>                    
                </th>
                <!-- name -->
                
                <!-- product -->
                <th class="w-1/4 mb-4 text-xs font-extrabold tracking-wider text-right">Nike Sport</th>
                <!-- product -->

                <!-- invoice -->
                <th class="w-1/4 mb-4 text-xs font-extrabold tracking-wider text-right">#<span class="num-4"></span></th>
                <!-- invoice -->

                <!-- price -->
                <th class="w-1/4 mb-4 text-xs font-extrabold tracking-wider text-right">$<span class="num-2"></span></th>
                <!-- price -->

                <!-- status -->
                <th class="w-1/4 mb-4 text-xs font-extrabold tracking-wider text-right">shipped</th>
                <!-- status -->

            </tr>
            <!-- item -->            

            


        </tbody>
        <!-- end table body -->

    </table>
    <!-- end a table -->
    </div>

</div> 
    