JSFiddle - React, Tailwind, and code Playground

by Joel Ferreira

HTML

<div id="Page">
    <div id="Nav" data-lastContent='1'>
        <div class='NavTab' id='Tab-1' style="width: 200px;">Take a City</div>
        <div class="NavTab" id='Tab-2'>Profile</div>
        <div class="NavTab" id='Tab-3'>Itinerary</div>
        <div class="NavTab" id='Tab-4'> Information </div>
        <div class="NavSpacer"></div>
    </div>                

    <div id="Content-1" class="Content Hide">
        
        <p>From this day forward, Flight Control will be known by two words: 'Tough' and 'Competent.' </p>
          <p>It's just mind-blowingly awesome. I apologize, and I wish I was more articulate, but it's hard to be articulate when your mind's blown—but in a very good way.</p>
        
    </div>
    
    <div id="Content-2" class="Content Hide">
        
        <div class="ItemHeader">User
			</div>
			<div class="SubItemEdit">
				<div class="SubItemLabel">Name</div>
				<div class="SubItemField">
					<input type="text" value="Reinaldo Ferreira" />
				</div>
			</div>
			<div class="SubItemEdit">
				<div class="SubItemLabel">Default City</div>
				<div class="SubItemField">
					<input type="text" value="Porto"/>
				</div>
			</div>
			<div class="ItemHeader">Authentication
			</div>
			<div class="SubItemEdit">
				<div class="SubItemLabel">Facebook</div>
				<div class="SubItemLabel">
					<div class="fb-login-button" data-width="50"></div>
				</div>
			</div>
			<div class="SubItemEdit">
				<div class="SubItemLabel">main</div>
				<div class="SubItemLabel">[email protected]</div>
			</div>
			<div class="SubItemEdit">
				<div class="SubItemLabel">valid</div>
				<div class="SubItemLabel">[email protected]</div>
			</div>
			<div class="SubItemEdit">
				<div class="SubItemLabel">unchecked</div>
				<div class="SubItemLabel">[email protected]</div>
			</div>
			<div class="SubItemEdit">
				<div class="SubItemLabel">password</div>
				<div class="SubItemLabel">****</div>
			</div>
    
    </div>
    
    <div...

CSS

/*
Take a City My City Mobile CSS
*/

/* Base Styles */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
}

html {
}

body {
	margin: 0px auto;
	overflow:hidden;
	background: #FFFFFF;
	font: 14px Arial, Helvetica, sans-serif;
}

/* Generic Styles */

input {
	border: 0px;
	padding: 5px;
	background: #EEEEEE;
	font-size: 18px;
	min-width: 200px;
}

/* Specific Styles */

#Splash
{
    position:absolute;
    width:100%;
    height:100%;
    background: black;
    text-align: center;
}

.Centerer
{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.CenteredImg
{
	display: inline-block;
	vertical-align: middle;
}

#Page
{
	width: 100%;
}

#Nav
{
	position: absolute;
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 70px;
	background: #000000;
}

.NavTab
{
	display:table-cell;
	background: #C9E6F6;
	border: 5px solid black;
	border-bottom: 0px;
	border-radius: 15px 15px 0px 0px;
	margin: 0px;
	padding: 5px 5px 0px 5px;
	cursor: pointer;
}

.NavTab:hover
{
	background: #FFFFFF;
}

.NavTabSelected
{
	background: #FFFFFF;
}

.NavSpacer
{
	clear:both;
	position:relative;
	height: 5px;
	background: #FFFFFF;
}

.TableRow {
	overflow: hidden;
	margin: 0px;
	border: 0px;
	padding: 0px;
}

.Hide {
	display:none;
}

.TableCell {
	float: left;
	margin: 0px;
	border: 0px;
	padding: 5px;
	font-size: 18px;
	min-width: 40%;
	max-width: 45%;
	text-align: center;
}

.TableLine {
	float:left;
	margin: 0px;
	border: 0px;
	padding: 0px;
}

/* rever...

JavaScript

$( document ).ready(function() {

    $("#Nav div").click(function () {

        var $tabs = $(this).closest("#Nav");
        $(this).closest("#Nav").find(".NavTabSelected").removeClass("NavTabSelected");
        $(this).addClass("NavTabSelected");
        var id = $(this).closest("div").attr("id").replace("Tab-", "");
        var lastID = $tabs.attr("data-lastContent");
        $tabs.attr("data-lastContent", id);
        
        /*var directOut = "left";
        var directIn = "right";
        
        if(id >= lastID){
            directOut = "left";
            directIn = "right";
        } else{
            directOut = "right";
            directIn = "left";           
        }
        
        $(".Hide").hide("slide", 
                        { direction: directOut },
                        "slow"
                       );
        
        $("#Content-" + id).show("slide", 
                                 { direction: directIn },
                                 "slow"
                                );
        */
        $("#Content-" + lastID).slideUp("normal", function() {
            $("#Content-" + id).slideDown("normal");
        });
    });
 
});