tailwindcss skeleton

skeleton.jsx

 <section className='container max-w-7xl mx-auto p-4'>

            <div className='animate-pulse grid grid-cols-1 px-6 sm:px-0 gap-3 mt-3 xl:mt-8 xl:gap-6 sm:grid-cols-4 xl:grid-cols-6 lg:grid-cols-6'>

               <div className="w-full h-20 bg-gray-800 border border-gray-700 p-4 rounded-lg ">
            <div className="flex gap-3 items-center">
                <div className='w-5 h-2 p-2 rounded bg-gray-700'></div>
                <div className="flex flex-col gap-3 w-full">
                    <div className='w-full h-5 p-2 rounded bg-gray-700'></div>
                    <div className='w-full h-5 p-2 rounded bg-gray-700'></div>
                </div>
            </div>
        </div>
 <div className="w-full h-20 bg-gray-800 border border-gray-700 p-4 rounded-lg ">
            <div className="flex gap-3 items-center">
                <div className='w-5 h-2 p-2 rounded bg-gray-700'></div>
                <div className="flex flex-col gap-3 w-full">
                    <div className='w-full h-5 p-2 rounded bg-gray-700'></div>
                    <div className='w-full h-5 p-2 rounded bg-gray-700'></div>
                </div>
            </div>
        </div>
 <div className="w-full h-20 bg-gray-800 border border-gray-700 p-4 rounded-lg ">
            <div className="flex gap-3 items-center">
                <div className='w-5 h-2 p-2 rounded bg-gray-700'></div>
                <div className="flex flex-col gap-3 w-full">
                    <div className='w-full h-5 p-2 rounded bg-gray-700'></div>
                    <div className='w-full h-5 p-2 rounded bg-gray-700'></div>
                </div>
            </div>
        </div>
 <div className="w-full h-20 bg-gray-800 border border-gray-700 p-4 rounded-lg ">
            <div className="flex gap-3 items-center">
                <div className='w-5 h-2 p-2 rounded bg-gray-700'></div>
                <div className="flex flex-col gap-3 w-full">
                    <div className='w-full h-5 p-2 rounded bg-gray-700'></div>
                    <div className='w-full h-5 p-2 rounded bg-gray-700'></div>
                </div>
            </div>
        </div>
               
            </div>

        </section>