lightswind
Version:
A modern frontend library with pre-built Tailwind CSS components for building responsive and interactive user interfaces.
111 lines (95 loc) • 6.59 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Relational Toggle Tab</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightwind@2.7.0/src/lightswind.css">
</head>
<body class="bg-gray-100 dark:bg-gray-900 transition-all">
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full max-w-2xl">
<div class="relative text-center flex items-center justify-center flex-wrap gap-4">
<div class="relative flex items-center justify-between w-[80vw] md:w-full gap-2
rounded-full bg-black dark:bg-gray-800 h-11 md:h-20 px-2 shadow-md text-gray-500 dark:text-gray-300">
<!-- Background for the active tab -->
<div id="relationalactiveTabBackground"
class="absolute h-10 md:h-16 rounded-full bg-primarylw dark:bg-primarylw duration-300" style="left: 0; width: 25%;">
</div>
<!-- Home Button -->
<button id="relationalhomeBtn"
class="z-10 flex items-center justify-center w-1/4 h-12 md:h-20 text-lg font-semibold
relative transition-colors duration-300 md:text-xl md:px-4 dark:text-gray-300 dark:hover:text-white"
onclick="relationalhandleTabClick('relationalHome')">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="mr-2 md:mr-2 text-2xl md:text-3xl size-7 dark:text-gray-300">
<path stroke-linecap="round" stroke-linejoin="round"
d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
</svg>
<span class="hidden md:inline">Home</span>
</button>
<!-- About Button -->
<button id="relationalaboutBtn"
class="z-10 flex items-center justify-center w-1/4 h-12 md:h-20 text-lg font-semibold
relative transition-colors duration-300 md:text-xl md:px-4 dark:text-gray-300 dark:hover:text-white"
onclick="relationalhandleTabClick('relationalAbout')">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="mr-2 md:mr-2 text-2xl md:text-3xl size-7 dark:text-gray-300">
<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>
<span class="hidden md:inline">About</span>
</button>
<!-- Contact Button -->
<button id="relationalcontactBtn"
class="z-10 flex items-center justify-center w-1/4 h-12 md:h-20 text-lg font-semibold
relative transition-colors duration-300 md:text-xl md:px-4 dark:text-gray-300 dark:hover:text-white"
onclick="relationalhandleTabClick('relationalContact')">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="mr-2 md:mr-2 text-2xl md:text-3xl size-7 dark:text-gray-300">
<path stroke-linecap="round" stroke-linejoin="round"
d="M14.25 9.75v-4.5m0 4.5h4.5m-4.5 0 6-6m-3 18c-8.284 0-15-6.716-15-15V4.5A2.25 2.25 0 0 1 4.5 2.25h1.372c.516 0 .966.351 1.091.852l1.106 4.423c.11.44-.054.902-.417 1.173l-1.293.97a1.062 1.062 0 0 0-.38 1.21 12.035 12.035 0 0 0 7.143 7.143c.441.162.928-.004 1.21-.38l.97-1.293a1.125 1.125 0 0 1 1.173-.417l4.423 1.106c.5.125.852.575.852 1.091V19.5a2.25 2.25 0 0 1-2.25 2.25h-2.25Z" />
</svg>
<span class="hidden md:inline">Contact</span>
</button>
<!-- Help Button -->
<button id="relationalhelpBtn"
class="z-10 flex items-center justify-center w-1/4 h-12 md:h-20 text-lg font-semibold
relative transition-colors duration-300 md:text-xl md:px-4 dark:text-gray-300 dark:hover:text-white"
onclick="relationalhandleTabClick('relationalHelp')">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="mr-2 md:mr-2 text-2xl md:text-3xl size-7 dark:text-gray-300">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" />
</svg>
<span class="hidden md:inline">Help</span>
</button>
</div>
</div>
</div>
<script>
let relationalactiveTab = 'relationalHome';
// Make Home button active by default
window.onload = function() {
relationalhandleTabClick('relationalHome');
};
function relationalhandleTabClick(relationaltab) {
relationalactiveTab = relationaltab;
const relationalactiveTabBackground = document.getElementById('relationalactiveTabBackground');
const relationalbuttons = ['relationalHome', 'relationalAbout', 'relationalContact', 'relationalHelp'];
relationalbuttons.forEach(function (button) {
const relationalbuttonElement = document.getElementById(button.toLowerCase() + 'Btn');
if (button === relationaltab) {
relationalbuttonElement.classList.add('text-white');
relationalbuttonElement.classList.remove('text-gray-700');
} else {
relationalbuttonElement.classList.remove('text-white');
relationalbuttonElement.classList.add('text-gray-700');
}
});
const relationaltabIndex = relationalbuttons.indexOf(relationaltab);
relationalactiveTabBackground.style.left = (relationaltabIndex * 25) + '%';
}
</script>
</body>
</html>