JSFiddle - React, Tailwind, and code Playground

by ethanpil

HTML

<div data-role="header">
    <a href="#left-panel" data-icon="bars">Menu</a>
    <h1>Eco System</h1>
    <a href="#" data-icon="star" data-iconpos="right">Help</a>
</div>


<div id="left-panel" data-role="panel" data-display="overlay" data-theme="c">
	<p><img style="max-width:100%" src="http://www.demoeco.com/ui/global/images/logo.png"></p>
   <!-- SEARCH WIDGET -->
      <hr /> 

  <ul id="autocomplete" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Search" data-filter-theme="d"></ul>

      <table>
          <tr>
              <td style="width:75%">
     <select name="select-native-1" id="select-native-1">
        <option value="1">Barcode</option>
        <option value="2">Incoming Tickets</option>
        <option value="3">Outgoing Tickets</option>
          <option value="4">Bin</option>
        <option value="4">Orders</option>
          <option value="4">Invoice</option>
    </select>   
              </td>
              <td>      
 <a href="#" data-role="button" data-mini="true" data-inline="true" data-icon="check" data-theme="b">GO</a>
              </td>
          </tr>
      </table>

       
        <hr />
   <!--/ SEARCH WIDGET -->
           
	<div data-role="collapsible-set" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" data-content-theme="b">
		<div data-role="collapsible" data-iconpos="right">
			<h3>Super Admin</h3>
			<ul data-role="listview" data-icon="false">
				<li><a href="#">{{ @TXT.dashboard }}</a></li>
				<li><a href="#">{{ @TXT.dashboard }}</a></li>
			</ul>
		</div>
		<div data-role="collapsible" data-iconpos="right">
			<h3>Contacts</h3>
			<ul data-role="listview" data-icon="false">
				<li><a href="#">{{ @TXT.dashboard }}</a></li>
				<li><a href="#">{{ @TXT.dashboard }}</a></li>
			</ul>
		</div>

		<div data-role="collapsible" data-iconpos="right">
			<h3>Business</h3>
			<ul data-role="listview" data-icon="false">
				<li><a href="#">{{ @TXT.dashboard }}</a></li>
				<li><a...