JSFiddle - React, Tailwind, and code Playground

by moathhowari

HTML

<div data-role="page" id="demo-page" data-theme="c">
    <div data-role="header">
        <img border="0" src="../../images/logo.png" height="28px" alt="ISOSEC" style="float:left;display:inline; padding-left:25px; padding-top: 5px; padding-right: 5px; max-height:28px max-width:1422px; heigh:auto; width:auto;" />
         <h1>Patient: Daniel Jones - SD65432 - ACU <br>SMF  - ASS - 409 825 6334</h1>
 <span class="ui-btn-right">
            <img src="../../images/image.jpg?height=100&amp;width=443" style="border:none;margin-right:5px;margin-top:0px;height:2.4vw;width:12.3vw; padding-right:25px;" onclick="showDlgPIN( );"></img>
        </span>

        <div data-role="navbar">
            <!-- navbar -->
            <ul>
                <li><a href="index.html" data-ajax="false" data-transition="flip" id="other-color"><div class="navbar-padding"><img src="../../images/icons/SearchLarge.png" height="30px;" width="30px;" style="vertical-align:middle"></div></a>

                </li>
                <li><a href="../../index.html" data-ajax="false" id="other-color"><div class="navbar-padding"><img src="../../images/icons/ApplicationL.png" height="30px;" width="30px;" style="vertical-align:middle"></div></a>
                </li>
                <li><a href="../App/index.html" data-ajax="false" id="other-color"><div class="navbar-padding"><img src="../../images/icons/applogo.png" height="30px;" width="30px;" style="vertical-align:middle"></div></a>
                </li>
                <li><a href="#" data-ajax="false" id="other-color"><div class="navbar-padding"><img src="../../images/icons/View.png" height="30px;" width="10px;" style="vertical-align:middle"></div></a>
                </li>
                <li><a href="#" data-ajax="false" id="other-color"><div class="navbar-padding"><img src="../../images/icons/LastValue2.png" height="30px;" width="30px;" style="vertical-align:middle"></div></a>
                </li>
            </ul>
        </div>
        <!-- /navbar...

CSS

.navpadding {


     padding-top: 15px;


 }


 .center-button {


     margin: 0 auto;


 }


 .center-wrapper {


     text-align: center;


 }


 .center-wrapper {


     margin: 0 auto;


 }


 .center-table {


     padding-bottom: 40px;


     padding-top: 25px;


     width:auto;


 }


 .collapsible {


     padding-left: 5px;


     padding-right: 5px;


 }


 .ui-btn-right {


     padding-top: 5px;


 }


 #other-color {


     background: rgba(115, 189, 226, 0.9);


 }


.ui-btn-inner {


 background: rgba(115, 189, 226, 0.9);
 border-style:solid;
 border-color:white;

 }


 .ui-body-c {


     background-image: url(../../images/BackgroundDot2.png);


     border: #FFFFFF;


 }


 .navbar-padding {


     padding-top: 6px;


     padding-bottom: 6px;


 }


 .listItemNoIcon .ui-icon {


     display: none;


 }


 .navbar {


     outline-color: #FFFFFF !important;


     border-color: #FFFFFF !important;


 }