JSFiddle - React, Tailwind, and code Playground

by ilapawar

HTML

<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css">
<div data-role="page">
    <div data-role="header" id="header">
        <ul id="menu-left">
            <span data-role="button" data-icon="arrow-d" data-iconpos="left">Menu</span>
            <ul data-role="listview" data-inset="true"                      <li data-icon="false"><div style={word-wrap: break-word;   }> <a href="#A1" >A111111111111111111111 111111111111</a> </div></li>
                   <li data-icon="false"><a href="#A2">Option A2</a></li>
                   <li data-icon="false"><a href="logout.html">Logout</a></li>
               </ul>
        </ul>
    </div>
    <div data-role="content">
        <input type="text" id="regNo" maxlength="6" placeholder="Enter registration number">
    </div>
    
</div>

CSS

#header{
    overflow: visible; /* Let menu content overflow outside the header */
}
#header ul { /* Menu Name */
    margin-top: 0.4em;
}
#header ul ul { /* Menu Item List */
    position: absolute; /* Position absolutely */
    display: none; /* Hide */
    z-index:500; /* Ensure visibility over other elements on page */
    margin-top: 0px; /* Bring menu closer to button; not needed on mobile */
}
#header ul ul li {
    width: 150px; /* Fixed width menu items*/
    display: block; /* JQM makes a inline-blocks... reset it to block */
}
#header ul:hover ul {
    display: block; /* Display menu on hover over parent */
}
#menu-left {
    float: left;
    margin-left:0.5em;
}

#menu-left ul {
    margin-left:0.5em;
}

div.ui-li div.ui-btn-text a.ui-link-inherit {
    word-wrap: break-word;    
}

JavaScript

<script language="JavaScript">
      
       temp = temp.replace(/[^a-zA-Z 0-9]+/g,''); 

   </script>