Skip to content

Instantly share code, notes, and snippets.

@javedbaloch4

javedbaloch4/Tabs.html

Last active June 6, 2023 23:42
Show Gist options
  • Save javedbaloch4/3f407cc3855069e20623820dbf57c4b8 to your computer and use it in GitHub Desktop.
Save javedbaloch4/3f407cc3855069e20623820dbf57c4b8 to your computer and use it in GitHub Desktop.
Download ZIP
Switching tabs using AlpineJS & TailwindCSS
Raw
Tabs.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Home</title>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.6.0/dist/alpine.min.js" defer></script>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="">
</head>
<body class="text-gray-800 bg-gray-200">
<div class="container mx-auto p-4 mb-4" x-data="{ tab: 'tab1' }">
<h2 class="text-2xl font-bold">Tabs</h2>
<ul class="flex border-b mt-6" >
<li class="-mb-px mr-1">
<a
class="inline-block rounded-t py-2 px-4 font-semibold hover:text-blue-800"
:class="{ 'bg-white text-blue-700 border-l border-t border-r' : tab === 'tab1' }"
href="#"
@click.prevent="tab = 'tab1'"
>Tab 1</a>
</li>
<li class="-mb-px mr-1">
<a
class="inline-block py-2 px-4 text-blue-500 hover:text-blue-800 font-semibold"
:class="{ 'bg-white text-blue-700 border-l border-t border-r' : tab === 'tab2' }"
href="#"
@click.prevent="tab = 'tab2'"
>Tab 2</a
>
</li>
<li class="-mb-px mr-1">
<a
class="inline-block py-2 px-4 text-blue-500 hover:text-blue-800 font-semibold"
:class="{ 'bg-white text-blue-700 border-l border-t border-r' : tab === 'tab3' }"
href="#"
@click.prevent="tab = 'tab3'"
>Tab 3</a
>
</li>
</ul>
<div class="content bg-white px-4 py-4 border-l border-r border-b pt-4">
<div x-show="tab === 'tab1'">
Tab1 content. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt sunt, consectetur eos quod perferendis mollitia consequuntur natus, porro molestiae qui iusto deserunt rerum tempore voluptatum itaque. Ad, nisi esse cum quidem consequuntur ullam obcaecati.
</div>
<div x-show="tab === 'tab2'">
Tab2 content. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt sunt, consectetur eos quod perferendis mollitia consequuntur natus, porro molestiae qui iusto deserunt rerum tempore voluptatum itaque. Ad, nisi esse cum quidem consequuntur ullam obcaecati.
</div>
<div x-show="tab === 'tab3'">
Tab3 content. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt sunt, consectetur eos quod perferendis mollitia consequuntur natus, porro molestiae qui iusto deserunt rerum tempore voluptatum itaque. Ad, nisi esse cum quidem consequuntur ullam obcaecati.
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment