lightswind
Version:
A modern frontend library with pre-built Tailwind CSS components for building responsive and interactive user interfaces.
101 lines (92 loc) • 4.52 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alert Example</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
<div class="max-w-xl mx-auto mt-12 space-y-4">
<!-- Success Alert -->
<div
class="alert flex items-center bg-green-50 text-green-700 border border-green-200 p-4 rounded-xl shadow-md transition-all duration-300 ease-in-out">
<div class="mr-3">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg>
</div>
<div class="flex-1">
<p class="font-medium text-sm">Operation successful!</p>
</div>
<!-- Close Icon -->
<button class="ml-4 text-green-700 hover:text-green-900 focus:outline-none" onclick="closeAlert(event)">
×
</button>
</div>
<!-- Error Alert -->
<div
class="alert flex items-center bg-red-50 text-red-700 border border-red-200 p-4 rounded-xl shadow-md transition-all duration-300 ease-in-out">
<div class="mr-3">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg>
</div>
<div class="flex-1">
<p class="font-medium text-sm">Something went wrong!</p>
</div>
<!-- Close Icon -->
<button class="ml-4 text-red-700 hover:text-red-900 focus:outline-none" onclick="closeAlert(event)">
×
</button>
</div>
<!-- Warning Alert -->
<div
class="alert flex items-center bg-yellow-50 text-yellow-700 border border-yellow-200 p-4 rounded-xl shadow-md transition-all duration-300 ease-in-out">
<div class="mr-3">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg>
</div>
<div class="flex-1">
<p class="font-medium text-sm">Please be cautious!</p>
</div>
<!-- Close Icon -->
<button class="ml-4 text-yellow-700 hover:text-yellow-900 focus:outline-none" onclick="closeAlert(event)">
×
</button>
</div>
<!-- Info Alert -->
<div
class="alert flex items-center bg-blue-50 text-blue-700 border border-blue-200 p-4 rounded-xl shadow-md transition-all duration-300 ease-in-out">
<div class="mr-3">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
</svg>
</div>
<div class="flex-1">
<p class="font-medium text-sm">For your information!</p>
</div>
<!-- Close Icon -->
<button class="ml-4 text-blue-700 hover:text-blue-900 focus:outline-none" onclick="closeAlert(event)">
×
</button>
</div>
</div>
<script>
// Function to close the alert
function closeAlert(event) {
const alert = event.target.closest('.alert');
alert.classList.add('hidden');
}
</script>
</body>
</html>