JSFiddle - React, Tailwind, and code Playground

by ethanpil

HTML

<!-- ---------
-- Material Autocomplete. 
-- 
-- Search on:
--  * ISRI Code
--  * Category
--  * Name
-- -----------------  -->
<label for="material-search">Material</label>
<ul id="material-search" class="autocomplete" data-role="listview" data-filter="true" data-filter-placeholder="Search Material" data-inset="true" data-icon="false" data-theme="b"></ul>

<br />
<!-- Weight Widget, with conversion info -->
<table>
    <tr>
        <td>Weight: </td>
        <td width="85%">
            <input type="text" name="weight" id="weight" value="0">
        </td>
        <td>LBS.</td>
            <td style=""> <a href="#weightInfo" data-rel="popup" data-role="button" data-icon="info" data-theme="d" id="weightInfoIcon" data-iconpos="notext">Weight Units</a> </td><td> <a href="#weightCalc" data-rel="popup" data-role="button" data-icon="grid" data-theme="d" id="weightInfoIcon">Read Scale</a> 
        </td>
    </tr>
</table>
<div data-role="popup" id="weightInfo" class="ui-content" data-theme="c" style="max-width:150px;">
    <table style="font-size:.78em">
        <tbody>
            <tr>
                <th>Pounds:</th>
                <td id="weight-unit-pound"></td>
            </tr>
            <tr>
                <th>Metric Tons:</th>
                <td id="weight-unit-metric_ton"></td>
            </tr>
            <tr>
                <th>Gross Tons:</th>
                <td id="weight-unit-gross_ton"></td>
            </tr>
            <tr>
                <th>Kilograms:</th>
                <td id="weight-unit-kilogram"></td>
            </tr>
        </tbody>
    </table>
</div>
<div data-role="popup" id="weightCalc" class="ui-content" data-theme="c" style="max-width:250px;">
    <button data-theme="b" id="readScale">Read Scale</button>
    <br />
    <input type="text" name="calc-weight" id="calc-weight" value="0">
    <select name="calc-weight-unit" id="calc-weight-unit">
        <option value="pound" selected>Pounds</option>
        <option...