lightswind
Version:
A modern frontend library with pre-built Tailwind CSS components for building responsive and interactive user interfaces.
57 lines (50 loc) • 2.99 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.2.0/src/lightswind.css">
</head>
<body>
<!-- ====== Primary Buton Group -->
<section class="py-20 lg:py-[100px] bg-gray-100 dark:bg-black">
<div class="container">
<div class="flex justify-center space-x-0">
<button
class="px-3 sm:px-4 md:px-6 py-1 sm:py-1.5 md:py-3 text-xs sm:text-sm md:text-base font-bold font-primarylw text-black dark:text-white border rounded-l-lg border-gray-300 dark:border-gray-700 hover:bg-primarylw dark:hover:bg-primarylw hover:text-white dark:hover:text-white">
Button 1
</button>
<button
class="px-3 sm:px-4 md:px-6 py-1 sm:py-1.5 md:py-3 text-xs sm:text-sm md:text-base font-bold font-primarylw text-black dark:text-white border-t border-b border-gray-300 dark:border-gray-700 hover:bg-primarylw dark:hover:bg-primarylw hover:text-white dark:hover:text-white">
Button 2
</button>
<button
class="px-3 sm:px-4 md:px-6 py-1 sm:py-1.5 md:py-3 text-xs sm:text-sm md:text-base font-bold font-primarylw text-black dark:text-white border rounded-r-lg border-gray-300 dark:border-gray-700 hover:bg-primarylw dark:hover:bg-primarylw hover:text-white dark:hover:text-white">
Button 3
</button>
</div>
</div>
</section>
<!-- ====== Dark Buton Group -->
<section class="py-20 lg:py-[100px] bg-gray-100 dark:bg-black">
<div class="container">
<div class="flex justify-center space-x-0">
<button
class="px-3 sm:px-4 md:px-6 py-1 sm:py-1.5 md:py-3 text-xs sm:text-sm md:text-base font-bold font-primarylw text-black dark:text-white border rounded-l-lg border-gray-300 dark:border-gray-700 hover:bg-darklw dark:hover:bg-darklw hover:text-white dark:hover:text-white">
Button 1
</button>
<button
class="px-3 sm:px-4 md:px-6 py-1 sm:py-1.5 md:py-3 text-xs sm:text-sm md:text-base font-bold font-primarylw text-black dark:text-white border-t border-b border-gray-300 dark:border-gray-700 hover:bg-darklw dark:hover:bg-darklw hover:text-white dark:hover:text-white">
Button 2
</button>
<button
class="px-3 sm:px-4 md:px-6 py-1 sm:py-1.5 md:py-3 text-xs sm:text-sm md:text-base font-bold font-primarylw text-black dark:text-white border rounded-r-lg border-gray-300 dark:border-gray-700 hover:bg-darklw dark:hover:bg-darklw hover:text-white dark:hover:text-white">
Button 3
</button>
</div>
</div>
</section>
</body>
</html>