lightswind
Version:
A modern frontend library with pre-built Tailwind CSS components for building responsive and interactive user interfaces.
44 lines (39 loc) • 1.44 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</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>
p.shadow::before {
content: "Lightswind Ui";
position: absolute;
top: 100%;
left: 0;
right: 0;
scale: 1 -1;
opacity: 0.25;
color: white;
z-index: -1;
transform: rotateX(-40deg) scaleX(123%);
}
p.shadow::after {
content: "";
position: absolute;
top: 100%;
left: -50%;
width: 200%;
height: 150%;
background: linear-gradient(to bottom, transparent, #000 85%);
}
</style>
</head>
<body class="bg-black grid min-h-screen place-content-center font-system-ui">
<div class="layered-text fixed inset-0 mx-auto grid place-content-center overflow-hidden h-auto">
<p class="shadow text-primarylw font-primarylw font-bold leading-[0.75] text-[1.5rem] font-extrabold uppercase relative
sm:text-[3rem] md:text-[4rem] lg:text-[5rem]" style="perspective: 100px;">Lightswind Ui</p>
</div>
</body>
</html>