Tabs Components
Beautiful tabs components built with TailwindCSS. Perfect for organizing content with tab navigation and smooth transitions.
1. Basic Tabs
Simple tab navigation with content switching and smooth transitions.
Content for Tab 1
This is the content for the first tab. You can put any content here.
Content for Tab 2
This is the content for the second tab. Different content here.
Content for Tab 3
This is the content for the third tab. More content here.
<!-- Basic Tabs -->
<div x-data="{ activeTab: 'tab1' }">
<div class="flex border-b border-gray-200">
<button @click="activeTab = 'tab1'" :class="activeTab === 'tab1' ? 'border-purple-500 text-purple-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'" class="py-2 px-4 border-b-2 font-medium text-sm">Tab 1</button>
<button @click="activeTab = 'tab2'" :class="activeTab === 'tab2' ? 'border-purple-500 text-purple-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'" class="py-2 px-4 border-b-2 font-medium text-sm">Tab 2</button>
<button @click="activeTab = 'tab3'" :class="activeTab === 'tab3' ? 'border-purple-500 text-purple-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'" class="py-2 px-4 border-b-2 font-medium text-sm">Tab 3</button>
</div>
<div class="mt-4">
<div x-show="activeTab === 'tab1'" class="p-4 bg-white rounded-lg shadow-sm">
<h3 class="font-semibold">Content for Tab 1</h3>
<p class="text-gray-600 mt-2">This is the content for the first tab.</p>
</div>
<div x-show="activeTab === 'tab2'" class="p-4 bg-white rounded-lg shadow-sm">
<h3 class="font-semibold">Content for Tab 2</h3>
<p class="text-gray-600 mt-2">This is the content for the second tab.</p>
</div>
<div x-show="activeTab === 'tab3'" class="p-4 bg-white rounded-lg shadow-sm">
<h3 class="font-semibold">Content for Tab 3</h3>
<p class="text-gray-600 mt-2">This is the content for the third tab.</p>
</div>
</div>
</div><template>
<!-- Basic Tabs -->
<div>
<div class="flex border-b border-gray-200">
<button @click="activeTab = 'tab1'" :class="activeTab === 'tab1' ? 'border-purple-500 text-purple-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'" class="py-2 px-4 border-b-2 font-medium text-sm">Tab 1</button>
<button @click="activeTab = 'tab2'" :class="activeTab === 'tab2' ? 'border-purple-500 text-purple-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'" class="py-2 px-4 border-b-2 font-medium text-sm">Tab 2</button>
<button @click="activeTab = 'tab3'" :class="activeTab === 'tab3' ? 'border-purple-500 text-purple-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'" class="py-2 px-4 border-b-2 font-medium text-sm">Tab 3</button>
</div>
<div class="mt-4">
<div v-show="activeTab === 'tab1'" class="p-4 bg-white rounded-lg shadow-sm">
<h3 class="font-semibold">Content for Tab 1</h3>
<p class="text-gray-600 mt-2">This is the content for the first tab.</p>
</div>
<div v-show="activeTab === 'tab2'" class="p-4 bg-white rounded-lg shadow-sm">
<h3 class="font-semibold">Content for Tab 2</h3>
<p class="text-gray-600 mt-2">This is the content for the second tab.</p>
</div>
<div v-show="activeTab === 'tab3'" class="p-4 bg-white rounded-lg shadow-sm">
<h3 class="font-semibold">Content for Tab 3</h3>
<p class="text-gray-600 mt-2">This is the content for the third tab.</p>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
const activeTab = ref('tab1')
</script>import React, { useState } from 'react'
export default function BasicTabs() {
const [activeTab, setActiveTab] = useState('tab1')
return (
<div className="max-w-md mx-auto">
<div className="flex border-b border-gray-200">
<button onClick={() => setActiveTab('tab1')} className={`py-2 px-4 border-b-2 font-medium text-sm ${activeTab === 'tab1' ? 'border-purple-500 text-purple-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}`}>Tab 1</button>
<button onClick={() => setActiveTab('tab2')} className={`py-2 px-4 border-b-2 font-medium text-sm ${activeTab === 'tab2' ? 'border-purple-500 text-purple-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}`}>Tab 2</button>
<button onClick={() => setActiveTab('tab3')} className={`py-2 px-4 border-b-2 font-medium text-sm ${activeTab === 'tab3' ? 'border-purple-500 text-purple-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}`}>Tab 3</button>
</div>
<div className="mt-4">
{activeTab === 'tab1' && (
<div className="p-4 bg-white rounded-lg shadow-sm">
<h3 className="font-semibold">Content for Tab 1</h3>
<p className="text-gray-600 mt-2">This is the content for the first tab.</p>
</div>
)}
{activeTab === 'tab2' && (
<div className="p-4 bg-white rounded-lg shadow-sm">
<h3 className="font-semibold">Content for Tab 2</h3>
<p className="text-gray-600 mt-2">This is the content for the second tab.</p>
</div>
)}
{activeTab === 'tab3' && (
<div className="p-4 bg-white rounded-lg shadow-sm">
<h3 className="font-semibold">Content for Tab 3</h3>
<p className="text-gray-600 mt-2">This is the content for the third tab.</p>
</div>
)}
</div>
</div>
)
}2. Pill Tabs
Rounded pill-style tabs with a modern look and smooth transitions.
Content for Tab 1
This is the content for the first tab with pill-style navigation.
Content for Tab 2
This is the content for the second tab with pill-style navigation.
Content for Tab 3
This is the content for the third tab with pill-style navigation.
<!-- Pill Tabs -->
<div x-data="{ activeTab: 'tab1' }">
<div class="flex bg-gray-100 p-1 rounded-lg">
<button @click="activeTab = 'tab1'" :class="activeTab === 'tab1' ? 'bg-white shadow-sm' : 'text-gray-500 hover:text-gray-700'" class="flex-1 py-2 px-4 rounded-md font-medium text-sm transition-all">Tab 1</button>
<button @click="activeTab = 'tab2'" :class="activeTab === 'tab2' ? 'bg-white shadow-sm' : 'text-gray-500 hover:text-gray-700'" class="flex-1 py-2 px-4 rounded-md font-medium text-sm transition-all">Tab 2</button>
<button @click="activeTab = 'tab3'" :class="activeTab === 'tab3' ? 'bg-white shadow-sm' : 'text-gray-500 hover:text-gray-700'" class="flex-1 py-2 px-4 rounded-md font-medium text-sm transition-all">Tab 3</button>
</div>
<div class="mt-4">
<div x-show="activeTab === 'tab1'" class="p-4 bg-white rounded-lg shadow-sm">
<h3 class="font-semibold">Content for Tab 1</h3>
<p class="text-gray-600 mt-2">This is the content for the first tab.</p>
</div>
<div x-show="activeTab === 'tab2'" class="p-4 bg-white rounded-lg shadow-sm">
<h3 class="font-semibold">Content for Tab 2</h3>
<p class="text-gray-600 mt-2">This is the content for the second tab.</p>
</div>
<div x-show="activeTab === 'tab3'" class="p-4 bg-white rounded-lg shadow-sm">
<h3 class="font-semibold">Content for Tab 3</h3>
<p class="text-gray-600 mt-2">This is the content for the third tab.</p>
</div>
</div>
</div><template>
<!-- Pill Tabs -->
<div>
<div class="flex bg-gray-100 p-1 rounded-lg">
<button @click="activeTab = 'tab1'" :class="activeTab === 'tab1' ? 'bg-white shadow-sm' : 'text-gray-500 hover:text-gray-700'" class="flex-1 py-2 px-4 rounded-md font-medium text-sm transition-all">Tab 1</button>
<button @click="activeTab = 'tab2'" :class="activeTab === 'tab2' ? 'bg-white shadow-sm' : 'text-gray-500 hover:text-gray-700'" class="flex-1 py-2 px-4 rounded-md font-medium text-sm transition-all">Tab 2</button>
<button @click="activeTab = 'tab3'" :class="activeTab === 'tab3' ? 'bg-white shadow-sm' : 'text-gray-500 hover:text-gray-700'" class="flex-1 py-2 px-4 rounded-md font-medium text-sm transition-all">Tab 3</button>
</div>
<div class="mt-4">
<div v-show="activeTab === 'tab1'" class="p-4 bg-white rounded-lg shadow-sm">
<h3 class="font-semibold">Content for Tab 1</h3>
<p class="text-gray-600 mt-2">This is the content for the first tab.</p>
</div>
<div v-show="activeTab === 'tab2'" class="p-4 bg-white rounded-lg shadow-sm">
<h3 class="font-semibold">Content for Tab 2</h3>
<p class="text-gray-600 mt-2">This is the content for the second tab.</p>
</div>
<div v-show="activeTab === 'tab3'" class="p-4 bg-white rounded-lg shadow-sm">
<h3 class="font-semibold">Content for Tab 3</h3>
<p class="text-gray-600 mt-2">This is the content for the third tab.</p>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
const activeTab = ref('tab1')
</script>import React, { useState } from 'react'
export default function PillTabs() {
const [activeTab, setActiveTab] = useState('tab1')
return (
<div className="max-w-md mx-auto">
<div className="flex bg-gray-100 p-1 rounded-lg">
<button onClick={() => setActiveTab('tab1')} className={`flex-1 py-2 px-4 rounded-md font-medium text-sm transition-all ${activeTab === 'tab1' ? 'bg-white shadow-sm' : 'text-gray-500 hover:text-gray-700'}`}>Tab 1</button>
<button onClick={() => setActiveTab('tab2')} className={`flex-1 py-2 px-4 rounded-md font-medium text-sm transition-all ${activeTab === 'tab2' ? 'bg-white shadow-sm' : 'text-gray-500 hover:text-gray-700'}`}>Tab 2</button>
<button onClick={() => setActiveTab('tab3')} className={`flex-1 py-2 px-4 rounded-md font-medium text-sm transition-all ${activeTab === 'tab3' ? 'bg-white shadow-sm' : 'text-gray-500 hover:text-gray-700'}`}>Tab 3</button>
</div>
<div className="mt-4">
{activeTab === 'tab1' && (
<div className="p-4 bg-white rounded-lg shadow-sm">
<h3 className="font-semibold">Content for Tab 1</h3>
<p className="text-gray-600 mt-2">This is the content for the first tab.</p>
</div>
)}
{activeTab === 'tab2' && (
<div className="p-4 bg-white rounded-lg shadow-sm">
<h3 className="font-semibold">Content for Tab 2</h3>
<p className="text-gray-600 mt-2">This is the content for the second tab.</p>
</div>
)}
{activeTab === 'tab3' && (
<div className="p-4 bg-white rounded-lg shadow-sm">
<h3 className="font-semibold">Content for Tab 3</h3>
<p className="text-gray-600 mt-2">This is the content for the third tab.</p>
</div>
)}
</div>
</div>
)
}3. Vertical Tabs
Tabs arranged vertically with content displayed alongside.
Content for Tab 1
This is the content for the first vertical tab.
Content for Tab 2
This is the content for the second vertical tab.
Content for Tab 3
This is the content for the third vertical tab.
<!-- Vertical Tabs -->
<div x-data="{ activeTab: 'tab1' }">
<div class="flex max-w-4xl mx-auto">
<div class="w-1/4 border-r border-gray-200">
<button @click="activeTab = 'tab1'" :class="activeTab === 'tab1' ? 'bg-purple-100 text-purple-700 border-r-2 border-purple-500' : 'text-gray-500 hover:text-gray-700 hover:bg-gray-100'" class="w-full text-left py-3 px-4 font-medium text-sm">Tab 1</button>
<button @click="activeTab = 'tab2'" :class="activeTab === 'tab2' ? 'bg-purple-100 text-purple-700 border-r-2 border-purple-500' : 'text-gray-500 hover:text-gray-700 hover:bg-gray-100'" class="w-full text-left py-3 px-4 font-medium text-sm">Tab 2</button>
<button @click="activeTab = 'tab3'" :class="activeTab === 'tab3' ? 'bg-purple-100 text-purple-700 border-r-2 border-purple-500' : 'text-gray-500 hover:text-gray-700 hover:bg-gray-100'" class="w-full text-left py-3 px-4 font-medium text-sm">Tab 3</button>
</div>
<div class="w-3/4 p-4">
<div x-show="activeTab === 'tab1'" class="p-4 bg-white rounded-lg shadow-sm">
<h3 class="font-semibold">Content for Tab 1</h3>
<p class="text-gray-600 mt-2">This is the content for the first vertical tab.</p>
</div>
<div x-show="activeTab === 'tab2'" class="p-4 bg-white rounded-lg shadow-sm">
<h3 class="font-semibold">Content for Tab 2</h3>
<p class="text-gray-600 mt-2">This is the content for the second vertical tab.</p>
</div>
<div x-show="activeTab === 'tab3'" class="p-4 bg-white rounded-lg shadow-sm">
<h3 class="font-semibold">Content for Tab 3</h3>
<p class="text-gray-600 mt-2">This is the content for the third vertical tab.</p>
</div>
</div>
</div>
</div><template>
<!-- Vertical Tabs -->
<div>
<div class="flex max-w-4xl mx-auto">
<div class="w-1/4 border-r border-gray-200">
<button @click="activeTab = 'tab1'" :class="activeTab === 'tab1' ? 'bg-purple-100 text-purple-700 border-r-2 border-purple-500' : 'text-gray-500 hover:text-gray-700 hover:bg-gray-100'" class="w-full text-left py-3 px-4 font-medium text-sm">Tab 1</button>
<button @click="activeTab = 'tab2'" :class="activeTab === 'tab2' ? 'bg-purple-100 text-purple-700 border-r-2 border-purple-500' : 'text-gray-500 hover:text-gray-700 hover:bg-gray-100'" class="w-full text-left py-3 px-4 font-medium text-sm">Tab 2</button>
<button @click="activeTab = 'tab3'" :class="activeTab === 'tab3' ? 'bg-purple-100 text-purple-700 border-r-2 border-purple-500' : 'text-gray-500 hover:text-gray-700 hover:bg-gray-100'" class="w-full text-left py-3 px-4 font-medium text-sm">Tab 3</button>
</div>
<div class="w-3/4 p-4">
<div v-show="activeTab === 'tab1'" class="p-4 bg-white rounded-lg shadow-sm">
<h3 class="font-semibold">Content for Tab 1</h3>
<p class="text-gray-600 mt-2">This is the content for the first vertical tab.</p>
</div>
<div v-show="activeTab === 'tab2'" class="p-4 bg-white rounded-lg shadow-sm">
<h3 class="font-semibold">Content for Tab 2</h3>
<p class="text-gray-600 mt-2">This is the content for the second vertical tab.</p>
</div>
<div v-show="activeTab === 'tab3'" class="p-4 bg-white rounded-lg shadow-sm">
<h3 class="font-semibold">Content for Tab 3</h3>
<p class="text-gray-600 mt-2">This is the content for the third vertical tab.</p>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
const activeTab = ref('tab1')
</script>import React, { useState } from 'react'
export default function VerticalTabs() {
const [activeTab, setActiveTab] = useState('tab1')
return (
<div className="flex max-w-4xl mx-auto">
<div className="w-1/4 border-r border-gray-200">
<button onClick={() => setActiveTab('tab1')} className={`w-full text-left py-3 px-4 font-medium text-sm ${activeTab === 'tab1' ? 'bg-purple-100 text-purple-700 border-r-2 border-purple-500' : 'text-gray-500 hover:text-gray-700 hover:bg-gray-100'}`}>Tab 1</button>
<button onClick={() => setActiveTab('tab2')} className={`w-full text-left py-3 px-4 font-medium text-sm ${activeTab === 'tab2' ? 'bg-purple-100 text-purple-700 border-r-2 border-purple-500' : 'text-gray-500 hover:text-gray-700 hover:bg-gray-100'}`}>Tab 2</button>
<button onClick={() => setActiveTab('tab3')} className={`w-full text-left py-3 px-4 font-medium text-sm ${activeTab === 'tab3' ? 'bg-purple-100 text-purple-700 border-r-2 border-purple-500' : 'text-gray-500 hover:text-gray-700 hover:bg-gray-100'}`}>Tab 3</button>
</div>
<div className="w-3/4 p-4">
{activeTab === 'tab1' && (
<div className="p-4 bg-white rounded-lg shadow-sm">
<h3 className="font-semibold">Content for Tab 1</h3>
<p className="text-gray-600 mt-2">This is the content for the first vertical tab.</p>
</div>
)}
{activeTab === 'tab2' && (
<div className="p-4 bg-white rounded-lg shadow-sm">
<h3 className="font-semibold">Content for Tab 2</h3>
<p className="text-gray-600 mt-2">This is the content for the second vertical tab.</p>
</div>
)}
{activeTab === 'tab3' && (
<div className="p-4 bg-white rounded-lg shadow-sm">
<h3 className="font-semibold">Content for Tab 3</h3>
<p className="text-gray-600 mt-2">This is the content for the third vertical tab.</p>
</div>
)}
</div>
</div>
)
}4. Icon Tabs
Tabs with icons for better visual identification.
Content for Tab 1
This is the content for the first icon tab.
Content for Tab 2
This is the content for the second icon tab.
Content for Tab 3
This is the content for the third icon tab.
<!-- Icon Tabs -->
<div x-data="{ activeTab: 'tab1' }">
<div class="flex border-b border-gray-200">
<button @click="activeTab = 'tab1'" :class="activeTab === 'tab1' ? 'border-purple-500 text-purple-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'" class="flex items-center py-2 px-4 border-b-2 font-medium text-sm">
<svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"/></svg>
Tab 1
</button>
<button @click="activeTab = 'tab2'" :class="activeTab === 'tab2' ? 'border-purple-500 text-purple-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'" class="flex items-center py-2 px-4 border-b-2 font-medium text-sm">
<svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/></svg>
Tab 2
</button>
<button @click="activeTab = 'tab3'" :class="activeTab === 'tab3' ? 'border-purple-500 text-purple-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'" class="flex items-center py-2 px-4 border-b-2 font-medium text-sm">
<svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M3 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"/></svg>
Tab 3
</button>
</div>
<div class="mt-4">
<div x-show="activeTab === 'tab1'" class="p-4 bg-white rounded-lg shadow-sm">
<h3 class="font-semibold">Content for Tab 1</h3>
<p class="text-gray-600 mt-2">This is the content for the first icon tab.</p>
</div>
<div x-show="activeTab === 'tab2'" class="p-4 bg-white rounded-lg shadow-sm">
<h3 class="font-semibold">Content for Tab 2</h3>
<p class="text-gray-600 mt-2">This is the content for the second icon tab.</p>
</div>
<div x-show="activeTab === 'tab3'" class="p-4 bg-white rounded-lg shadow-sm">
<h3 class="font-semibold">Content for Tab 3</h3>
<p class="text-gray-600 mt-2">This is the content for the third icon tab.</p>
</div>
</div>
</div><template>
<!-- Icon Tabs -->
<div>
<div class="flex border-b border-gray-200">
<button @click="activeTab = 'tab1'" :class="activeTab === 'tab1' ? 'border-purple-500 text-purple-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'" class="flex items-center py-2 px-4 border-b-2 font-medium text-sm">
<svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"/></svg>
Tab 1
</button>
<button @click="activeTab = 'tab2'" :class="activeTab === 'tab2' ? 'border-purple-500 text-purple-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'" class="flex items-center py-2 px-4 border-b-2 font-medium text-sm">
<svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/></svg>
Tab 2
</button>
<button @click="activeTab = 'tab3'" :class="activeTab === 'tab3' ? 'border-purple-500 text-purple-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'" class="flex items-center py-2 px-4 border-b-2 font-medium text-sm">
<svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M3 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"/></svg>
Tab 3
</button>
</div>
<div class="mt-4">
<div v-show="activeTab === 'tab1'" class="p-4 bg-white rounded-lg shadow-sm">
<h3 class="font-semibold">Content for Tab 1</h3>
<p class="text-gray-600 mt-2">This is the content for the first icon tab.</p>
</div>
<div v-show="activeTab === 'tab2'" class="p-4 bg-white rounded-lg shadow-sm">
<h3 class="font-semibold">Content for Tab 2</h3>
<p class="text-gray-600 mt-2">This is the content for the second icon tab.</p>
</div>
<div v-show="activeTab === 'tab3'" class="p-4 bg-white rounded-lg shadow-sm">
<h3 class="font-semibold">Content for Tab 3</h3>
<p class="text-gray-600 mt-2">This is the content for the third icon tab.</p>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
const activeTab = ref('tab1')
</script>import React, { useState } from 'react'
export default function IconTabs() {
const [activeTab, setActiveTab] = useState('tab1')
return (
<div className="max-w-md mx-auto">
<div className="flex border-b border-gray-200">
<button onClick={() => setActiveTab('tab1')} className={`flex items-center py-2 px-4 border-b-2 font-medium text-sm ${activeTab === 'tab1' ? 'border-purple-500 text-purple-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}`}>
<svg className="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"/></svg>
Tab 1
</button>
<button onClick={() => setActiveTab('tab2')} className={`flex items-center py-2 px-4 border-b-2 font-medium text-sm ${activeTab === 'tab2' ? 'border-purple-500 text-purple-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}`}>
<svg className="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/></svg>
Tab 2
</button>
<button onClick={() => setActiveTab('tab3')} className={`flex items-center py-2 px-4 border-b-2 font-medium text-sm ${activeTab === 'tab3' ? 'border-purple-500 text-purple-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}`}>
<svg className="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M3 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"/></svg>
Tab 3
</button>
</div>
<div className="mt-4">
{activeTab === 'tab1' && (
<div className="p-4 bg-white rounded-lg shadow-sm">
<h3 className="font-semibold">Content for Tab 1</h3>
<p className="text-gray-600 mt-2">This is the content for the first icon tab.</p>
</div>
)}
{activeTab === 'tab2' && (
<div className="p-4 bg-white rounded-lg shadow-sm">
<h3 className="font-semibold">Content for Tab 2</h3>
<p className="text-gray-600 mt-2">This is the content for the second icon tab.</p>
</div>
)}
{activeTab === 'tab3' && (
<div className="p-4 bg-white rounded-lg shadow-sm">
<h3 className="font-semibold">Content for Tab 3</h3>
<p className="text-gray-600 mt-2">This is the content for the third icon tab.</p>
</div>
)}
</div>
</div>
)
}5. Underline Tabs
Tabs with animated underlines for a sleek look.
Content for Tab 1
This is the content for the first underline tab.
Content for Tab 2
This is the content for the second underline tab.
Content for Tab 3
This is the content for the third underline tab.
<!-- Underline Tabs -->
<div x-data="{ activeTab: 'tab1' }">
<div class="flex space-x-8 border-b border-gray-200">
<button @click="activeTab = 'tab1'" :class="activeTab === 'tab1' ? 'text-purple-600 border-b-2 border-purple-600' : 'text-gray-500 hover:text-gray-700'" class="py-2 px-1 font-medium text-sm transition-colors">Tab 1</button>
<button @click="activeTab = 'tab2'" :class="activeTab === 'tab2' ? 'text-purple-600 border-b-2 border-purple-600' : 'text-gray-500 hover:text-gray-700'" class="py-2 px-1 font-medium text-sm transition-colors">Tab 2</button>
<button @click="activeTab = 'tab3'" :class="activeTab === 'tab3' ? 'text-purple-600 border-b-2 border-purple-600' : 'text-gray-500 hover:text-gray-700'" class="py-2 px-1 font-medium text-sm transition-colors">Tab 3</button>
</div>
<div class="mt-4">
<div x-show="activeTab === 'tab1'" class="p-4 bg-white rounded-lg shadow-sm">
<h3 class="font-semibold">Content for Tab 1</h3>
<p class="text-gray-600 mt-2">This is the content for the first underline tab.</p>
</div>
<div x-show="activeTab === 'tab2'" class="p-4 bg-white rounded-lg shadow-sm">
<h3 class="font-semibold">Content for Tab 2</h3>
<p class="text-gray-600 mt-2">This is the content for the second underline tab.</p>
</div>
<div x-show="activeTab === 'tab3'" class="p-4 bg-white rounded-lg shadow-sm">
<h3 class="font-semibold">Content for Tab 3</h3>
<p class="text-gray-600 mt-2">This is the content for the third underline tab.</p>
</div>
</div>
</div><template>
<!-- Underline Tabs -->
<div>
<div class="flex space-x-8 border-b border-gray-200">
<button @click="activeTab = 'tab1'" :class="activeTab === 'tab1' ? 'text-purple-600 border-b-2 border-purple-600' : 'text-gray-500 hover:text-gray-700'" class="py-2 px-1 font-medium text-sm transition-colors">Tab 1</button>
<button @click="activeTab = 'tab2'" :class="activeTab === 'tab2' ? 'text-purple-600 border-b-2 border-purple-600' : 'text-gray-500 hover:text-gray-700'" class="py-2 px-1 font-medium text-sm transition-colors">Tab 2</button>
<button @click="activeTab = 'tab3'" :class="activeTab === 'tab3' ? 'text-purple-600 border-b-2 border-purple-600' : 'text-gray-500 hover:text-gray-700'" class="py-2 px-1 font-medium text-sm transition-colors">Tab 3</button>
</div>
<div class="mt-4">
<div v-show="activeTab === 'tab1'" class="p-4 bg-white rounded-lg shadow-sm">
<h3 class="font-semibold">Content for Tab 1</h3>
<p class="text-gray-600 mt-2">This is the content for the first underline tab.</p>
</div>
<div v-show="activeTab === 'tab2'" class="p-4 bg-white rounded-lg shadow-sm">
<h3 class="font-semibold">Content for Tab 2</h3>
<p class="text-gray-600 mt-2">This is the content for the second underline tab.</p>
</div>
<div v-show="activeTab === 'tab3'" class="p-4 bg-white rounded-lg shadow-sm">
<h3 class="font-semibold">Content for Tab 3</h3>
<p class="text-gray-600 mt-2">This is the content for the third underline tab.</p>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
const activeTab = ref('tab1')
</script>import React, { useState } from 'react'
export default function UnderlineTabs() {
const [activeTab, setActiveTab] = useState('tab1')
return (
<div className="max-w-md mx-auto">
<div className="flex space-x-8 border-b border-gray-200">
<button onClick={() => setActiveTab('tab1')} className={`py-2 px-1 font-medium text-sm transition-colors ${activeTab === 'tab1' ? 'text-purple-600 border-b-2 border-purple-600' : 'text-gray-500 hover:text-gray-700'}`}>Tab 1</button>
<button onClick={() => setActiveTab('tab2')} className={`py-2 px-1 font-medium text-sm transition-colors ${activeTab === 'tab2' ? 'text-purple-600 border-b-2 border-purple-600' : 'text-gray-500 hover:text-gray-700'}`}>Tab 2</button>
<button onClick={() => setActiveTab('tab3')} className={`py-2 px-1 font-medium text-sm transition-colors ${activeTab === 'tab3' ? 'text-purple-600 border-b-2 border-purple-600' : 'text-gray-500 hover:text-gray-700'}`}>Tab 3</button>
</div>
<div className="mt-4">
{activeTab === 'tab1' && (
<div className="p-4 bg-white rounded-lg shadow-sm">
<h3 className="font-semibold">Content for Tab 1</h3>
<p className="text-gray-600 mt-2">This is the content for the first underline tab.</p>
</div>
)}
{activeTab === 'tab2' && (
<div className="p-4 bg-white rounded-lg shadow-sm">
<h3 className="font-semibold">Content for Tab 2</h3>
<p className="text-gray-600 mt-2">This is the content for the second underline tab.</p>
</div>
)}
{activeTab === 'tab3' && (
<div className="p-4 bg-white rounded-lg shadow-sm">
<h3 className="font-semibold">Content for Tab 3</h3>
<p className="text-gray-600 mt-2">This is the content for the third underline tab.</p>
</div>
)}
</div>
</div>
)
}