<div class="bg-gray-100 p-4 lg:p-8 lg:h-screen">
    <div class="min-h-full flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
        <div class="max-w-md w-full space-y-8 bg-red-300 rounded-lg relative">
            <span
                class="h-16 w-16 text-red-300 bg-gray-100 inline-flex flex-row items-center justify-center rounded-full absolute -top-8 left-0 right-0 mx-auto">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 inline-block text-red-300" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                </svg>
            </span>
            <div class="py-8">
                <h2 class="px-4 text-center text-2xl font-extrabold text-red-900">
                    The page you are looking for is not found.
                </h2>
                <p class="mt-2 text-center text-red-800 px-4">
                    Return to <a href="javascript:void(0)" class="underline">home page</a>
                </p>
            </div>
        </div>
    </div>
</div>

                

                    const NotFound = () => {
    return (
        <div className="bg-gray-100 p-4 lg:p-8 lg:h-screen">
            <div className="min-h-full flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
                <div className="max-w-md w-full space-y-8 bg-red-300 rounded-lg relative">
                    <span className="h-16 w-16 text-red-300 bg-gray-100 inline-flex flex-row items-center justify-center rounded-full absolute -top-8 left-0 right-0 mx-auto">
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            className="h-16 w-16 inline-block text-red-300"
                            viewBox="0 0 20 20"
                            fill="currentColor"
                        >
                            <path
                                fillRule="evenodd"
                                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
                                clipRule="evenodd"
                            />
                        </svg>
                    </span>
                    <div className="py-8">
                        <h2 className="px-4 text-center text-2xl font-extrabold text-red-900">
                            The page you are looking for is not found.
                        </h2>
                        <p className="mt-2 text-center text-red-800 px-4">
                            Return to{" "}
                            <a href="javascript:void(0)" className="underline">
                                home page
                            </a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default NotFound;