{"componentChunkName":"component---src-templates-blog-js","path":"/blog/how-to-create-react-tabs-with-tailwind-css/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares"}},"mdx":{"id":"51876877-8b07-5a1d-9fd3-7d8e5101ad9b","excerpt":"Tailwind React Tab Tabs are a common UI element used to organize content and improve the user experience. With React and Tailwind CSS, you can create flexible…","body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"title\": \"How to Create React Tabs with Tailwind CSS\",\n  \"lastUpdated\": \"20 May 2024\",\n  \"date\": \"2023-02-10T02:16:04+01:00\",\n  \"metaTitle\": \"Tailwind React Tab\",\n  \"metaDescription\": \"With React and Tailwind CSS, you can create flexible and customizable tabs that seamlessly integrate into your React applications. We will walk you through the process of setting up a React project, installing Tailwind CSS, creating the necessary components, and styling the react tabs to achieve the desired look and functionality.\",\n  \"type\": \"blog\",\n  \"author\": \"Emmanuel Ovuoba\",\n  \"role\": \"Technical Writer/Web Developer\",\n  \"authorImage\": \"/blog/author/author_emmanuel.jpg\",\n  \"image\": \"./_/images/tailwind-react-tabs.png\",\n  \"tags\": [\"tailwind css\", \"react\", \"web development\"],\n  \"previousTitle\": \"How to create Tailwind Tables using React.\",\n  \"previousPath\": \"how-to-create-react-tables-using-tailwind-css\",\n  \"nextTitle\": \"How to create Tailwind CSS Components for your Website\",\n  \"nextPath\": \"how-to-create-tailwind-css-components-for-your-website\",\n  \"blogtype\": \"tailwindcss\",\n  \"canonicalUrl\": \"https://windframe.dev/blog/how-to-create-react-tabs-with-tailwind-css\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", null, \"Tailwind React Tab\"), mdx(\"p\", null, \"Tabs are a common UI element used to organize content and improve the user experience. With React and Tailwind CSS, you can create flexible and customizable tabs that seamlessly integrate into your React applications. We will walk you through the process of setting up a React project, installing Tailwind CSS, creating the necessary components, and styling the react tabs to achieve the desired look and functionality.\"), mdx(\"h2\", null, \"Prerequisites\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Basic knowledge of React\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Basic knowledge of Tailwind CSS\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Node.js and NPM installed on your computer\")), mdx(\"h3\", null, \"Step 1: Create a new React app\"), mdx(\"p\", null, \"To create a new React app, open your terminal and run the following command:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-lua\"\n  }, \"npx create-react-app react-tabs-tailwind\\n\")), mdx(\"p\", null, \"This will create a new React app called react-tabs-tailwind.\"), mdx(\"h3\", null, \"Step 2: Install Tailwind CSS\"), mdx(\"p\", null, \"To install Tailwind CSS, run the following command in your terminal:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-lua\"\n  }, \"npm install tailwindcss\\n\")), mdx(\"h3\", null, \"Step 3: Configure Tailwind CSS\"), mdx(\"p\", null, \"Create a new file called \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"tailwind.config.js\"), \" in the root directory of your project and add the following code:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"Copy code\\nmodule.exports = {\\n  mode: 'jit',\\n  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],\\n  darkMode: false, // or 'media' or 'class'\\n  theme: {\\n    extend: {},\\n  },\\n  variants: {\\n    extend: {},\\n  },\\n  plugins: [],\\n}\\n\")), mdx(\"p\", null, \"This will configure Tailwind CSS for your project.\"), mdx(\"h3\", null, \"Step 4: Add Tailwind CSS to your project\"), mdx(\"p\", null, \"Open the index.css file in the src directory and add the following code:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-css\"\n  }, \"@tailwind base;\\n@tailwind components;\\n@tailwind utilities;\\n\")), mdx(\"p\", null, \"This will add Tailwind CSS to your project.\"), mdx(\"h3\", null, \"Step 5: Create a new component called Tabs\"), mdx(\"p\", null, \"Create a new file called Tabs.js in the src/components directory and add the following code:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import React, { useState } from 'react';\\n\\nconst Tabs = ({ children }) => {\\n  const [activeTab, setActiveTab] = useState(children[0].props.label);\\n\\n  const handleClick = (e, newActiveTab) => {\\n    e.preventDefault();\\n    setActiveTab(newActiveTab);\\n  };\\n\\n  return (\\n    <div className=\\\"max-w-md mx-auto\\\">\\n      <div className=\\\"flex border-b border-gray-300\\\">\\n        {children.map(child => (\\n          <button\\n            key={child.props.label}\\n            className={`${\\n              activeTab === child.props.label ? 'border-b-2 border-purple-500' : ''\\n            } flex-1 text-gray-700 font-medium py-2`}\\n            onClick={e => handleClick(e, child.props.label)}\\n          >\\n            {child.props.label}\\n          </button>\\n        ))}\\n      </div>\\n      <div className=\\\"py-4\\\">\\n        {children.map(child => {\\n          if (child.props.label === activeTab) {\\n            return <div key={child.props.label}>{child.props.children}</div>;\\n          }\\n          return null;\\n        })}\\n      </div>\\n    </div>\\n  );\\n};\\n\\nconst Tab = ({ label, children }) => {\\n  return (\\n    <div label={label} className=\\\"hidden\\\">\\n      {children}\\n    </div>\\n  );\\n};\\nexport { Tabs, Tab };\\n\")), mdx(\"p\", null, \"This component takes an array of tabs as a prop and renders the tab navigation and content.\"), mdx(\"h3\", null, \"Step 6: Create a new component called App\"), mdx(\"p\", null, \"Open the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"App.js\"), \" file in the src directory and replace the existing code with the following:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import React from 'react';\\nimport { Tabs, Tab } from './Tabs';\\n\\nconst App = () => {\\n  return (\\n    <div>\\n      <Tabs>\\n        <Tab label=\\\"Tab 1\\\">\\n          <div className=\\\"py-4\\\">\\n            <h2 className=\\\"text-lg font-medium mb-2\\\">Tab 1 Content</h2>\\n            <p className=\\\"text-gray-700\\\">\\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae\\n              quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis\\n              harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum!\\n              Provident similique accusantium nemo autem. Veritatis obcaecati tenetur iure eius\\n              earum ut molestias architecto voluptate aliquam nihil, eveniet aliquid culpa officia\\n              aut! Impedit sit sunt quaerat, odit, tenetur error, harum nesciunt ipsum debitis quas\\n              aliquid. Reprehenderit, quia. Quo neque error repudiandae fuga? Ipsa laudantium\\n              molestias eos sapiente officiis modi at sunt excepturi expedita sint? Sed quibusdam\\n              recusandae alias error harum maxime adipisci amet laborum.\\n            </p>\\n          </div>\\n        </Tab>\\n        <Tab label=\\\"Tab 2\\\">\\n          <div className=\\\"py-4\\\">\\n            <h2 className=\\\"text-lg font-medium mb-2\\\">Tab 2 Content</h2>\\n            <p className=\\\"text-gray-700\\\">\\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae\\n              quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis\\n              harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum!\\n              Provident similique accusantium nemo autem. Veritatis obcaecati tenetur iure eius\\n              earum ut molestias architecto voluptate aliquam nihil, eveniet aliquid culpa officia\\n              aut! Impedit sit sunt quaerat, odit, tenetur error, harum nesciunt ipsum debitis quas\\n              aliquid. Reprehenderit, quia. Quo neque error repudiandae fuga? Ipsa laudantium\\n              molestias eos sapiente officiis modi at sunt excepturi expedita sint? Sed quibusdam\\n              recusandae alias error harum maxime adipisci amet laborum.\\n            </p>\\n          </div>\\n        </Tab>\\n        <Tab label=\\\"Tab 3\\\">\\n          <div className=\\\"py-4\\\">\\n            <h2 className=\\\"text-lg font-medium mb-2\\\">Tab 3 Content</h2>\\n            <p className=\\\"text-gray-700\\\">\\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae\\n              quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis\\n              harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum!\\n              Provident similique accusantium nemo autem. Veritatis obcaecati tenetur iure eius\\n              earum ut molestias architecto voluptate aliquam nihil, eveniet aliquid culpa officia\\n              aut! Impedit sit sunt quaerat, odit, tenetur error, harum nesciunt ipsum debitis quas\\n              aliquid. Reprehenderit, quia. Quo neque error repudiandae fuga? Ipsa laudantium\\n              molestias eos sapiente officiis modi at sunt excepturi expedita sint? Sed quibusdam\\n              recusandae alias error harum maxime adipisci amet laborum.\\n            </p>\\n          </div>\\n        </Tab>\\n      </Tabs>\\n    </div>\\n  );\\n};\\n\\nexport default App;\\n\")), mdx(\"p\", null, \"In this code, we've added some content to each Tab component using Tailwind CSS classes for styling. The content consists of a heading and a paragraph of text. When a tab is active, its content is displayed below the tab buttons. The Tabs component now maps over its children to find the active tab's content and renders it. Note that the Tab component itself is still hidden and only serves to define the label of each tab.\"), mdx(\"h3\", null, \"Step7: Rendering the content on the application\"), mdx(\"p\", null, \"Now, we have to show the tabs we have created on our web page by rendering it on our index.js file.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import React from 'react';\\nimport ReactDOM from 'react-dom/client';\\nimport './index.css';\\nimport App from './App';\\n\\nconst root = ReactDOM.createRoot(document.getElementById('root'));\\nroot.render(\\n  <React.StrictMode>\\n    <App />\\n  </React.StrictMode>\\n);\\n\")), mdx(\"p\", null, \"After rendering the application, our react Tabs with Tailwind css will look like the image below.\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1035px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/7e8aa4f86b7d38bf3ceda4d1774040bd/33c9c/react-tabs.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"42.471042471042466%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAm0lEQVQoz52SiQrDIBBE8/+/aeLRRk1rvCBxGqUUSZoWszIM6PIc2O3wpVJKxddlhZ0dls3zXa26r67uF9A5h4EyjKOE0hOU0hilgjHzKfQP0INSsYljGBgYEyCEQqrp09cMzBDOb0VC3IvnhJeA1jqQnm5i6N8qCaW+BvQh4PE0CCHC+1CUU8cY24BnE9y/59M05f2qHNfm+PELmm114Vu70jAAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Tailwind react tab \",\n    \"title\": \"Tailwind react tab \",\n    \"src\": \"/static/7e8aa4f86b7d38bf3ceda4d1774040bd/e3189/react-tabs.png\",\n    \"srcSet\": [\"/static/7e8aa4f86b7d38bf3ceda4d1774040bd/a2ead/react-tabs.png 259w\", \"/static/7e8aa4f86b7d38bf3ceda4d1774040bd/6b9fd/react-tabs.png 518w\", \"/static/7e8aa4f86b7d38bf3ceda4d1774040bd/e3189/react-tabs.png 1035w\", \"/static/7e8aa4f86b7d38bf3ceda4d1774040bd/33c9c/react-tabs.png 1133w\"],\n    \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1035px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/64f66a9d6977a47aef06c25e9b3506a1/dd104/react-tabs-2.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"44.78764478764479%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAs0lEQVQoz5WS6QrDIBCE8/6v2caYg/5I4n1MV4uSFpJGYVhZh4+R3Q4/J8ZYq5QKIUQY7eCMp3uAMba+F+/xdGdApRTmeca+C2htoaSmnobzvsKagEJIDMMEzicwxjGOE/qeU2+EtfbLewu4bTt69gEkZTDVZXkhhtgOFELkZEkDwQo4Ab0P7cB13fB4spyqKH05JXXOtwONMTQMnSfraRBFgdIdN+Ev8Mx419Nd7eGVzqBvpgvEXx0P3K4AAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Tailwind react tab 1\",\n    \"title\": \"Tailwind react tab 1\",\n    \"src\": \"/static/64f66a9d6977a47aef06c25e9b3506a1/e3189/react-tabs-2.png\",\n    \"srcSet\": [\"/static/64f66a9d6977a47aef06c25e9b3506a1/a2ead/react-tabs-2.png 259w\", \"/static/64f66a9d6977a47aef06c25e9b3506a1/6b9fd/react-tabs-2.png 518w\", \"/static/64f66a9d6977a47aef06c25e9b3506a1/e3189/react-tabs-2.png 1035w\", \"/static/64f66a9d6977a47aef06c25e9b3506a1/dd104/react-tabs-2.png 1064w\"],\n    \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"776px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/1c964044e8f29baae7fc608f397ddb8a/167b5/react-tab-3.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"54.05405405405405%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAA/ElEQVQoz5WSjXaDIAyF+/6PqfLrmALWHqdwl+Bs1552ZfHkRDH5cgmcQJZzRsZu83zBtqWyNk1nLMsXcgLO4YKJPG+Uz08+Ku7tdPzIVBVjxOhHgs5Pk7nrLR/vgBneBzj3iWHwBJ+Kh0AxcKNAapd9N7lCIbe0pocQGkoZtI1A2ylobdBRbDtJUZYxHALeKjQEVMoSxBaoVBraWAip6d3A2o8y3yrgVSEXk3PkBvIn8vcwegJu9Qr73u0gUtgJVdSxUl5j1c4NWNf1f1tm0KM3jaTZqgLma1QPtH1RwYMPdLKR4u204/VeVgNTSqixV7ACfEz4fc9e+V/Qbw8UW6a77bFtAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"tailwind react tab 2\",\n    \"title\": \"tailwind react tab 2\",\n    \"src\": \"/static/1c964044e8f29baae7fc608f397ddb8a/167b5/react-tab-3.png\",\n    \"srcSet\": [\"/static/1c964044e8f29baae7fc608f397ddb8a/a2ead/react-tab-3.png 259w\", \"/static/1c964044e8f29baae7fc608f397ddb8a/6b9fd/react-tab-3.png 518w\", \"/static/1c964044e8f29baae7fc608f397ddb8a/167b5/react-tab-3.png 776w\"],\n    \"sizes\": \"(max-width: 776px) 100vw, 776px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"h2\", null, \"Conclusion\"), mdx(\"p\", null, \"Creating React tabs with Tailwind CSS is a straightforward process that allows you to build interactive and visually appealing tab components. By utilizing React's component-based architecture and Tailwind CSS's utility classes, you can easily manage tab navigation and render dynamic content based on user interaction. Experiment with different styles and customization options to match your application's designs. With Tailwind CSS, you can easily customize the tabs to fit your specific design needs.\"));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"How to Create React Tabs with Tailwind CSS","date":"February 10, 2023","image":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAIAAADwazoUAAAACXBIWXMAAAsTAAALEwEAmpwYAAACYklEQVQoz2O4d+PMm6e3FsyZunrl4l/fP/7/+21Kf+fhg3vW3r5jv3yD55otHjDktnpz4IYdd95/uPjyzannL73XbmX48PDi/8+PZ01o3b9j3f//n////ztj6sTDB/b8//+/99R52+UbvNZuhWh2X7MZqOHKm7fvf/w48eyly6pNDC9fPv3+5c2sqX2tTXWXL57+/+vj9Ek9B/ZtB2p+9vlL0MYdrqs3e63dAnSC15otzis3VRw6sf/R06zdB51WbmR4c+/8vw+PFk7rZmdl1VWSvnBg66yZ0/bs2vofDFqOn7VbvsF99WY3MAIaZLN8g/nStXZgHzG8fXLj08s7fa1VFsb6YRbq26Y2T+hq2bdr8///f4Cal1296bRyU9L2fRGbd0Vv2R2/bW/ctr0pO/YnbN8H8vOLZ/fevbxfXpwbGxYQY6c9vTq7sapk57YNEM1rr12P2rK74uDx/L1HgKj0wDEgytt7uObwybitexm+PL749sGllIRYe0vz0kiPlNgId0+v65fP/P//8/uXDzNOnvbfsCNm6x6gEZGbd4dv3gVkh23eBeSGbtrJMKmnNTo8WFNNycbS1MXe2kBfz0Bfv7a2+ur1q3t2bU9fu8lh9RbXVZuAYQskgX4GM8Dk6s0MxkYGspIiygqySnJSSvLS6ioKGsqyqpra5bVNvTNneK3a5LFmKzCcPdduBYYQCK1FIAYjTWV5GSklWSlFOWlleWlVRVk5Gcm4UP/i/HzX1m7PTbs9Vm/2QEoqyIihNDtBUIBPRlJMWkJMVkpcEYhFhOpK8yYcPOi0aosnDm0QBACuu3lDDE7+tgAAAABJRU5ErkJggg==","aspectRatio":1.7730496453900708,"src":"/static/b14068bb107f7263d654332c28a08b1e/280b6/tailwind-react-tabs.png","srcSet":"/static/b14068bb107f7263d654332c28a08b1e/84249/tailwind-react-tabs.png 250w,\n/static/b14068bb107f7263d654332c28a08b1e/9d7e9/tailwind-react-tabs.png 500w,\n/static/b14068bb107f7263d654332c28a08b1e/280b6/tailwind-react-tabs.png 896w","sizes":"(max-width: 896px) 100vw, 896px"}}},"imageExternal":null,"lastUpdated":"20 May 2024","author":"Emmanuel Ovuoba","role":"Technical Writer/Web Developer","authorImage":"/blog/author/author_emmanuel.jpg","metaTitle":"Tailwind React Tab","metaDescription":"With React and Tailwind CSS, you can create flexible and customizable tabs that seamlessly integrate into your React applications. We will walk you through the process of setting up a React project, installing Tailwind CSS, creating the necessary components, and styling the react tabs to achieve the desired look and functionality.","previousTitle":"How to create Tailwind Tables using React.","previousPath":"how-to-create-react-tables-using-tailwind-css","nextTitle":"How to create Tailwind CSS Components for your Website","nextPath":"how-to-create-tailwind-css-components-for-your-website","blogtype":"tailwindcss"},"fields":{"slug":"/how-to-create-react-tabs-with-tailwind-css/"}},"previous":null,"next":null},"pageContext":{"id":"51876877-8b07-5a1d-9fd3-7d8e5101ad9b"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","3309287076","3706406642","3706406642","4045616534","4045616534","956403285","956403285"]}