JSFiddle - React, Tailwind, and code Playground

by marlberm2014

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<link rel="stylesheet" href="http://jscrollpane.kelvinluck.com/style/jquery.jscrollpane.css">
<script src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.min.js"></script>
<div id = "headerDiv" data-role="header"> 
    <h1 id = "homeHeaderText">My Chats</h1>
    <div id = "homeHeaderButtonDiv">
        <a href="#" id = "addGroupButton"><img id = "addGroupImage" class = "headerImage" src="images/6_social_add_group.png" alt="group"></a>
        <a href="#" id = "searchButton"><img id = "searchImage" class = "headerImage" src="images/2_action_search.png" alt="search"></a>
        <a href="#pageSend" id = "addChatButton"><img id = "addChatImage"class = "headerImage" src="images/4_collections_new_label.png" alt="chat"></a>
    </div>
</div> 

<div id = "threadHolderDiv">
    <div class = "scroll-pane thread">
        <ul id = "messageThreads" class = "msgThread" data-role="listview" data-theme="a" data-filter="true" data-filter-placeholder="Contact">
            <li>a</li>
            <li>a</li>
            <li>a</li>
            <li>a</li>
            <li>a</li>
            <li>a</li>
            <li>a</li>
            <li>a</li>
            <li>a</li>
            <li>a</li>
            <li>a</li>
            <li>a</li>
            <li>a</li>
            <li>a</li>
            <li>a</li>
            <li>a</li>
            <li>a</li>
            <li>a</li>
            <li>a</li>
            <li>a</li>            
        </ul>
    </div>
</div>

CSS

/**
 * Available Fonts
 *
 * - Caviar Dreams
 * - Caviar Dreams Bold
 * - Century Gothic
 * - Century Gothic Bold
 * - Calibri
 * - Calibri Bold
 * - Lucida Sans Unicode
 * - Lucida Grande
**/

/**Portrait Smartphone minimum dimension 240x320**/


html, body {
    margin:0;
    padding:0;
    height:100%;
    background: #eeeeee !important;
    min-width: 240px;
    min-height: 200px;
}

.body {
    /*padding-bottom:40px;   /* Height of the footer */
}

.footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:40px;   /* Height of the footer */
}

.bodySend {
    padding-bottom:60px;   /* Height of the footer */
}

.footerSend {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
}

/* .scrollable {
    width: 100%;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
} */

.scroll-pane{
    width: 100% !important;
    height: 100%;
    overflow: auto;
}
/*************LOADER PAGE**************/
div#wrapper {
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    min-width: 240px;
    min-height:100%;
    margin: 0px auto;
    /* position:relative; */
}

/* #fixMe{
    position: absolute;
    width: 100%;
    height:100%;
} */

#dialogButton {
    width: 100%;
    margin: 0px auto;
}

#settingsButton {
    display: inline-block;
    width: 43%;
}

#exitButton {
    display: inline-block;
    width: 43%;
}

#loaderHeaderDiv{
    margin: 0px auto;
    text-align: center;
}

h1#loaderHeaderText{
    text-align: center;
    font-size: 150%;
    display: inline-block !important;
    text-align: left !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: .6em !important;
    margin-bottom: .8em !important;
    
}
/**************LOADER  PAGE***************/
/*************INSTALL01 PAGE**************/
#contentDiv{
    margin: 0px auto;
    min-width: 240px;
    width: 85%;
    height: 90%
}

#welcomeTopSpacerDiv{
    margin-top:...

JavaScript

$('.scroll-pane').jScrollPane();