JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html> 
<html> 
   <head> 
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
    <script src="js/tools.js"></script>

   <link rel="stylesheet" href="css/mobile.css" />

</head> 

<body>
 <div data-role="page" data-add-back-btn="true">
   <header data-role="header" class="tuts">
     <h1>
       <img src="img/TLogo.png" alt="Test" />
     </h1>
   </header>
   <!-- /header -->

   <div data-role="content" id="content">
            <ul data-role="listview" data-theme="c" data-dividertheme="d">
                <li>
                    <div class="checkBoxLeft">
                        <input type="checkbox" name="checkbox-0" id="checkbox-0"/>
                    </div>
                    <a href="#" class="detailListText"> Message 1 </a>
                </li>
                <li>
                    <div class="checkBoxLeft">
                        <input type="checkbox" name="checkbox-1" id="checkbox-1"/>
                    </div>
                    
                    <a href="#" class="detailListText"> Message 2 </a>
                </li>
            </ul>
        
    
            
        <SCRIPT>
            $( "#cancelButton" ).bind( "click", function(event, ui) {
            });
        </SCRIPT>
   </div>

   <footer data-role="footer" class="tuts">
        <h4> Test </h4>
   </footer>

 </div>
 <!-- /page -->
</body>
</html>

CSS

header, footer { display: block; }
 .ui-li-icon {
   top:  9px;
}
 
.tuts { background: #c24e00; }

.ui-li-heading { font-size: 12px; }

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

.buttonUnderListView{
    margin:30px auto auto auto;
}

.detailListText{
    margin: 0 0 0 20px;
}

.checkBoxLeft{
    position: absolute; 
    left: 1px; 
    top: 40%;
}


/*
*    Red Button for cancel button (jquery mobile) ==> use style r
*/
.ui-btn-up-r {
    border: 1px solid #721414;
    background: #AB2525;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 -1px 1px #000;
    background-image: -moz-linear-gradient(top, #DD4E4E, #BB2525);
    background-image: -webkit-gradient(linear,left top,left bottom,
        color-stop(0, #DD4E4E),
        color-stop(1, #BB2525));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#C54E4E', EndColorStr='#AB2525')";
}
.ui-btn-up-r a.ui-link-inherit {
    color: #fff;
}
.ui-btn-hover-r {
    border: 1px solid #6E0000;
    background: #FF4B4B;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 -1px 1px #000;
    background-image: -moz-linear-gradient(top, 
        #FF7272, 
        #DD4B4B);
    background-image: -webkit-gradient(linear,left top,left bottom,
        color-stop(0, #FF7272),
        color-stop(1, #DD4B4B));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#D47272', EndColorStr='#B64B4B')";
}
.ui-btn-hover-r a.ui-link-inherit {
    color: #fff;
}
.ui-btn-down-r {
    border: 1px solid #772222;
    background: #C54E4E;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 -1px 1px #000;
    background-image: -moz-linear-gradient(top, #9E3939, #C54E4E);
    background-image: -webkit-gradient(linear,left top,left bottom,
        color-stop(0, #9E3939),
        color-stop(1, #C54E4E));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#9E3939', EndColorStr='#C54E4E')";
}
.ui-btn-down-r a.ui-link-inherit {
    color:...