<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">Ooops!</h2>
<p class="text-gray-800 text-3xl mb-3 font-bold">Something went wrong.</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 ServerError = () => {
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">
Ooops!
</h2>
<p className="text-gray-800 text-3xl mb-3 font-bold">
Something went wrong.
</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 ServerError;