react-infinity-sidebar/src/navigation/NotFound.jsx

A fully customizable and responsive sidebar component for React applications, built with TailwindCSS and Headless UI. Easily integrate dynamic navigation menus, dark mode, and various styling options. Designed for dashboards, admin panels, and modern web

import React from 'react';
import { Link } from 'react-router-dom';

function NotFound() {
    return (
        <main className="relative inset-0 h-[calc(100vh_-_50px)]">
            <div className="mx-auto max-w-7xl px-6 text-center h-full flex flex-col justify-center">
                <p className="font-medium leading-8 text-black text-7xl sm:text-9xl"
                    style={{
                        color: "#FFFFFF",
                        background: "#FFFFFF",
                        textShadow: "1px 3px 0 #969696, 1px 13px 5px #aba8a8"
                    }}>404</p>
                <h1 className="mt-12 text-3xl font-normal tracking-tight text-gray-500 sm:text-5xl sm:mt-6"
                >Page not found</h1>
                <p className="mt-4 text-base text-gray-500 sm:mt-6">Sorry, we couldn’t find the page you’re looking for.</p>
                <div className="mt-10 flex justify-center">
                    <Link to="/" className="text-sm font-semibold leading-7 text-black">
                        <span aria-hidden="true">&larr;</span> Go to home
                    </Link>
                </div>
            </div>
        </main>
    )
}

export default React.memo(NotFound);