JSFiddle - React, Tailwind, and code Playground

by mharrisn

HTML

<div id="app-container">
            <div id="page-home" data-role="page">
                <!-- APP Header -->
                <div id="app-header" data-role="header" data-id="app-header" data-theme="app-chrome" data-position="fixed" data-tap-toggle="false">
                    <h1>My **APP**</h1>
                    <div id="nav-header-right" class="header-right">
                        <a  href="#popupFeedback" data-rel="popup" data-position-to="window" data-inline="true"
                            data-transition="pop" id="nav-feedback" data-theme="btn-feedback" data-role="button"
                            data-shadow="false" data-corners="false"></a>
                        <a  id="help-home" id="nav-help" data-theme="btn-help" data-role="button" data-corners="false"
                            data-inline="true" data-shadow="false" onclick="showHelp('home');"></a>
                        <a  href="#panel-notifications" id="nav-notifications" data-theme="btn-notifications"
                            data-role="button" data-shadow="false" data-corners="false" data-inline="true">
                            <span class="ui-btn-corners-all nav-notification-counter"></span></a>
                    </div>
                </div>
                <!-- CONTENT -->
                <div data-role="content" class="nopadding h100">
                    <div id="content-left" class="h100 splash-bg">
                        <div id="home-hero"></div>
                    </div>
                    <div id="sidebar-right" class="h100">
                        <div id="home-egobox">
                            <div id="ego-photo-home" class="home"></div>
                            <div id="home-ego-info">
                                <p id="ego-fullname" class="ego-userinfo user-fullname"></p>
                                <p id="ego-title" class="ego-userinfo"></p>
                                <p id="ego-company" class="ego-userinfo"></p>
                        ...

CSS

/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */



 /*GLOBAL MODS*/
* {
    font-family: Helvetica,Arial,sans-serif;
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;
}
input, textarea {
-webkit-user-select: auto;
}

html,body {
    -webkit-font-smoothing: antialiased;
    height:100%;
}
body {
    /*font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif !important; */
    height:100%;
    margin:0px;
    padding:0px;
    width:100%;
}

body > div.ui-page {
    /*font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif !important; */
}
/*Hide back button on popups */
.ui-popup .ui-btn-left {
    display: none;
}

#aboutPopup {
min-width:320px;
}

#aboutPopup .ui-title {
    overflow: visible;
    text-overflow: initial;
}

/* ======== [LOGIN] ============...

JavaScript

function userLoggedIn() {
    return false;
$('#page-home').on('pagebeforeshow', function(){
    if(!userLoggedIn()) {
        $.mobile.changePage('#page-login', {transition:'flip'});
    }
    
});