Basic Tabs - Tailwind Component
Tabs are quasi-navigation components which can highly improve website clarity and increase user experience.
tabs
Loading component...
256 lines
<div class="bg-white space-y-4 py-12">
<nav class="flex flex-row justify-center">
<button
class="text-indigo-700 py-4 px-4 inline-flex items-center hover:text-indigo-500 focus:outline-none border-b-2 font-medium border-indigo-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"
stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" />
</svg>
Podcast
</button>
<button class="text-gray-600 py-4 px-4 inline-flex items-center hover:text-indigo-500 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"
stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
Fashion
</button>
<button class="text-gray-600 py-4 px-4 inline-flex items-center hover:text-indigo-500 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"
stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3" />
</svg>
Music
</button>
<button class="hidden sm:inline-flex items-center text-gray-600 py-4 px-4 hover:text-indigo-500 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"
stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
</svg>
Video
</button>
<button class="hidden sm:inline-flex items-center text-gray-600 py-4 px-4 hover:text-indigo-500 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"
stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
</svg>
Education
</button>
</nav>
<nav class="flex flex-row justify-center">
<button
class="text-indigo-700 py-4 px-4 items-center flex-col justify-center hover:text-indigo-500 focus:outline-none border-b-2 font-medium border-indigo-500">
<span class=""><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mb-1 mx-auto" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" />
</svg>
</span>
<p>Podcast</p>
</button>
<button
class="text-gray-600 py-4 px-4 flex-col justify-center items-center hover:text-indigo-500 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mb-1 mx-auto" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
Fashion
</button>
<button
class="text-gray-600 py-4 px-4 flex-col justify-center items-center hover:text-indigo-500 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mb-1 mx-auto" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3" />
</svg>
Music
</button>
<button
class="hidden sm:block flex-col justify-center items-center text-gray-600 py-4 px-4 hover:text-indigo-500 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mb-1 mx-auto" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
</svg>
Video
</button>
<button
class="hidden sm:block flex-col justify-center items-center text-gray-600 py-4 px-4 hover:text-indigo-500 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mb-1 mx-auto" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
</svg>
Education
</button>
</nav>
<nav class="flex flex-row justify-center space-x-4">
<button
class="text-indigo-700 py-4 px-4 inline-flex items-center hover:text-indigo-800 rounded focus:outline-none font-medium bg-indigo-200 hover:bg-indigo-300">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"
stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" />
</svg>
Podcast
</button>
<button
class="text-gray-600 py-4 px-4 inline-flex items-center hover:text-indigo-500 focus:outline-none hover:bg-indigo-100">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"
stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
Fashion
</button>
<button
class="text-gray-600 py-4 px-4 inline-flex items-center hover:text-indigo-500 focus:outline-none hover:bg-indigo-100">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"
stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3" />
</svg>
Music
</button>
<button
class="hidden sm:inline-flex items-center text-gray-600 py-4 px-4 hover:text-indigo-500 focus:outline-none hover:bg-indigo-100">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"
stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
</svg>
Video
</button>
<button
class="hidden sm:inline-flex items-center text-gray-600 py-4 px-4 hover:text-indigo-500 focus:outline-none hover:bg-indigo-100">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"
stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
</svg>
Education
</button>
</nav>
<nav class="flex flex-row justify-center space-x-4">
<button
class="text-indigo-50 py-4 px-4 inline-flex items-center rounded focus:outline-none font-medium bg-indigo-800 hover:bg-indigo-600">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"
stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" />
</svg>
Podcast
</button>
<button
class="text-gray-600 py-4 px-4 inline-flex items-center hover:bg-indigo-600 hover:text-indigo-50 rounded focus:outline-none ">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"
stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
Fashion
</button>
<button
class="text-gray-600 py-4 px-4 inline-flex items-center focus:outline-none hover:bg-indigo-600 hover:text-indigo-50 rounded">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"
stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3" />
</svg>
Music
</button>
<button
class="hidden sm:inline-flex items-center text-gray-600 py-4 px-4 focus:outline-none hover:bg-indigo-600 hover:text-indigo-50 rounded">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"
stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
</svg>
Video
</button>
<button
class="hidden sm:inline-flex items-center text-gray-600 py-4 px-4 focus:outline-none hover:bg-indigo-600 hover:text-indigo-50 rounded">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"
stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
</svg>
Education
</button>
</nav>
<nav class="flex flex-row justify-center ">
<button
class="text-indigo-50 py-4 px-6 inline-flex items-center border-indigo-800 focus:outline-none font-medium border bg-indigo-800 hover:bg-indigo-600">
Podcast
</button>
<button
class="text-gray-600 py-4 px-6 inline-flex items-center hover:bg-indigo-600 hover:text-indigo-50 border-indigo-800 border focus:outline-none ">
Fashion
</button>
<button
class="text-gray-600 py-4 px-6 inline-flex items-center focus:outline-none hover:bg-indigo-600 hover:text-indigo-50 border-indigo-800 border">
Music
</button>
<button
class="hidden sm:inline-flex items-center text-gray-600 py-4 px-6 focus:outline-none hover:bg-indigo-600 hover:text-indigo-50 border-indigo-800 border">
Video
</button>
<button
class="hidden sm:inline-flex items-center text-gray-600 py-4 px-6 focus:outline-none hover:bg-indigo-600 hover:text-indigo-50 border-indigo-800 border">
Education
</button>
</nav>
<nav class="flex flex-row justify-center bg-gray-300 rounded-full space-x-4 py-2 md:mx-24">
<button
class="text-indigo-50 py-3 px-6 inline-flex items-center rounded-full focus:outline-none font-medium bg-indigo-800 hover:bg-indigo-600">
Podcast
</button>
<button
class="text-gray-600 py-3 px-6 inline-flex items-center hover:bg-indigo-600 hover:text-indigo-50 focus:outline-none rounded-full">
Fashion
</button>
<button
class="text-gray-600 py-3 px-6 inline-flex items-center focus:outline-none hover:bg-indigo-600 hover:text-indigo-50 rounded-full">
Music
</button>
<button
class="hidden sm:inline-flex items-center text-gray-600 py-3 px-6 focus:outline-none hover:bg-indigo-600 hover:text-indigo-50 rounded-full">
Video
</button>
<button
class="hidden sm:inline-flex items-center text-gray-600 py-3 px-6 focus:outline-none hover:bg-indigo-600 hover:text-indigo-50 rounded-full">
Education
</button>
</nav>
<nav class="flex flex-row justify-center bg-gray-300 rounded-2xl space-x-4 py-2 md:mx-24">
<button
class="text-indigo-700 py-3 px-6 inline-flex items-center rounded-2xl focus:outline-none font-medium bg-white hover:bg-indigo-600 hover:text-gray-100">
Podcast
</button>
<button
class="text-gray-600 py-3 px-6 inline-flex items-center hover:text-indigo-50 hover:bg-indigo-400 focus:outline-none rounded-2xl">
Fashion
</button>
<button
class="text-gray-600 py-3 px-6 inline-flex items-center focus:outline-none hover:text-indigo-50 hover:bg-indigo-400 rounded-2xl">
Music
</button>
<button
class="hidden sm:inline-flex items-center text-gray-600 py-3 px-6 focus:outline-none hover:text-indigo-50 hover:bg-indigo-400 rounded-2xl">
Video
</button>
<button
class="hidden sm:inline-flex items-center text-gray-600 py-3 px-6 focus:outline-none hover:text-indigo-50 hover:bg-indigo-400 rounded-2xl">
Education
</button>
</nav>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
body {
font-family: 'Space Mono', monospace;
}
</style>