<div class="box-shadow rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-900">
    <div class="flex gap-4 max-md:flex-wrap">
        <!-- Total Revenue -->
        <div class="flex gap-2 max-md:flex-wrap md:flex-col">
            <div class="flex min-w-[177px] flex-col gap-2 rounded-lg border border-gray-200 bg-white px-4 py-5 dark:border-gray-800 dark:bg-gray-900">
                <div class="shimmer h-[17px] w-20"></div>

                <div class="flex gap-2">
                    <div class="shimmer h-[17px] w-24"></div>

                    <div class="shimmer h-[17px] w-8"></div>
                </div>
            </div>
            
            <div class="flex min-w-[177px] flex-col gap-2 rounded-lg border border-gray-200 bg-white px-4 py-5 dark:border-gray-800 dark:bg-gray-900">
                <div class="shimmer h-[17px] w-20"></div>

                <div class="flex gap-2">
                    <div class="shimmer h-[17px] w-24"></div>

                    <div class="shimmer h-[17px] w-8"></div>
                </div>
            </div>
        </div>

        <!-- Bar Chart -->
        <div class="flex w-full max-w-full flex-col gap-11">
            <div class="flex flex-col gap-4 p-2">
                <div class="shimmer h-[49px] w-full max-w-full"></div>
                <div class="shimmer h-12 w-3/4"></div>
            </div>

            <div class="flex justify-center gap-5">
                <div class="flex items-center gap-2">
                    <div class="shimmer h-3.5 w-3.5 rounded-sm"></div>
                    <div class="shimmer h-[17px] w-[76px] rounded-sm"></div>
                </div>
                
                <div class="flex items-center gap-2">
                    <div class="shimmer h-3.5 w-3.5 rounded-sm"></div>
                    <div class="shimmer h-[17px] w-[76px] rounded-sm"></div>
                </div>
            </div>
        </div>
    </div>
</div>