JSFiddle - React, Tailwind, and code Playground
HTML
<div data-role="page" data-theme='c'>
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme='a'>
<h1>HEADER</h1>
<div data-role="controlgroup" data-type="horizontal" data-inline='true' class='ui-btn-right' >
<a href="index.html" data-role="button" data-icon="star" data-iconpos="notext">Up</a>
<a href="index.html" data-role="button" data-icon="grid" data-iconpos="notext">Down</a>
<a href="index.html" data-role="button" data-icon="gear" data-iconpos="notext">Delete</a>
</div>
</div>
<div data-role="content" data-theme='c'>
<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Type Search Criteria" data-filter-theme="c">
<li class="ad"><a href='#xpage'>
<img src="http://www.appmalt.info/AMobile/Birdapp/img/none.jpg"/>
<h2>Abcdefghijklmnopqr</h2>
<p><i>amessage</i></p>
<p class="ui-li-aside" ><i class='icon-remove'></i><font color="#cccccc" >NOT SEEN</font></p>
</a></li>
<li class="ad"><a href='#xpage'>
<img src="http://www.appmalt.info/AMobile/Birdapp/img/none.jpg"/>
<h2>Abcdefghijklmnopqr</h2>
<p><i>amessage</i></p>
<p class="ui-li-aside"><i class='icon-ok'></i><font color="green" style='font-weight:bold;padding-left:0.7em;'>SEEN IT!</font></p>
</a></li>
<li class="ad"><a href='#xpage'>
<img src="http://www.appmalt.info/AMobile/Birdapp/img/none.jpg"/>
<h2>Abcdefghijklmnopqr</h2>
<p><i>amessage</i></p>
<p class="ui-li-aside" ><i class='icon-remove'></i><font color="#cccccc" >NOT SEEN</font></p>
</a></li>
<li class="ad"><a href='#xpage'>
<img src="http://www.appmalt.info/AMobile/Birdapp/img/none.jpg"/>
<h2>Abcdefghijklmnopqr</h2>
<p><i>amessage</i></p>
<p class="ui-li-aside" ><i class='icon-remove'></i><font color="#cccccc" >NOT SEEN</font></p>
</a></li>
<li class="ad"><a href='#xpage'>
<img...