Skip to content

Instantly share code, notes, and snippets.

@kresnasatya

kresnasatya/index.html

Created August 3, 2021 08:23
Show Gist options
  • Save kresnasatya/f19dbb887fc450c0f786aaecea30da26 to your computer and use it in GitHub Desktop.
Save kresnasatya/f19dbb887fc450c0f786aaecea30da26 to your computer and use it in GitHub Desktop.
Download ZIP
Navtabs with Tailwinds and Alpine
Raw
index.html
<!-- Courtesy: https://davidgrzyb.com/nav-tabs-with-tailwind-and-alpinejs-tutorial/ -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nav Tabs with Tailwind and Alpine</title>
<link rel="stylesheet" href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css">
<script src="//unpkg.com/alpinejs" defer></script>
</head>
<body>
<div x-data="{
openTab: 1,
activeClasses: 'border-l border-t border-r rounded-t text-blue-700',
inactiveClasses: 'text-blue-500 hover:text-blue-700'
}" class="p-6">
<ul class="flex border-b">
<li @click="openTab = 1" :class="{ '-mb-px': openTab === 1 }" class="-mb-px mr-1">
<a href="#" :class="openTab === 1 ? activeClasses : inactiveClasses" class="bg-white inline-block py-2 px-4 font-semibold">
Active
</a>
</li>
<li @click="openTab = 2" :class="{ '-mb-px': openTab === 2 }" class="mr-1">
<!-- Set active class by using :class provided by Alpine -->
<a href="#" :class="openTab === 2 ? activeClasses : inactiveClasses" class="bg-white inline-block py-2 px-4 font-semibold">
Tab
</a>
</li>
<li @click="openTab = 3" :class="{ '-mb-px': openTab === 3 }" class="mr-1">
<a href="#" :class="openTab === 3 ? activeClasses : inactiveClasses" class="bg-white inline-block py-2 px-4 font-semibold">
Tab
</a>
</li>
</ul>
<div class="w-full">
<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>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment