Tabs Layout Template using React and Tailwind

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:

• React
• Tailwind
• props in React

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

// App.js

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

// Content.js

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

// Navbar.js

// Navbar.js

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">
                    <a href="https://geeksforgeeks.org/"
                        className="flex items-center">
                        <img src=
"https://media.geeksforgeeks.org/gfg-gg-logo.svg"
                            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

// data.js

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:
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20230305183140/Javascript.jpg",
    },
    {
        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:
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20230310153232/ReactJS-Tutorial.jpg"
    },
    {
        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:
"https://media.geeksforgeeks.org/wp-content/uploads/20230331172641/NodeJS-copy.webp"
    }
]

export default Data;

CSS

/* index.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: