lightswind
Version:
A modern frontend library with pre-built Tailwind CSS components for building responsive and interactive user interfaces.
80 lines (65 loc) • 2.62 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>404 - Page Not Found</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightwind@3.0.0/src/lightswind.css">
<style>
/* Custom animations */
.fadeIn {
animation: fadeIn 1s ease-in-out;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.bounceIn {
animation: bounceIn 1s ease-out;
}
@keyframes bounceIn {
0% {
transform: scale(0);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
</style>
</head>
<body class="bg-gray-50 text-gray-900 font-primarylw min-h-screen flex flex-col items-center justify-center ">
<!-- Main Container -->
<div class="flex flex-col items-center justify-center text-center max-w-4xl mx-auto p-8">
<!-- Error Title -->
<h2 class="text-8xl md:text-9xl font-extrabold text-primarylw mb-6 fadeIn"> 404</h1>
<h2 class="text-3xl md:text-4xl font-extrabold text-primarylw mb-6 fadeIn"> Oops! That Page Can’t Be Found
</h1>
<!-- Subtext -->
<p class="text-lg md:text-xl mb-8 text-gray-600 opacity-80 fadeIn">
The page you’re looking for might have been moved, deleted, or never existed. Please check the URL
and try again.
</p>
<!-- Call to Action -->
<div class="flex flex-col gap-6 items-center">
<a href="/"
class="px-4 md:px-10 py-2 md:py-4 bg-primarylw hover:bg-primarylw-2 text-white text-lg font-semibold rounded-full shadow-lg transform
hover:scale-105 transition-all duration-300">
Go to Home
</a>
<p class="text-sm text-gray-500 ">
Need help? <a href="mailto:support@example.com"
class="text-primarylw-2 hover:text-primarylw opacity-70 hover:opacity-100">Contact
Support</a>
</p>
</div>
</div>
</body>
</html>