admin_hura_8/template/report/product_buy.html

<div class="w-[100%]">
    <div class="p-[15px]">
        <h1 class="text-[24px] font-[700] mb-[15px]">Sản phẩm mua nhiều</h1>

        <div class="bg-white p-[15px] rounded-[15px] w-[700px] shadow-[0px_1px_1px_0px_#0000001A]">
            <div class="flex items-center justify-between pb-[5px] border-b-[1px] border-[#ECECEC]">
                <b class="text-[20px]">Top sản phẩm mua nhiều</b>
                <select name="" id="">
                    <option value="">Last 7 days</option>
                </select>
            </div>
            <div class="content py-[10px]">
                <div class="mb-[15px]">
                    <a href="" class="block mb-[5px] text-[#0041E8]">Tai nghe NICEHCK Traceless có Mic (Type-C)</a>
                    <div class="flex items-center justify-between">
                        <div class="relative w-[540px] h-[18px] rounded-[9px] bg-[#E5E5E5]">
                            <div class="absolute w-[70%] h-[100%] rounded-[9px] left-[0] bg-[#E00000]"></div>
                        </div>
                        <span>223 đơn</span>
                    </div>
                </div>
                <div class="mb-[15px]">
                    <a href="" class="block mb-[5px] text-[#0041E8]">Tai nghe NICEHCK Traceless có Mic (Type-C)</a>
                    <div class="flex items-center justify-between">
                        <div class="relative w-[540px] h-[18px] rounded-[9px] bg-[#E5E5E5]">
                            <div class="absolute w-[50%] h-[100%] rounded-[9px] left-[0] bg-[#0041E8]"></div>
                        </div>
                        <span>223 đơn</span>
                    </div>
                </div>
                <div class="">
                    <a href="" class="block mb-[5px] text-[#0041E8]">Tai nghe NICEHCK Traceless có Mic (Type-C)</a>
                    <div class="flex items-center justify-between">
                        <div class="relative w-[540px] h-[18px] rounded-[9px] bg-[#E5E5E5]">
                            <div class="absolute w-[20%] h-[100%] rounded-[9px] left-[0] bg-[#0041E8]"></div>
                        </div>
                        <span>223 đơn</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-white p-[15px] rounded-[15px] w-[700px] shadow-[0px_1px_1px_0px_#0000001A] mt-[15px]">
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <p>Khách hàng đăng ký mới trong 30 ngày: </p>
                    <b class="ml-[5px]">11.458</b>
                </div>
                <a href=""
                    class="block w-[30px] h-[30px] leading-[30px] border-[1px] border-[#ECECEC] text-center bg-[#F9F9F9] text-[#9E9E9E] rounded-[4px]">
                    <i class="fa-regular fa-file-excel"></i></a>
            </div>
            <table class="table mt-[15px]">
                <thead class="bg-[#f6f6f6] text-[#000] text-[14px] font-500">
                    <tr>
                        <th class="w-[50px]">STT</th>
                        <th>Mã số</th>
                        <th>Sản phẩm</th>
                        <th class="w-[75px]">Số đơn</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="text-center">1</td>
                        <td>#2081</td>
                        <td>
                            <a href="" class="name">Tai nghe NICEHCK Traceless có Mic (Type-C)</a>
                        </td>
                        <td>223</td>
                    </tr>
                    <tr>
                        <td class="text-center">1</td>
                        <td>#2081</td>
                        <td>
                            <a href="" class="name">Tai nghe NICEHCK Traceless có Mic (Type-C)</a>
                        </td>
                        <td>223</td>
                    </tr>
                    <tr>
                        <td class="text-center">1</td>
                        <td>#2081</td>
                        <td>
                            <a href="" class="name">Tai nghe NICEHCK Traceless có Mic (Type-C)</a>
                        </td>
                        <td>223</td>
                    </tr>
                    <tr>
                        <td class="text-center">1</td>
                        <td>#2081</td>
                        <td>
                            <a href="" class="name">Tai nghe NICEHCK Traceless có Mic (Type-C)</a>
                        </td>
                        <td>223</td>
                    </tr>
                </tbody>
            </table>
        </div>


    </div>
</div>