How to Change Tabs Horizontally on Hover with Tailwind CSS and JavaScript ?

Last Updated : 08 Feb, 2024

Changing tabs on hover in Tailwind CSS enhances the user experience by offering interactive hover navigation. Users can quickly preview different sections without clicking which reduces the time it takes to explore different sections and increase engagement. We can also add CSS transitions for visual effects.

Preview:

Output

Approach:

The body element contains a flex container (div.flex) at the top of the page with three tabs (div.tab elements) for HTML, Tailwind, and JavaScript.
The content for each tab is placed in div.tab-content elements, and initially, all content is hidden (class="tab-content hidden").
The script selects all elements with the class .tab and .tab-content. These elements represent the tabs and their corresponding content, respectively.
For each tab element, an event listener is added for the mouseenter event. This means when the mouse hovers over a tab, the associated content will be displayed.
When a tab is hovered over, the script hides all tab contents by removing the active class from each content element.
The script then identifies the ID of the content associated with the hovered tab using the data-tab attribute. It adds the active class to the corresponding content element, making it visible.

Example: Illustration of changing Tabs horizontally on Hover with Tailwind CSS and JavaScript.

Javascript

// Get all tab elements
const tabs = 
    document.querySelectorAll('.tab');
const tabContents = 
    document.querySelectorAll('.tab-content');
 
// Loop through each tab
tabs.forEach((tab) => 
{
    tab.addEventListener('mouseenter', () => 
    {
 
        // Hide all tab contents
        tabContents.forEach((content) => 
        {
            content.classList.remove('active')
        })
 
        // Show the corresponding tab content
        const tabId = tab.getAttribute('data-tab')
        document.getElementById(tabId).classList.add('active')
    })
})

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, 
                                   initial-scale=1.0" />
    <title>Horizontal Tab Hover with
           Tailwind CSS and JavaScript
    </title>
    <link rel="stylesheet" href="style.css">
    <!-- Tailwind CSS CDN link -->
    <link href=
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
          rel="stylesheet" />
</head>
 
<body>
    <div class="flex bg-green-500 py-3 top-0">
        <div class="tab cursor-pointer px-8 py-4 transition
                    duration-300 hover:bg-gray-100 transform
                    hover:translate-y-1"
            data-tab="tab1">HTML</div>
        <div class="tab cursor-pointer px-8 py-4 transition 
                    duration-300 ease-in-out hover:bg-gray-100
                    transform hover:translate-y-1"
            data-tab="tab2">Tailwind</div>
        <div class="tab cursor-pointer px-8 py-4 transition 
                    duration-300 ease-in-out hover:bg-gray-100
                    transform hover:translate-y-1"
             data-tab="tab3">Javascript</div>
    </div>
 
    <!-- Tab contents -->
    <div class="mt-4">
        <div class="tab-content hidden" id="tab1">
            HTML stands for HyperText Markup Language. It creates
            a complete website structure of web pages. HTML is a
            combination of Hypertext and Markup language. Hypertext
            defines the link between the web pages and markup
            language defines the text document within the tag.
            This HTML Tutorial provides basic to advanced concepts
            for beginners and professionals.
        </div>
        <div class="tab-content hidden" id="tab2">
            Tailwind CSS is basically a Utility first CSS framework
            for building rapid custom UI. It is a highly customizable,
            low-level CSS framework that gives you all of the building
            blocks that you need. Also, it is a cool way to write inline
            styling and achieve an awesome interface without writing a
            single line of your own CSS.
        </div>
        <div class="tab-content hidden" id="tab3">
            JavaScript (JS) is the most popular lightweight, interpreted
            compiled programming language. It can be used for both 
            Client-side as well as Server-side developments. It is also
            known as a scripting language for web pages. This free 
            JavaScript Tutorial is designed to help both beginners
            and experienced professionals master the fundamentals of
            JavaScript and unleash their creativity to build powerful
            web applications. From basic syntax and data types to
            advanced topics such as object-oriented programming and
            DOM manipulation.
        </div>
    </div>
    <script src="index.js"></script>
</body>
 
</html>

CSS

.tab-content.active {
    display: block;
}
 
.tab:not(:hover) {
 
    /* Back to Original background color on mouse remove */
    background-color: #10B981;
}