JSFiddle - React, Tailwind, and code Playground

by Manuel Hoffmann

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 class="ui-field-contain">
        <label>Normal:</label>
        <input type="text" id="normal" name="normal"/>
    </li>
    <li class="readonly-li-a">
        <a class="readonly-btn-a ui-field-contain">
            <label>Link:</label>
            <input type="text" id="link" name="link"/>
        </a>
        <a data-role="button" data-inline="true" data-icon="bars" data-iconpos="notext"></a>
    </li>
    <li class="ui-field-contain">
        <label>Normal:</label>
        <input type="text" id="normal2" name="normal2"/>
    </li>
</ul>

CSS

.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;
}

.readonly-li-a {
    border: 0 solid #ddd !important;
    border-top-width: 1px !important;
    padding: .7em 1em !important;
    background: #fff!important;
    margin: 0 1px!important;
    -webkit-box-shadow: 0 1px 3px /*{global-box-shadow-size}*/ 		rgba(0,0,0,.15) /*{global-box-shadow-color}*/;
    -moz-box-shadow: 0 1px 3px /*{global-box-shadow-size}*/ 		rgba(0,0,0,.15) /*{global-box-shadow-color}*/;
    box-shadow: 0 1px 3px /*{global-box-shadow-size}*/ 				rgba(0,0,0,.15) /*{global-box-shadow-color}*/;
}