JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sliderContainer" class="ui-slider-x-container" class="clear">
        <div id="SliderNavigation" class="ui-slider-x-content">
            <ul class="generic bordered">
                <li id="test1"data-f-nav="#FindAgentByZip">Search by Zip Code</li>
                <li data-f-nav="#FindAgentByName">Search by Name</li>
            </ul>
        </div>

        <div id="FindAgentByZip" class="ui-slider-x-content">
            <div class="InputContainer">
                <span class="InputButton"><div>Find</div></span>
                <input type="text" id="textInputZipCode" class="TextWatermark" maxlength="5" value="Zip Code" />
                <span id="ZipCodeSchool" class="InputSelector" data-f-nav="#SelectSchool" data-value="">Schools</span>
            </div><br />
            <br />
            <a href="javascript:void(0);" id="test2" data-b-nav="#SliderNavigation">Back</a>
        </div>

        <div id="FindAgentByName" class="ui-slider-x-content">
            <h2 style="margin-top: 0;">Find Agent by Name</h2>
            <input type="text" /><br /><br /><br />
            <a href="javascript:void(0);" data-b-nav="#SliderNavigation">Back</a>            
        </div>

        <div id="SelectSchool" class="ui-slider-x-content">
            <ul class="generic bordered">
                <li data-b-nav="#caller" data-value="Springfield High School|1">Springfield High School</li>
                <li data-b-nav="#caller" data-value="Sacred Heart Griffin|2">Sacred Heart Griffin</li>
            </ul>           
        </div>
    </div>

CSS

body
{
    font-size: .85em;
    font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
    color: #232323;
    background-color: #fff;
    margin: 0;
    padding: 0;
}

header,
footer,
nav,
section {
    display: block;
}

/* Styles for basic forms
-----------------------------------------------------------*/

fieldset 
{
    border:1px solid #ddd;
    padding:0 1.4em 1.4em 1.4em;
    margin:0 0 1.5em 0;
}

legend 
{
    font-size:1.2em;
    font-weight: bold;
}

textarea 
{
    min-height: 75px;
}

.editor-label 
{
    margin: 1em 0 0 0;
}

.editor-field 
{
    margin:0.5em 0 0 0;
}


/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error
{
    color: #ff0000;
}

.field-validation-valid
{
    display: none;
}

.input-validation-error
{
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

.validation-summary-errors
{
    font-weight: bold;
    color: #ff0000;
}

.validation-summary-valid
{
    display: none;
}



.bordered
{
    border-radius: 10px;
    -webkit-border-radius: 10px;
    border: 1px solid #8D8D8D;   
}

ul.generic
{
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.generic li:first-child
{
    border-bottom: 1px solid #8D8D8D;
}

ul.generic li
{
    padding: 5px 0px 5px 20px;
    height: 32px;
    
    cursor: pointer;
}

.clear:after
{
    clear: both;
    height: 0;
    overflow: hidden;
}



.InputContainer
{
    margin: 0;
    padding: 0;
    overflow: hidden;
    
    height: 40px;
    color: #000;
    
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    
    border-radius: 5px;
    -webkit-border-radius: 5px;
    
    border-top-right-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    
    border-bottom-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
    
    background: #FFF;
    border: 1px solid...

JavaScript

$(document).ready(function () {
    
    $('#SliderNavigation');
    $('#FindAgentByZip').hide();    
 
    $('#test1').click(function() {
        var $start = $('#SliderNavigation');
        var $target = $('#FindAgentByZip');
        
        $target.show(1, function() {
        
        $target.css('transform', 'translateX(-100%)');
        $target.css('-moz-transform', 'translateX(-100%)');
        $target.css('-webkit-transform', 'translateX(-100%)');
        $target.css('-ms-transform', 'translateX(-100%)');
        $target.css('-o-transform', 'translateX(-100%)');
        
        $start.css('transform', 'translateX(-100%)');
        $start.css('-moz-transform', 'translateX(-100%)');
        $start.css('-webkit-transform', 'translateX(-100%)');
        $start.css('-ms-transform', 'translateX(-100%)');
        $start.css('-o-transform', 'translateX(-100%)');
    });
    });
    
    $('#test2').click(function() {
        var $start = $('#FindAgentByZip');
        var $target = $('#SliderNavigation');
        
        $target.css('transform', 'translateX(0%)');
        $target.css('-moz-transform', 'translateX(0%)');
        $target.css('-webkit-transform', 'translateX(0%)');
        $target.css('-ms-transform', 'translateX(0%)');
        $target.css('-o-transform', 'translateX(0%)');
        
        $start.css('transform', 'translateX(0%)');
        $start.css('-moz-transform', 'translateX(0%)');
        $start.css('-webkit-transform', 'translateX(0%)');
        $start.css('-ms-transform', 'translateX(0%)');
        $start.css('-o-transform', 'translateX(0%)');
    });    
});