Dưới đây là 3 đoạn code Skeleton

Skeleton 1 :

import React from 'react'

const SkeletonOption1 = () => {
    return (
        <div className="border border-gray-200 p-4 col-span-3">
            <div className="animate-pulse space-y-8">
                <div className="flex space-x-4">
                    <div className="bg-gray-200 h-24 w-24 rounded-full"></div>
                    <div className="space-y-2 flex-1 pt-4">
                        <div className="h-6 bg-gray-200 w-1/2"></div>
                        <div className="h-6 bg-gray-200 w-1/3"></div>
                    </div>
                </div>
                <div className="flex-1 space-y-2">
                    <div className="h-6 bg-gray-200 full"></div>
                    <div className="h-6 bg-gray-200 w-3/3"></div>
                </div>
            </div>
        </div>
    )
}

export default SkeletonOption1

Skeleton 2 :

import React from 'react'

const SkeletonOption2 = () => {
    return (
        <div className="max-w-screen-lg m-auto catalog-product gap-8">
            <div className="border border-gray-200 p-4">
                <div className="animate-pulse space-y-2">
                    <div className="bg-gray-200 h-48"></div>
                    <div className="flex-1 space-y-2">
                        <div className="h-16 bg-gray-200 full"></div>
                        <div className="space-x-2 flex">
                            <div className="h-8 bg-gray-200 w-full"></div>
                            <div className="h-8 bg-gray-200 w-full"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div >
    )
}

export default SkeletonOption2

Skeleton 3 :

import React from 'react'

const SkeletonOption3 = () => {
    return (
        <div role="status" className="space-y-8 animate-pulse md:space-y-0 md:space-x-8 rtl:space-x-reverse md:flex md:items-center">
            <div className="flex items-center justify-center w-full h-48 bg-gray-300 rounded sm:w-96 dark:bg-gray-700">
                <svg className="w-10 h-10 text-gray-200 dark:text-gray-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 18">
                    <path d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z" />
                </svg>
            </div>
            <div className="w-full">
                <div className="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4"></div>
                <div className="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[480px] mb-2.5"></div>
                <div className="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5"></div>
                <div className="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[440px] mb-2.5"></div>
                <div className="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[460px] mb-2.5"></div>
                <div className="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px]"></div>
            </div>
            <span className="sr-only">Loading...</span>
        </div>
    )
}

export default SkeletonOption3