Tabs Layout Template using React and Tailwind
Last Updated :
24 Apr, 2025
A Tabs Layout offers an organized method of presenting diverse content within a single webpage, enabling seamless switching between sections without page reloads. Typically arranged horizontally, tabs display content exclusively related to the selected tab, optimizing space on the webpage.
Preview of final output: Let us have a look at how the final feature will look like:
Prerequisites:
Basic Features of Tabs Layout:
- Tab header/button: It acts as a switchable title using which the user can select which content they want to see
- Content: This section contains the content related to the selected tab
- Active tag functionality: This section contains the logic using which the content associated with the selected tag is displayed
- Data: A separate file is created which maps the header to it’s specified content
Approach to create Tab Layout using React and Tailwind:
- Set up a basic react project and install the required dependencies.
- Create the basic layout consisting of a Navbar and Welcome slide.
- Style the components using Tailwind.
- Pass the data dynamically in the components and render it on the screen.
Steps to Create React Application And Installing Module:
Step 1: Set up the project using the command
npx create-react-app <<Project_Name>>
Step 2: Navigate to the folder using the command
cd <<Project_Name>>
Step 3: Install the required dependencies using the command
npm install -D tailwindcss
Step 4: Create the tailwind config file using the command
npx tailwindcss init
Step 5: Rewrite the tailwind.config.js file as folllows
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}Project Structure:
The updated dependencies in package.json file will look like:
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}Example: Write the following code in respective files:
- App.js: This file imports the components and renders them on the screen
- Content.js: This component displays the Selected Tabs content along with its associated image
- data.js: This file contains the data to be displayed on navbar and content element
- Navbar.js: This file displayes tabs header and logic to change the tabs
- index.css : This file imports Tailwind CSS in our project file
Javascript
import './App.css';
import Navbar from './components/Navbar';
import { useState } from 'react';
import Content from './components/Content';
import Data from './components/data';
function App() {
const data = Data
const [visibleTab, setVisibleTab] = useState(0);
return (
<div className="App">
<Navbar data={data}
visibleTab={visibleTab}
setVisibleTab={setVisibleTab} />
<Content data={data}
visibleTab={visibleTab} />
</div>
);
}
export default App;
|
Javascript
export default function Content(props) {
return (
<div className="text-left flex flex-col
m-3 items-center content-center
text-base">
<img src={props.data[props.visibleTab].image}
className="h-1/3 w-1/3 shadow-xl" />
<div className="my-3 h-2/3 w-1/3 border-x-4 p-2 shadow-md">
{props.data[props.visibleTab].content}
</div>
</div>
)
}
|
Javascript
export default function Navbar(props) {
return (
<div>
<nav classNameName="bg-white fixed w-full
z-20 top-0 left-0
border-b border-gray-200 p-4">
<div className="flex flex-wrap items-center
justify-center p-4">
className="flex items-center">
<img src=
className="mr-2"
alt="GFG Logo" />
<span className="self-center text-2xl font-semibold ">
GeeksforGeeks
</span>
</a>
</div>
<div className="border-y-2 text-center text-xl mx-2">
{props.data.map((tab, index) => (
<button
key={index}
className={`bg-transparent hover:bg-slate-200
p-2 mr-2
${props.visibleTab === index
? 'bg-gray-300' : 'bg-gray-200'
}`}
onClick={() => props.setVisibleTab(index)}>
{tab.title}
</button>
))}
</div>
</nav>
</div>
)
}
|
Javascript
const Data = [
{
title: "JavaScript",
content: `JavaScript is a lightweight, cross-platform, single-threaded,
and interpreted compiled programming language. It is also known
as the scripting language for webpages. It is well-known
for the development of web pages, and many
non-browser environments also use it.`,
image:
},
{
title: "ReactJS",
content: `ReactJS is an open-source JavaScript library used to create
user interfaces in a declarative and efficient way.
It is a component-based front-end library responsible only
for the view layer of a Model View Controller(MVC) architecture.
Before you start learning ReactJS, we assume that you have knowledge of
HTML, CSS and JavaScript.`,
image:
},
{
title: "NodeJS",
content: `Node.js is an open-source and cross-platform runtime environment
for executing JavaScript code outside a browser. NodeJS is not
a framework and it’s not a programming language.
Node.js is used to build back-end services like APIs like
Web App or Mobile App.`,
image:
}
]
export default Data;
|
CSS
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
|
Steps to Run the application:
Step 1: Type the following command in terminal of project directory
npm start
Output:
Similar Reads
Blog Page Template using React JS and Tailwind
A Blog Page is a web page that is used to display multiple blog posts on a website. Using blogs people can share their views, ideas, and opinions. A Blog Page generally contains a NavBar and Introduction followed by multiple blogs displayed in the form of a card. Prerequisites:React JSTailwind CSS p
6 min read
Accordion Template using ReactJS and Tailwind
An Accordion is a component which can show data in form of collapsing and expanding. This is very useful in places where we have less amount of space available and only necessary information is to be provided to the end user. It provides ease of access in displaying data as user is shown only the re
4 min read
Create Podcast Template using React and Tailwind CSS
Podcasts have become a popular medium for sharing knowledge and entertainment. Creating a podcast application can be a fun project that not only enhances your skills in React and Tailwind CSS but also provides a platform to showcase your favourite podcasts. In this template we will build a responsiv
6 min read
Create Changelog Template using React and Tailwind CSS
A changelog is an essential tool for maintaining transparency and communication in a project by documenting changes, updates, and bug fixes and enhancements. This template will be built using React for the frontend framework and Tailwind CSS for the styling. The combination of these technologies all
4 min read
Create Documentation Template using React and Tailwind CSS
This documentation template serves as a comprehensive guide for developers to understand the setup configuration and functionalities of the project. We are going to build the Documentation Template using React and Tailwind CSS. PrerequisitesReact.jsTailwind CSSNode.js npmReact IconsApproachTo create
4 min read
Create Team Sections Using React and Tailwind CSS
In this article, we will create a Team Section using React and Tailwind CSS. The team section will display team member information including their name role, and profile picture with a responsive and modern layout. Tailwind CSS simplifies styling by using utility first classes making the development
3 min read
Create Landing Page Template using React and Tailwind CSS
This article guides you through creating a professional landing page template using React and Tailwind CSS, designed to showcase your skills, projects, and services effectively. It covers the setup of various sections, including a hero area for introductions, a services section to highlight offering
8 min read
Responsive Column Layout using React and Tailwind
Column Layout is commonly employed on web pages to present content side by side on larger screens, allowing the efficient display of substantial information. On smaller screens where side-by-side viewing is impractical, a row format is adopted using the responsiveness concept. Preview of final outpu
3 min read
Contact Us Form Using ReactJS and Tailwind
A Contact Us Form is an integral part of an organization's website. It helps the users to reach out to the organization team and share their views. A Contact Form can be used for various purposes such as giving a suggestion, asking queries, and giving feedback. The final feature will look like this:
4 min read
Create Form Layouts using React and Tailwind CSS
We will create a responsive form layout using React and Tailwind CSS. We will design the form with input fields, buttons, and icons to create a modern UI. This form layout can be used in various applications such as login pages sign-up forms and contact forms. Forms are essential components of web a
4 min read