Skip to content

Instantly share code, notes, and snippets.

@javedbaloch4

javedbaloch4/tab.html

Last active September 9, 2020 21:31
Show Gist options
  • Save javedbaloch4/d72214ad3e8285bad7cd1f329628a27c to your computer and use it in GitHub Desktop.
Save javedbaloch4/d72214ad3e8285bad7cd1f329628a27c to your computer and use it in GitHub Desktop.
Download ZIP
Using AlpineJS & Tailwind to create a tabs & switch between them.
Raw
tab.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Tailwind -->
<link href="https://unpkg.com/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="p-10">
<h1 class="text-3xl">TailwindCSS & AlphineJS Tabs</h1>
<div
x-data="{
openTab: 1,
activeClasses: 'border-l border-t border-r rounded-t text-blue-700',
inactiveClasses: 'text-blue-500 hover:text-blue-800'
}"
class="p-6"
>
<ul class="flex border-b">
<li @click="openTab = 1" :class="{ '-mb-px': openTab === 1 }" class="-mb-px mr-1">
<a :class="openTab === 1 ? activeClasses : inactiveClasses" class="bg-white inline-block py-2 px-4 font-semibold" href="#">
Tab 1
</a>
</li>
<li @click="openTab = 2" :class="{ '-mb-px': openTab === 2 }" class="mr-1">
<a :class="openTab === 2 ? activeClasses : inactiveClasses" class="bg-white inline-block py-2 px-4 font-semibold" href="#">Tab 2</a>
</li>
<li @click="openTab = 3" :class="{ '-mb-px': openTab === 3 }" class="mr-1">
<a :class="openTab === 3 ? activeClasses : inactiveClasses" class="bg-white inline-block py-2 px-4 font-semibold" href="#">Tab 3</a>
</li>
</ul>
<div class="w-full pt-4">
<div x-show="openTab === 1">Tab #1</div>
<div x-show="openTab === 2">Tab #2</div>
<div x-show="openTab === 3">Tab #3</div>
</div>
</div>
</div>
<!-- Alpine.js -->
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment