---
title: 404 Page with image
category: Marketing
paid: false
isActive: true
ltr: {"vue":{"vueTail":[{"code":"<template>\n  <main>\n    <div\n      class=\"max-w-screen-xl mx-auto px-4 flex items-center justify-start h-screen md:px-8\"\n    >\n      <div\n        class=\"max-w-lg mx-auto flex-1 flex-row-reverse gap-12 items-center justify-between md:max-w-none md:flex\"\n      >\n        <div class=\"flex-1 max-w-lg\">\n          <img\n            src=\"https://raw.githubusercontent.com/sidiDev/remote-assets/ddc5be7e0f83988b8148c61a9341d69ce53decaa/undraw_page_not_found_re_e9o6_rm5sxu.svg\"\n          />\n        </div>\n        <div class=\"mt-12 flex-1 max-w-lg space-y-3 md:mt-0\">\n          <h3 class=\"text-indigo-600 font-semibold\">404 Error</h3>\n          <p class=\"text-gray-800 text-4xl font-semibold sm:text-5xl\">\n            Page not found\n          </p>\n          <p class=\"text-gray-600\">\n            Sorry, the page you are looking for could not be found or has been\n            removed.\n          </p>\n          <a\n            href=\"javascript:void(0)\"\n            class=\"text-indigo-600 duration-150 hover:text-indigo-400 font-medium inline-flex items-center gap-x-1\"\n          >\n            Go back\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 20 20\"\n              fill=\"currentColor\"\n              class=\"w-5 h-5\"\n            >\n              <path\n                fillRule=\"evenodd\"\n                d=\"M5 10a.75.75 0 01.75-.75h6.638L10.23 7.29a.75.75 0 111.04-1.08l3.5 3.25a.75.75 0 010 1.08l-3.5 3.25a.75.75 0 11-1.04-1.08l2.158-1.96H5.75A.75.75 0 015 10z\"\n                clipRule=\"evenodd\"\n              />\n            </svg>\n          </a>\n        </div>\n      </div>\n    </div>\n  </main>\n</template>","label":"App.vue"}],"vueCss":[]},"preview":"function App() {\n    return (\n        <main style={{height: \"680px\"}}>\n            <div className=\"max-w-screen-xl mx-auto px-4 flex items-center justify-start h-screen md:px-8\">\n                <div className=\"max-w-lg mx-auto flex-1 flex-row-reverse gap-12 items-center justify-between md:max-w-none md:flex\">\n                    <div className=\"flex-1 max-w-lg\">\n                        <img src=\"https://res.cloudinary.com/floatui/image/upload/c_pad,b_auto:predominant,fl_preserve_transparency/v1670873056/undraw_page_not_found_re_e9o6_rm5sxu.jpg\" />\n                    </div>\n                    <div className=\"mt-12 flex-1 max-w-lg space-y-3 md:mt-0\">\n                        <h3 className=\"text-indigo-600 font-semibold\">\n                            404 Error\n                        </h3>\n                        <p className=\"text-gray-800 text-4xl font-semibold sm:text-5xl\">\n                            Page not found\n                        </p>\n                        <p className=\"text-gray-600\">\n                            Sorry, the page you are looking for could not be found or has been removed.\n                        </p>\n                        <a href=\"javascript:void(0)\" className=\"text-indigo-600 duration-150 hover:text-indigo-400 font-medium inline-flex items-center gap-x-1\">\n                            Go back\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" className=\"w-5 h-5\">\n                                <path fillRule=\"evenodd\" d=\"M5 10a.75.75 0 01.75-.75h6.638L10.23 7.29a.75.75 0 111.04-1.08l3.5 3.25a.75.75 0 010 1.08l-3.5 3.25a.75.75 0 11-1.04-1.08l2.158-1.96H5.75A.75.75 0 015 10z\" clipRule=\"evenodd\" />\n                            </svg>\n                        </a>\n                    </div>\n                </div>\n            </div>\n        </main>\n    )\n}","react":{"jsxCss":[],"jsxTail":[{"label":"App.jsx","code":"export default () => {\n    return (\n        <main>\n            <div className=\"max-w-screen-xl mx-auto px-4 flex items-center justify-start h-screen md:px-8\">\n                <div className=\"max-w-lg mx-auto flex-1 flex-row-reverse gap-12 items-center justify-between md:max-w-none md:flex\">\n                    <div className=\"flex-1 max-w-lg\">\n                        <img src=\"https://res.cloudinary.com/floatui/image/upload/c_pad,b_auto:predominant,fl_preserve_transparency/v1670873056/undraw_page_not_found_re_e9o6_rm5sxu.jpg\" />\n                    </div>\n                    <div className=\"mt-12 flex-1 max-w-lg space-y-3 md:mt-0\">\n                        <h3 className=\"text-indigo-600 font-semibold\">\n                            404 Error\n                        </h3>\n                        <p className=\"text-gray-800 text-4xl font-semibold sm:text-5xl\">\n                            Page not found\n                        </p>\n                        <p className=\"text-gray-600\">\n                            Sorry, the page you are looking for could not be found or has been removed.\n                        </p>\n                        <a href=\"javascript:void(0)\" className=\"text-indigo-600 duration-150 hover:text-indigo-400 font-medium inline-flex items-center gap-x-1\">\n                            Go back\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" className=\"w-5 h-5\">\n                                <path fillRule=\"evenodd\" d=\"M5 10a.75.75 0 01.75-.75h6.638L10.23 7.29a.75.75 0 111.04-1.08l3.5 3.25a.75.75 0 010 1.08l-3.5 3.25a.75.75 0 11-1.04-1.08l2.158-1.96H5.75A.75.75 0 015 10z\" clipRule=\"evenodd\" />\n                            </svg>\n                        </a>\n                    </div>\n                </div>\n            </div>\n        </main>\n    )\n}"}]},"html":{"htmlTail":[{"label":"index.html","code":"<main>\n  <div\n    class=\"max-w-screen-xl mx-auto px-4 flex items-center justify-start h-screen md:px-8\"\n  >\n    <div\n      class=\"max-w-lg mx-auto flex-1 flex-row-reverse gap-12 items-center justify-between md:max-w-none md:flex\"\n    >\n      <div class=\"flex-1 max-w-lg\">\n        <img\n          src=\"https://raw.githubusercontent.com/sidiDev/remote-assets/ddc5be7e0f83988b8148c61a9341d69ce53decaa/undraw_page_not_found_re_e9o6_rm5sxu.svg\"\n        />\n      </div>\n      <div class=\"mt-12 flex-1 max-w-lg space-y-3 md:mt-0\">\n        <h3 class=\"text-indigo-600 font-semibold\">404 Error</h3>\n        <p class=\"text-gray-800 text-4xl font-semibold sm:text-5xl\">\n          Page not found\n        </p>\n        <p class=\"text-gray-600\">\n          Sorry, the page you are looking for could not be found or has been\n          removed.\n        </p>\n        <a\n          href=\"javascript:void(0)\"\n          class=\"text-indigo-600 duration-150 hover:text-indigo-400 font-medium inline-flex items-center gap-x-1\"\n        >\n          Go back\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\"\n            class=\"w-5 h-5\"\n          >\n            <path\n              fillRule=\"evenodd\"\n              d=\"M5 10a.75.75 0 01.75-.75h6.638L10.23 7.29a.75.75 0 111.04-1.08l3.5 3.25a.75.75 0 010 1.08l-3.5 3.25a.75.75 0 11-1.04-1.08l2.158-1.96H5.75A.75.75 0 015 10z\"\n              clipRule=\"evenodd\"\n            />\n          </svg>\n        </a>\n      </div>\n    </div>\n  </div>\n</main>"}]},"svelte":{"svelteTail":[{"code":"<main>\n  <div\n    class=\"max-w-screen-xl mx-auto px-4 flex items-center justify-start h-screen md:px-8\"\n  >\n    <div\n      class=\"max-w-lg mx-auto flex-1 flex-row-reverse gap-12 items-center justify-between md:max-w-none md:flex\"\n    >\n      <div class=\"flex-1 max-w-lg\">\n        <img\n          src=\"https://raw.githubusercontent.com/sidiDev/remote-assets/ddc5be7e0f83988b8148c61a9341d69ce53decaa/undraw_page_not_found_re_e9o6_rm5sxu.svg\"\n        />\n      </div>\n      <div class=\"mt-12 flex-1 max-w-lg space-y-3 md:mt-0\">\n        <h3 class=\"text-indigo-600 font-semibold\">404 Error</h3>\n        <p class=\"text-gray-800 text-4xl font-semibold sm:text-5xl\">\n          Page not found\n        </p>\n        <p class=\"text-gray-600\">\n          Sorry, the page you are looking for could not be found or has been\n          removed.\n        </p>\n        <a\n          href=\"javascript:void(0)\"\n          class=\"text-indigo-600 duration-150 hover:text-indigo-400 font-medium inline-flex items-center gap-x-1\"\n        >\n          Go back\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\"\n            class=\"w-5 h-5\"\n          >\n            <path\n              fillRule=\"evenodd\"\n              d=\"M5 10a.75.75 0 01.75-.75h6.638L10.23 7.29a.75.75 0 111.04-1.08l3.5 3.25a.75.75 0 010 1.08l-3.5 3.25a.75.75 0 11-1.04-1.08l2.158-1.96H5.75A.75.75 0 015 10z\"\n              clipRule=\"evenodd\"\n            />\n          </svg>\n        </a>\n      </div>\n    </div>\n  </div>\n</main>","label":"App.svelte"}]}}
slug: /404-pages
id: 900d00df-913b-4eff-8ce3-c9848c731519
created_at: 1671312876931
---

<FUI404PageWithImage />