JSFiddle - React, Tailwind, and code Playground
HTML
<div data-role="page" id="realTimeScreen" >
<div data-role="header" data-theme="b" style='z-index:9999'>
<h1 class="ui-title" id="heading" style="text-align:left;margin-left: 20px;" ></h1>
<div class="ui-btn-right" id="addbuttons" data-role="controlgroup" data-type="horizontal">
<a type="button" id="test"> click</a>
</div>
<div class="ui-grid-c" id="searchbar" style="display: none; position:relative; " class="searchContend_h" data-position="fixed" data-tap-toggle="false" >
<input name="text-12" id="text-12" value="" type="text" autocorrect="off" class="searchbox" >
<a href="#" data-role="button" data-corners="false" data-inline="true" class="search">Search</a>
<a href="#" data-role="button" data-corners="false" data-inline="true" id="next" class="searchNext" disabled>Next</a>
<a href="#" data-role="button" data-corners="false" data-inline="true" id="prev" class="searchPrev" disabled>Previous</a>
</div>
</div>
<div id="realTimeContents" class ="left realtimeContend_h" style="width:97%;">
The pear is native to coastal and mildly temperate regions of the Old World, from western Europe and north Africa east right across Asia. It is a medium-sized tree, reaching 10–17 m tall, often with a tall, narrow crown; a few species are shrubby.
The leaves are alternately arranged, simple, 2–12 cm long, glossy green on some species, densely silvery-hairy in some others; leaf shape varies from broad oval to narrow lanceolate. Most pears are deciduous, but one or two species in southeast Asia are evergreen. Most are cold-hardy, withstanding temperatures between −25 °C and −40 °C in winter, except for the evergreen species, which only tolerate temperatures down to about −15 °C.
The flowers are white, rarely tinted yellow or pink, 2–4 cm diameter, and have five petals.[3] Like that of the related apple, the pear...
CSS
.highlighted {
padding:1px 2px;
margin:0 -2px;
border-radius: 5px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}
.highlight {
-moz-border-radius: 5px;
/* FF1+ */
-webkit-border-radius: 5px;
/* Saf3-4 */
border-radius: 5px;
/* Opera 10.5, IE 9, Saf5, Chrome */
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
/* FF3.5+ */
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
/* Saf3.0+, Chrome */
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
/* Opera 10.5+, IE 9.0 */
}
.highlight {
padding:1px 4px;
margin:0 -4px;
}
JavaScript
$(document).on('click', '#test', function() {
$("#searchbar").toggle("slow");
});