A good exit.
An easy setup.

HTML / CSS

Save the complete document as 404.html. Configure your hosting provider to serve it for missing URLs with HTTP status 404. Change the home link to your website’s homepage.

Tailwind CSS

Add this markup to a page in a project with Tailwind CSS installed. Keep the included style block: it contains the original illustration and theme. Configure your server’s missing-page handler to return this page with status 404.

React

Save the component as NotFound.jsx and import it into your app. With React Router, use <Route path="*" element={<NotFound />} />. The component includes its own CSS. Your hosting configuration controls the HTTP status.

Next.js

App Router: paste the component into app/not-found.tsx (or src/app/not-found.tsx). For missing data inside a route, call notFound() from next/navigation. Pages Router: save the same component as pages/404.tsx. Test a missing URL in a production build.

Check it before you ship.

Visit a URL that does not exist. Check the layout on your phone, follow the home link and verify the response status using your browser’s Network panel. An error page should not accidentally return a successful 200 response.

Next.js can return 200 for streamed not-found responses and 404 for non-streamed responses. Use the framework documentation and test your deployed setup.

Your content, your design.

Replace the heading, message and homepage URL. Change the three theme variables in the included CSS to match your brand. Motion respects the visitor’s reduced-motion preference.

WordPress and Shopify integrations are planned for a later release. The current library supports HTML, Tailwind CSS, React and Next.js.