<div class="box-shadow flex flex-col gap-4 rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900 max-xl:flex-wrap">
    <!-- Tabs -->
    <div class="flex gap-2 border-b border-gray-200 py-2.5 dark:border-gray-800">
        <div class="shimmer mx-3 h-[21px] w-[50px]"></div>
        <div class="shimmer mx-3 h-[21px] w-[100px]"></div>
        <div class="shimmer mx-3 h-[21px] w-16"></div>
    </div>

    <!-- Tab Content -->
    <div class="flex flex-col gap-4 px-4 py-2">
        <!-- Details Section -->
        <div class="flex flex-col gap-4">
            <div class="flex flex-col gap-1">
                <div class="shimmer h-[17px] w-20"></div>

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

            <div class="w-1/2 max-md:w-full">
                <!-- Title -->
                <div class="mb-4 w-full">
                    <div class="shimmer mb-1.5 h-4 w-16"></div>

                    <div class="shimmer h-[42px] w-full"></div>
                </div>

                <!-- Description -->
                <div class="mb-4 w-full">
                    <div class="shimmer mb-1.5 h-5 w-20"></div>

                    <div class="shimmer h-[59px] w-full"></div>
                </div>

                <div class="flex gap-4 max-sm:flex-wrap">
                    <!-- Source & Expected Close date & Lead Value -->
                    <div class="w-full">
                        <div class="mb-4 w-full">
                            <div class="shimmer mb-1.5 h-5 w-16"></div>
        
                            <div class="shimmer h-[42px] w-full"></div>
                        </div>

                        <div class="mb-4 w-full">
                            <div class="shimmer mb-1.5 h-5 w-16"></div>
        
                            <div class="shimmer h-[42px] w-full"></div>
                        </div>

                        <div class="mb-4 w-full">
                            <div class="shimmer mb-1.5 h-4 w-16"></div>
        
                            <div class="shimmer h-[42px] w-full"></div>
                        </div>
                    </div>

                    <!-- Type & Sales Owner -->
                    <div class="w-full">
                        <div class="mb-4 w-full">
                            <div class="shimmer mb-1.5 h-5 w-16"></div>
        
                            <div class="shimmer h-[42px] w-full"></div>
                        </div>

                        <div class="mb-4 w-full">
                            <div class="shimmer mb-1.5 h-5 w-16"></div>
        
                            <div class="shimmer h-[42px] w-full"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Contact Section -->
        <div class="flex flex-col gap-4">
            <div class="flex flex-col gap-1">
                <div class="shimmer h-[17px] w-32"></div>

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

            <div class="w-1/2 max-md:w-full">
                <!-- Name -->
                <div class="mb-4 w-full">
                    <div class="shimmer mb-1.5 h-5 w-16"></div>

                    <div class="shimmer h-[44px] w-full"></div>
                </div>

                <!-- Email -->
                <div class="mb-4 w-full">
                    <div class="shimmer mb-1.5 h-5 w-16"></div>

                    <div class="shimmer mb-2 h-[42px] w-full"></div>

                    <div class="shimmer h-5 w-16"></div>
                </div>

                <!-- Contact Number -->
                <div class="mb-4 w-full">
                    <div class="shimmer mb-1.5 h-5 w-16"></div>

                    <div class="shimmer mb-2 h-[42px] w-full"></div>

                    <div class="shimmer h-5 w-16"></div>
                </div>

                <!-- Organization -->
                <div class="mb-4 w-full">
                    <div class="shimmer mb-1.5 h-5 w-16"></div>

                    <div class="shimmer h-[44px] w-full"></div>
                </div>
            </div>
        </div>

        <!-- Product Section -->
        <div class="flex flex-col gap-4">
            <div class="flex flex-col gap-1">
                <div class="shimmer h-[17px] w-32"></div>

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

            <div class="flex flex-col gap-4">
                <!-- Table Section -->
                <div class="w-full min-w-[800px] table-fixed border border-gray-200 text-left text-sm dark:border-gray-800">
                    <div class="bg-gray-50 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300">
                        <div class="flex">
                            <div class="shimmer mx-6 my-4 h-5 w-full whitespace-nowrap font-semibold"></div>
                            <div class="shimmer mx-6 my-4 h-5 w-full whitespace-nowrap font-semibold"></div>
                            <div class="shimmer mx-6 my-4 h-5 w-full whitespace-nowrap font-semibold"></div>
                            <div class="shimmer mx-6 my-4 h-5 w-full whitespace-nowrap font-semibold"></div>
                            <div class="shimmer mx-6 my-4 h-5 w-full whitespace-nowrap font-semibold"></div>
                        </div>
                    </div>
                </div>

                <!-- Add More Button -->
                <div class="shimmer h-5 w-16"></div>
            </div>
        </div>
    </div>
</div>