In this section, we'll create tabs using Tailwind CSS and JavaScript. We will building dynamic tabs, color-changing tabs, and vertical Tabs with Tailwind CSS and JavaScript
Example 1
Create a simple dynamic tabs using Tailwind CSS and JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
<title>Tailwind CSS Tabs With JavaScript</title>
</head>
<body>
<div class="w-64 mx-auto mt-10">
<div class="flex space-x-4">
<button id="tab1" class="py-2 px-4 bg-gray-300 rounded-t-lg">
Tab 1
</button>
<button id="tab2" class="py-2 px-4 bg-gray-300">Tab 2</button>
</div>
<div
id="tabContent1"
class="border-l border-r border-b border-gray-300 p-4 rounded-b-lg"
>
Content for Tab 1
</div>
<div
id="tabContent2"
class="hidden border-l border-r border-b border-gray-300 p-4 rounded-b-lg"
>
Content for Tab 2
</div>
</div>
<script>
const tab1 = document.getElementById("tab1");
const tab2 = document.getElementById("tab2");
const tabContent1 = document.getElementById("tabContent1");
const tabContent2 = document.getElementById("tabContent2");
tab1.addEventListener("click", () => {
tabContent1.style.display = "block";
tabContent2.style.display = "none";
});
tab2.addEventListener("click", () => {
tabContent1.style.display = "none";
tabContent2.style.display = "block";
});
</script>
</body>
</html>
tailwind javascript tabs
Example 2
Dynamically Changing Tab Colors with Tailwind CSS and JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
<title>Tailwind CSS Tabs With JavaScript</title>
</head>
<body>
<div class="w-64 mx-auto mt-10">
<div class="flex space-x-4">
<button id="tab1" class="py-2 px-4 bg-gray-300 rounded-t-lg">
Tab 1
</button>
<button id="tab2" class="py-2 px-4 bg-gray-300">Tab 2</button>
</div>
<div
id="tabContent1"
class="border-l border-r border-b border-gray-300 p-4 rounded-b-lg"
>
Content for Tab 1
</div>
<div
id="tabContent2"
class="hidden border-l border-r border-b border-gray-300 p-4 rounded-b-lg"
>
Content for Tab 2
</div>
</div>
<script>
const tab1 = document.getElementById("tab1");
const tab2 = document.getElementById("tab2");
const tabContent1 = document.getElementById("tabContent1");
const tabContent2 = document.getElementById("tabContent2");
tab1.addEventListener("click", () => {
tabContent1.style.display = "block";
tabContent2.style.display = "none";
tab1.classList.add("bg-gray-300");
tab2.classList.remove("bg-gray-300");
});
tab2.addEventListener("click", () => {
tabContent1.style.display = "none";
tabContent2.style.display = "block";
tab2.classList.add("bg-gray-300");
tab1.classList.remove("bg-gray-300");
});
</script>
</body>
</html>
tailwind javascript dynamically tabs
Example 3
Creating Vertical Tabs with Tailwind CSS and JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
<title>Tailwind CSS Tabs With JavaScript</title>
</head>
<body>
<div class="flex mt-10">
<div class="w-1/4">
<button id="tab1" class="py-2 px-4 w-full bg-gray-300 rounded-t-lg">Tab 1</button>
<button id="tab2" class="py-2 px-4 w-full bg-gray-300">Tab 2</button>
</div>
<div class="w-3/4 p-4">
<div id="tabContent1">Content for Tab 1</div>
<div id="tabContent2" class="hidden">Content for Tab 2</div>
</div>
</div>
<script>
const tab1 = document.getElementById("tab1");
const tab2 = document.getElementById("tab2");
const tabContent1 = document.getElementById("tabContent1");
const tabContent2 = document.getElementById("tabContent2");
tab1.addEventListener("click", () => {
tabContent1.style.display = "block";
tabContent2.style.display = "none";
tab1.classList.add("bg-gray-300");
tab2.classList.remove("bg-gray-300");
});
tab2.addEventListener("click", () => {
tabContent1.style.display = "none";
tabContent2.style.display = "block";
tab2.classList.add("bg-gray-300");
tab1.classList.remove("bg-gray-300");
});
</script>
</body>
</html>
