JSFiddle - React, Tailwind, and code Playground

by Rich Costello

HTML

<body>
    <div id="container">
        <header>
            <img src="images/header-name.png" width="200px" style="display: inline; margin-bottom: -10px;"/>
            <button id="jobs" class="user_view">Jobs</button> 
            <button id="people" class="user_view_active user_view">People</button>

            <div class="header_search_wrapper">
                <form action="" method="POST">
                    <textarea class="header_search" name="app_search" placeholder="Search people, jobs, or companies" style="width: 430px;"></textarea>

                    <input type="submit" class="share_btn" value="Search">
                </form>
            </div>
        </header>

        <div id="main" role="main">
        <!--! begin app content -->

        <div class="right_sidebar">
            <span class="right_title">Connection Suggestions</span>
        </div>

        <span class="title">Recent Updates > <a href="#">People</a></span>

JavaScript

$(document).ready(function() {
    $('button').on('click', function(){
        $('button').removeClass('user_view_active');; 
        $(this).addClass('user_view_active');
        $("a", ".title").text("test");
    });
});