<div class="bg-gray-100 p-4 lg:p-8 lg:h-screen">
    <div class="container mx-auto p-2 lg:p-4 h-full rounded-lg">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 h-full">
            <div class="flex rounded-md flex-col justify-center items-start relative p-8 overflow-hidden">
                <h2 class="text-indigo-600 text-5xl mb-3 font-bold">404</h2>
                <p class="text-gray-800 text-3xl mb-3 font-bold">Ooops!</p>
                <p class="text-gray-800 text-3xl mb-3 font-bold">Page not found</p>
                <p class="text-gray-500 mb-6">This page does not exist or was removed. We suggest you back to home</p>
                <a href="javascript:void(0)"
                    class="group relative w-auto flex justify-center py-4 px-8 border border-transparent text-sm font-medium rounded-full text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                    Back to home
                </a>
            </div>
        </div>
    </div>
</div>

                

                    const NotFound = () => {
    return (
        <div className="bg-gray-100 p-4 lg:p-8 lg:h-screen">
            <div className="container mx-auto p-2 lg:p-4 h-full rounded-lg">
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-2 h-full">
                    <div className="flex rounded-md flex-col justify-center items-start relative p-8 overflow-hidden">
                        <h2 className="text-indigo-600 text-5xl mb-3 font-bold">
                            404
                        </h2>
                        <p className="text-gray-800 text-3xl mb-3 font-bold">
                            Ooops!
                        </p>
                        <p className="text-gray-800 text-3xl mb-3 font-bold">
                            Page not found
                        </p>
                        <p className="text-gray-500 mb-6">
                            This page does not exist or was removed. We suggest
                            you back to home
                        </p>

<a
                            href="javascript:void(0)"
                            className="group relative w-auto flex justify-center py-4 px-8 border border-transparent text-sm font-medium rounded-full text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                        >
                            Back to home
                        </a>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default NotFound;