lightswind
Version:
A modern frontend library with pre-built Tailwind CSS components for building responsive and interactive user interfaces.
150 lines (124 loc) • 4.74 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@codewith_muhilan</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightwind@2.7.0/src/lightswind.css">
<!--
<style>
@keyframes aurora-1 {
0% {
top: 0;
right: 0;
}
50% {
top: 100%;
right: 75%;
}
75% {
top: 100%;
right: 25%;
}
100% {
top: 0;
right: 0;
}
}
@keyframes aurora-2 {
0% {
top: -50%;
left: 0%;
}
60% {
top: 100%;
left: 75%;
}
85% {
top: 100%;
left: 25%;
}
100% {
top: -50%;
left: 0%;
}
}
@keyframes aurora-3 {
0% {
bottom: 0;
left: 0;
}
40% {
bottom: 100%;
left: 75%;
}
65% {
bottom: 40%;
left: 50%;
}
100% {
bottom: 0;
left: 0;
}
}
@keyframes aurora-4 {
0% {
bottom: -50%;
right: 0;
}
50% {
bottom: 0%;
right: 40%;
}
90% {
bottom: 50%;
right: 25%;
}
100% {
bottom: -50%;
right: 0;
}
}
@keyframes aurora-border {
0% {
border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
}
25% {
border-radius: 47% 29% 39% 49% / 61% 19% 66% 26%;
}
50% {
border-radius: 57% 23% 47% 72% / 63% 17% 66% 33%;
}
75% {
border-radius: 28% 49% 29% 100% / 93% 20% 64% 25%;
}
100% {
border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
}
}
</style> -->
</head>
<body class="min-h-screen bg-black flex items-center justify-center overflow-hidden text-white font-sans">
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full max-w-2xl bg-black">
<div class="relative text-center flex items-center justify-center flex-wrap gap-4 bg-black flex items-center justify-center overflow-hidden text-white font-sans">
<div class="text-center">
<h1 class="text-[clamp(3rem,8vw,7rem)] font-extrabold tracking-tight relative overflow-hidden">
Beautiful
<div class="absolute inset-0 z-10 mix-blend-darken pointer-events-none">
<div class="absolute w-[60vw] h-[60vw] bg-cyan-400 rounded-[37%_29%_27%_27%/28%_25%_41%_37%] filter blur-[1rem] mix-blend-overlay animate-[aurora-border_6s_ease-in-out_infinite,aurora-1_5s_ease-in-out_infinite_alternate]"
style="animation-name: aurora-border, aurora-1;"></div>
<div class="absolute w-[60vw] h-[60vw] bg-yellow-400 rounded-[37%_29%_27%_27%/28%_25%_41%_37%] filter blur-[1rem] mix-blend-overlay animate-[aurora-border_6s_ease-in-out_infinite,aurora-2_5s_ease-in-out_infinite_alternate]"
style="animation-name: aurora-border, aurora-2;"></div>
<div class="absolute w-[60vw] h-[60vw] bg-green-400 rounded-[37%_29%_27%_27%/28%_25%_41%_37%] filter blur-[1rem] mix-blend-overlay animate-[aurora-border_6s_ease-in-out_infinite,aurora-3_3s_ease-in-out_infinite_alternate]"
style="animation-name: aurora-border, aurora-3;"></div>
<div class="absolute w-[60vw] h-[60vw] bg-purple-500 rounded-[37%_29%_27%_27%/28%_25%_41%_37%] filter blur-[1rem] mix-blend-overlay animate-[aurora-border_6s_ease-in-out_infinite,aurora-4_13s_ease-in-out_infinite_alternate]"
style="animation-name: aurora-border, aurora-4;"></div>
</div>
</h1>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/lightwind@2.7.0/tailwind.js"></script>
</body>
</html>