JSFiddle - React, Tailwind, and code Playground

by gizmovation

HTML

<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.css">
<body>
        
        <div class="Main" data-role="page" data-cache="never">
            <div id="PageHeader" data-role="header" data-position="fixed" data-theme="b">
                <div>
                    <img src="https://portal.thesba.com/Images/beta2.png" alt="" class="Beta" />
                    <div class="HeaderClass" id="MobileHeader">
                        Welcome to Newtek Portal</div>
                </div>
                <!--Don't delete this, it forces a redraw of the header on orientation change in Android -->
                <a style="visibility: hidden;"></a>
            </div>
            
            <div data-role="content">    <div id="CustomStats" >
                <div id="MerchantFastViewSmall" class="FastViewPhone" data-role="collapsible" data-mini="true" data-iconpos="right"
    data-theme="e" data-content-theme="e" data-collapsed="true">
    <h3>
        <img src="https://portal.thesba.com/Images/credit_cards_24.png" alt="" /><span class="MerchantViewHeader">Credit
                                                                 Card Txns <span class="MerchantViewTableDate"></span></span>
    </h3>
    <div class="GridsContainer">
        <span class="ErrorMessage"></span>
        <table style="" class="StatsGrid NmsGrid">
            <tbody><tr class="StatsRow">
                <td class="description">
                    Total Sales
                </td>
                <td class="stat">
                    <span class="TotalSalesRow"><strong>$59,549.16</strong>
                        <div class="wrapStat">
                            <span class="pastStat">($59,799.66)</span> 
                            <img src="https://portal.thesba.com/Images/down_arr.gif" alt="decrease"> 
                            <span class="decreasedStat">0.42%</span>
         ...

CSS

<style type='text/css'>
.MobileLoginForm .outerBorder {
    margin: 0 auto;
    padding: 1px;
    border: 1px solid #2F4074;
    color: #2F4074;
}

.MobileLoginForm .formField {
    margin: 10px;
    width: 99%;
}

.MobileLoginForm input.ui-input-text {
    padding: 0.4em 0 0.4em 0.4em;
}

.MobileLoginForm .ui-checkbox {
    margin: 0;
}
.MobileLoginForm .ui-btn {
    margin: 0;
}

.MobileLoginForm .field-validation-error {
    font-size: smaller;
    text-align: left;
    color: #FF0000;
}

.PageHeader {
    margin-left: 0;
    color: #454545;
    font-size: 16px;
    width: 95%;
}

.PageHeader h2 {
    color: #373737;
    font-weight: bold;
    margin: 0;
    white-space: nowrap;
    font-size: 21px;
}

.TablesContainer {
    width: 100%;
}
.MerchantTable {
    font-weight: normal;
    font-size: 12px; /*padding: 0px 75px 10px 0px;*/
    display: inline-block;
    width: 50%;
    white-space: nowrap;
}
.MerchantTable .TableHeader {
    font-size: 15px;
    font-weight: bold;
    padding-bottom: 10px;
    text-align: center;
    white-space: nowrap;
}
.MerchantTable .TableHeader img {
    padding-right: 10px;
    vertical-align: middle;
}
.MerchantTable .TableRow {
    /*display: table-row;*/
    width: 100%;
    height: 20px;
    text-align: center;
}
.MerchantTable .ContentHeader {
    display: table-cell;
}
.MerchantTable .Content {
    display: table-cell;
    padding-left: 15px;
}
.StatsTable {
    font-weight: normal;
    font-size: 11px;
    width: 100%;
    white-space: nowrap;
    text-align: center;
    margin: 0 auto;
}
.StatsTable .TableHeader {
    font-size: 15px;
    font-weight: bold;
    padding-bottom: 10px;
    text-align: center;
    white-space: nowrap;
}
.StatsTable .TableHeader img {
    padding-right: 10px;
    vertical-align: middle;
}
.StatsTable .TableRow {
    display: table-row;
    width: 300px;
    height: 20px;
}
.StatsTable .ContentHeader {
    display: table-cell;
}
.StatsTable .Content {
    display: table-cell;
   ...

JavaScript

$(document).ready(function() {
    $("#CustomStats").addClass($.event.special.orientationchange.orientation() + "CustomStats");
    $('body').on('orientationchange', function() {
        if (window.orientation == 0) {
            // portrait mode
            $('#CustomStats').attr('class', 'portraitCustomStats');
        } else {
            // landscape mode
            $('#CustomStats').attr('class', 'landscapeCustomStats');
        }
    });

});
$(window).bind('orientationchange', function(anOrientationEvent) {
    $("#CustomStats").attr("class", anOrientationEvent.orientation.toLowerCase() + "CustomStats").trigger("updatelayout");
});