JSFiddle - React, Tailwind, and code Playground

by Erik Zanker

HTML

<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<ul data-role="listview" data-inset="true">
    <li>
        <div class="ui-field-contain">
            <label>Normal:</label>
            <input type="text" id="normal" name="normal"/>
        </div>
    </li>
    <li class="ui-li-static ui-body-inherit">
        <a href="#" class="readonly-btn-a" >
            <div class="ui-field-contain">
                <label>Link:</label>
                <input type="text" id="link" name="link"/>
            </div>
        </a>
        <a href="#" class="ui-btn ui-icon-bars ui-btn-icon-notext ui-btn-inline"></a>
    </li>
    <li>
        <div class="ui-field-contain">
            <label>Normal:</label>
            <input type="text" id="normal2" name="normal2"/>
        </div>
    </li>
</ul>

CSS

li .ui-field-contain {
    margin-right: 42px !important; 
}
.ui-listview>.ui-li-static {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.readonly-btn-a {
    background: 			#fff!important /*{a-bup-background-color}*/;
    color: 					#333!important /*{a-bup-color}*/;
    text-shadow: 0 /*{a-bup-shadow-x}*/ 1px /*{a-bup-shadow-y}*/ 0 /*{a-bup-shadow-radius}*/ #f3f3f3 /*{a-bup-shadow-color}*/;
    cursor: default !important;
    border: none !important;
    padding: 0 !important;
    margin: 0!important;
}