lightswind
Version:
A modern frontend library with pre-built Tailwind CSS components for building responsive and interactive user interfaces.
94 lines (82 loc) • 5.5 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>
@import url("https://fonts.googleapis.com/css2?family=Cardo:ital@0;1&family=Rubik:wght@400;700&display=swap");
body {
font-family: 'Rubik', sans-serif;
}
</style>
</head>
<body class="min-h-screen flex items-center justify-center bg-gray-100 font-primarylw">
<main class="grid gap-4 p-4 max-w-screen-lg mx-auto sm:grid-cols-2 lg:grid-cols-4">
<!-- Card 1 -->
<div class="relative flex items-end overflow-hidden rounded-lg bg-gray-100 shadow-lg group h-64">
<div class="absolute inset-0 bg-cover bg-center transform transition-transform duration-700 ease-out group-hover:scale-110"
style="background-image: url('https://images.pexels.com/photos/417173/pexels-photo-417173.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');">
</div>
<div class="absolute inset-0 bg-gradient-to-b from-transparent to-black opacity-50"></div>
<div
class="relative flex flex-col items-center text-white p-6 transform translate-y-full group-hover:translate-y-0 transition-transform duration-700 ease-out">
<h2 class="text-lg font-bold">Mountain View</h2>
<p class="mt-2 italic text-sm">Check out all of these gorgeous mountain trips with beautiful views of,
you guessed it, the mountains</p>
<button
class="mt-4 px-4 py-2 bg-darklw text-white font-bold text-xs uppercase tracking-wide rounded-lg
hover:bg-gray-800 focus:outline-none focus:ring focus:ring-yellow-400">View
Trips</button>
</div>
</div>
<!-- Card 2 -->
<div class="relative flex items-end overflow-hidden rounded-lg bg-gray-100 shadow-lg group h-64">
<div class="absolute inset-0 bg-cover bg-center transform transition-transform duration-700 ease-out group-hover:scale-110"
style="background-image: url('https://images.pexels.com/photos/457882/pexels-photo-457882.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');">
</div>
<div class="absolute inset-0 bg-gradient-to-b from-transparent to-black opacity-50"></div>
<div
class="relative flex flex-col items-center text-white p-6 transform translate-y-full group-hover:translate-y-0 transition-transform duration-700 ease-out">
<h2 class="text-lg font-bold">To The Beach</h2>
<p class="mt-2 italic text-sm">Plan your next beach trip with these fabulous destinations</p>
<button
class="mt-4 px-4 py-2 bg-darklw text-white font-bold text-xs uppercase tracking-wide rounded-lg hover:bg-gray-800 focus:outline-none focus:ring focus:ring-yellow-400">View
Trips</button>
</div>
</div>
<!-- Card 3 -->
<div class="relative flex items-end overflow-hidden rounded-lg bg-gray-100 shadow-lg group h-64">
<div class="absolute inset-0 bg-cover bg-center transform transition-transform duration-700 ease-out group-hover:scale-110"
style="background-image: url('https://images.pexels.com/photos/1001435/pexels-photo-1001435.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');">
</div>
<div class="absolute inset-0 bg-gradient-to-b from-transparent to-black opacity-50"></div>
<div
class="relative flex flex-col items-center text-white p-6 transform translate-y-full group-hover:translate-y-0 transition-transform duration-700 ease-out">
<h2 class="text-lg font-bold">Desert Destinations</h2>
<p class="mt-2 italic text-sm">It's the desert you've always dreamed of tourister visiting shedule</p>
<button
class="mt-4 px-4 py-2 bg-darklw text-white font-bold text-xs uppercase tracking-wide rounded-lg hover:bg-gray-800 focus:outline-none focus:ring focus:ring-yellow-400">Book
Now</button>
</div>
</div>
<!-- Card 4 -->
<div class="relative flex items-end overflow-hidden rounded-lg bg-gray-100 shadow-lg group h-64">
<div class="absolute inset-0 bg-cover bg-center transform transition-transform duration-700 ease-out group-hover:scale-110"
style="background-image: url('https://images.pexels.com/photos/142497/pexels-photo-142497.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');">
</div>
<div class="absolute inset-0 bg-gradient-to-b from-transparent to-black opacity-50"></div>
<div
class="relative flex flex-col items-center text-white p-6 transform translate-y-full group-hover:translate-y-0 transition-transform duration-700 ease-out">
<h2 class="text-lg font-bold">Into the Forest</h2>
<p class="mt-2 italic text-sm">Embark on an enchanting journey through lush, green forests.</p>
<button
class="mt-4 px-4 py-2 bg-darklw text-white font-bold text-xs uppercase tracking-wide rounded-lg hover:bg-gray-800 focus:outline-none focus:ring focus:ring-green-400">Discover
Now</button>
</div>
</div>
</main>
</body>
</html>