JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="mainWrapper" class="">
    <!-- MENU ANFANG --><br>
    <div id="menu" style="color: white; background-color: #706D65; border-radius: 15px; border-bottom: solid 1px black; -webkit-box-shadow: -1px 9px 8px -6px rgba(0,0,0,0.48); -moz-box-shadow: -1px 9px 8px -6px rgba(0,0,0,0.48); box-shadow: -1px 9px 8px -6px rgba(0,0,0,0.48); padding: 10px;">
        <button id="inputs" style="color: black;  margin-top: 10px;">Inputs</button>
        <button id="selects" style="color: black; ">Selects</button>
        <!-- MENU ENDE -->
        <hr>
        <form id="newField">
        <!-- PANELS START -->
            <!-- INPUTS START -->
            <div id="input" style="min-height: 100px;">
                <h3>Inputs</h3>
                <div>
                    <div class="row">
                        <div class="form-group col-xs-6">
                            <label for="inputLabel" class="col-form-label">*Label:</label>
                                <input id="inputLabel" placeholder="Label" class="form-control" tabindex="1" required>
                        </div>
                        <div class="form-group col-xs-6">
                            <label for="inputType" class="col-form-label">*Type:</label>
                                <select id="inputType" class="form-control" required>
                                    <option>Text</option>
                                    <option>Textarea</option>
                                    <option>Email</option>
                                    <option>Password</option>
                                </select>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-xs-3">
                            <label...

JavaScript

$(document).ready(function(){$('#menu').on('click', 'button', function () {
            var id = this.id;
            switch (id) {
                case 'inputs':
                    $(this).parent().find('#select').hide('slide',{ direction: "right" }, 400, function () {
                        $(this).parent().find('#input').show('slide',{ direction: "left" }, 400, function() {
                            $('#inputLabel').focus();
                        });
                    });
                    break;
                case 'selects':
                    $(this).parent().find('#input').hide('slide',{ direction: "right" }, 400, function () {
                        $(this).parent().find('#select').show('slide',{ direction: "left" }, 400, function() {
                        
                            $('#selectLabel').focus();
                        });
                    });
                    break;
                case 'string':
                    alert(jqueryfy($('#creator').val()));
                    break;
                case 'hide':
                    $(this).parent().find('#input').hide('slide', 400);
                    $(this).parent().find('#select').hide('slide', 400);
                    break;
            }
        });
});