Skip to main content
Back to path

Welcome to a Grasp lesson

Create a free account to keep studying and create your own study path.

Lesson 46

Designing Multi-Feature UIs with Tabs & Sections

Recommended resources

Hello! Welcome to the next stage of building your AI-powered writing assistant.

In our previous lessons, we built a robust backend with several powerful features, like text summarization and grammar correction. We even made sure our server could handle bad inputs gracefully. Now, it's time to create a user interface that can present all these features to the user in a clean and organized way.

This lesson focuses on the first step of building that interface. Our goal is to structure the user interface to support multiple features using tabs or sections. Think of it like a folder system on your computer; tabs let the user easily switch between different tools (Summarize, Correct Grammar, etc.) without leaving the page.

We will use HTML to create the structure of these tabs and CSS to style them. For now, the tabs won't be clickable—we're just building the visual foundation. In our very next lesson, we'll add JavaScript to make them fully interactive.

Why Use a Tabbed Interface?

As your application grows to include more features, you need a way to organize them. Putting everything on the page at once would be cluttered and confusing. A tabbed interface is a classic and effective UI pattern that solves this problem.

It consists of two main parts:

  1. Tab Buttons: A set of clickable buttons, each representing a different feature or section.
  2. Content Panels: The corresponding content for each tab. Only one content panel is visible at a time.
Webpage Layout with Semantic HTML5 Elements
This diagram shows how a webpage is broken down into semantic sections like `<header>`, `<main>`, and `<footer>`. Our tabbed component will live inside the `<main>` section of our page, holding the core functionality of our app.

Let's start building!

1. Defining the HTML Structure

First, we need to create the HTML elements for our tabs. We'll define a container, a set of buttons for the tabs, and a set of content panels. We will use a special HTML attribute, data-*, to create a logical link between each button and its content panel.

This short article from dev.to provides a great, simple example of the HTML we'll be using.

Create a Simple Tabbed Component with HTML, CSS & ...

Read through the first step in the 'Create a Simple Tabbed Component' article to see the standard HTML structure for tabs.

Focus on the HTML code block under 'Step 1: Set up the HTML'. Notice how there's a main container, a set of <button> elements, and then the content <div> elements. Pay close attention to how the data-tab attribute on a button is designed to match the id on a content panel.

Now, let's apply this to your project. Open your index.html file and replace its <body> content with the structure below. Notice that we've moved your existing text area and button inside the first tab panel, which is for the "Summarize" feature.

<body>
    <h1>AI Writing Assistant</h1>

    <div class="tabs-container">
        <!-- Tab Buttons -->
        <div class="tab-buttons">
            <button class="tab-button active" data-tab="summary">Summarize</button>
            <button class="tab-button" data-tab="grammar">Correct Grammar</button>
        </div>

        <!-- Tab Content Panels -->
        <div class="tab-content-container">
            <!-- Summary Tab Content (Visible by default) -->
            <div class="tab-content active" id="summary">
                <h2>Summarize Text</h2>
                <p>Paste your text below to generate a concise summary.</p>
                <textarea id="user-text" placeholder="Enter text here..."></textarea>
                <button id="submit-btn">Generate Summary</button>
                <div class="result-container" id="summary-result">
                    <!-- AI-generated summary will appear here -->
                </div>
            </div>

            <!-- Grammar Tab Content (Hidden by default) -->
            <div class="tab-content" id="grammar">
                <h2>Correct Grammar & Spelling</h2>
                <p>Paste your text below to correct grammar and spelling errors.</p>
                <textarea id="grammar-text" placeholder="Enter text here..."></textarea>
                <button id="grammar-submit-btn">Correct Text</button>
                <div class="result-container" id="grammar-result">
                    <!-- Corrected text will appear here -->
                </div>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>

Key changes in this HTML:

  • tabs-container: A div that wraps the entire component.
  • tab-buttons: A div holding our two tab buttons.
  • data-tab Attribute: The Summarize button has data-tab="summary". This is a custom attribute we'll use later with JavaScript to link it to its content.
  • tab-content: We have two content panels. Each one has an id that matches the data-tab of its button (e.g., id="summary").
  • The active Class: Notice that the first tab button and the first tab content have the class active. This is our way of telling the browser which tab to show by default when the page loads.

If you open index.html in your browser now, you'll see all the content stacked on top of each other. This is where CSS comes in.

2. Styling the Tabs with CSS

Our next step is to write CSS rules to make our HTML look like tabs. This involves three key tasks:

  1. Styling the buttons to look like tabs.
  2. Hiding all tab content panels by default.
  3. Showing only the content panel that has the .active class.

Let's refer back to the dev.to article to see how this is done.

Create a Simple Tabbed Component with HTML, CSS & ...

Now, let's look at the CSS from the same article. This will transform our raw HTML into a recognizable tabbed interface.

Examine the CSS under 'Step 2: Style the Tabs with CSS'. Pay close attention to these three rules in particular: .tab-content { display: none; } (hides content by default) .tab-content.active { display: block; } (shows the active content) .tab.active (styles the active button differently) These are the core of the tab-switching logic.

Inspired by that example, open your style.css file and add the following rules. This will create a clean, modern look for your tabs.

/* General Body and Container Styles */
body {
    font-family: sans-serif;
    background-color: #f4f4f9;
    color: #333;
    margin: 0;
    padding: 2rem;
}

h1 {
    text-align: center;
    color: #444;
}

.tabs-container {
    max-width: 800px;
    margin: 2rem auto;
    background: #fff;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Tab Button Styles */
.tab-buttons {
    display: flex;
    border-bottom: 2px solid #ddd;
}

.tab-button {
    padding: 1rem 1.5rem;
    cursor: pointer;
    border: none;
    background: none;
    font-size: 1rem;
    font-weight: 500;
    color: #555;
    position: relative;
    top: 2px; /* Aligns with the bottom border */
}

.tab-button.active {
    color: #007BFF;
    border-bottom: 2px solid #007BFF;
}

/* Tab Content Styles */
.tab-content {
    /* Hide all tab content by default */
    display: none;
    padding: 1.5rem 0;
}

.tab-content.active {
    /* Show only the active tab content */
    display: block;
}

/* Styles for form elements inside tabs */
textarea {
    width: 100%;
    min-height: 150px;
    padding: 0.5rem;
    border-radius: 4px;
    border: 1px solid #ccc;
    font-size: 1rem;
    margin-top: 1rem;
    box-sizing: border-box; /* Ensures padding doesn't affect width */
}

#submit-btn, #grammar-submit-btn {
    display: block;
    margin-top: 1rem;
    padding: 0.75rem 1.5rem;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
}

#submit-btn:hover, #grammar-submit-btn:hover {
    background-color: #0056b3;
}

After adding this CSS, refresh your index.html in the browser. You should now see a properly styled tabbed interface! Only the "Summarize" tab is visible. The buttons don't work yet, but the visual structure is in place.

Test your understanding!

Your project plan also includes a "Text Analysis" feature (e.g., for word count). How would you add a third, inactive tab for this feature? What HTML would you add?

Show answer

You would need to add two things to your index.html:

  1. A new button:

    <button class="tab-button" data-tab="analysis">Text Analysis</button>

    This goes inside the .tab-buttons div.

  2. A new content panel:

    <div class="tab-content" id="analysis">
    <h2>Text Analysis</h2>
    <p>This feature will provide stats like word count and character count.</p>
    <!-- Form elements for this feature would go here -->
</div>

    This goes inside the .tab-content-container div.

Notice that neither has the active class, so they will be hidden by default. The data-tab="analysis" on the button correctly links to the id="analysis" on the content panel.

Conclusion

Great work! You have successfully structured the user interface of your application to support multiple features using tabs. While they aren't interactive yet, you've completed the essential first step of creating a clean, organized layout.

Key Takeaways:

  • A tabbed interface is an excellent way to organize multiple features within a single page.
  • The structure is defined in HTML using buttons and content panels, linked by data-* attributes and ids.
  • The visual styling is handled by CSS. The key trick is to hide all content panels by default (display: none;) and show only the one with an .active class (display: block;).
  • We set a default visible tab by adding the .active class directly to one button and one content panel in the HTML.

In our next lesson, we will bring this interface to life. We'll write the JavaScript code that listens for clicks on the tab buttons and dynamically switches the active class, making our tabs fully functional.