JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>Screen1</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
<link rel="stylesheet" type="text/css" href="screen1.css">
</head>
<body>
<div id="header"><p class="p1"><b>Composite<img class="img1" src="https://cdn2.iconfinder.com/data/icons/picol-vector/32/arrow_sans_down-128.png" alt="alternate"></b></p></div>

<div id=""main>
 <div data-role="main" id="main" class="ui-content">
    <form>
      <input data-type="search" id="divOfPs-input">
    </form>
    <div class="elements" data-filter="true" data-input="#divOfPs-input">
      <p><strong>These</strong> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
      <p><strong>p elements</strong> nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>
      <p><strong>are</strong> et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est</p>
      <p><strong>filterable</strong> Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur</p>
    </div>
  </div>
    </div>
</body>
</html>

CSS

@CHARSET "ISO-8859-1";

#header
{	position:absolute;
    height:40px;
    width:100%;
    background-color:#D1D3D4;
	verticle-align="middle";
	left:0;
	
}
.img1
{
	position:relative;
	height:13px;
	float:right;
	padding-right:12%;
}

.p1{
	
	position:relative;
	padding-bottom:5%;
	padding-left:7%;
	width:100%;

}

#main
{	
	position:absolute;
	margin-top:80px;
	left:-.3%;
	margin-right:2%;
	width:98%;
	border-right:5%;
	
}
p{
    margin-left:10%;
    margin-right:10%;
}

form div.ui-input-search{
    margin-left:10%;
    margin-right:10%;
}
}