JSFiddle - React, Tailwind, and code Playground

by 8odoros

HTML

<body>
	
	

<div id="wrapper">
	<div id="head">

				<!-- hierin zit logo userprofile text en search bar -->
				<div id="logo"><a href="/procurement/account/welcome" title="Back to homepage">asdasdsa</a></div>
				
				<div id="headerUI">
					<div id="search">
						<form action="/procurement/orderstatus/search" id="zoekformulier" name="zoekformulier" style="padding:0;margin:0;" method="get">
							
							<input type="text" value="search" id="mainSearch" class="searchInput" onclick="this.value='';" name="term">
							<div class="searchDelete"><span id="x">x</span></div>
							<input id="submitSearch" name="submit" type="submit" value="Search" />
							<!--<br/><a href="">advanced search</a>-->
						</form>
					</div>
					<div id="userHeaderInfo">
						<p>Paul Measdsadin </p>
											</div>

				<div id="menu">			
					<ul>
	 
					    <li><a href="/procurement/orderstatus" title="Order status">Order status</a></li>
							    <li><a href="/procurement/account/webshops" title="Webshops">Webshops</a></li>
								    <li><a href="/procurement/account/files" title="Documents">Documents</a></li>
					    <li><a class="logbtn" href="/procurement/account/uitloggen" title="Log out">Log out</a></li>	
					</ul>			
				</div>
				<!-- e:menu -->
	</div> <!--end "headerUI" -->
	</div>
	<!-- e:header -->

 <div id="contentHead">

		<div id="contentInside">
			
			<div id="home-tekst">
	<h1>
	Welkom</h1>
<p>
	test</p>
<p>

<h1>
	Welcome</h1>
<p>
	test</p>
<p>

</div>		</div>

	
	

</div>
	<!-- e:content -->


	<div id="footer">

	<div id="footer2columns">
		<div id="footerFirstColumn">
			<h2>asd Group</h2>
				<div class="foot-left">
					Jsdfdsfsdft 53<br>
					7234825 AX EMMEN<br>
					P.O. Box 22346<br>
					7234234760 AA SsdfsK<p></p>
				</div>
				<div class="foot-right">
					<strong>T</strong> +31 (0) 88 - 523424 00<br>
					<strong>F</strong> +31 (0) 88 - 2342349<br>
				</div>
		</div>
		<div...

CSS

html, body
	{min-height:100%; padding:0; margin:0;}


html {
	overflow: -moz-scrollbars-vertical;
}

body{
	text-align:left;
	background:#f1f1f1;
}

#wrapper{
	min-height: 100%;
	margin:0 auto;
  

	background:#f1f1f1;
}

#contentHead{
		text-align:left;
	width:952px;
	padding:0 20px 0 21px;
	border: 1px solid #e2e2e2;
	margin:7px auto;
	background:#fff;

	min-height:100%; 
}

#contentInside{
	width:952px;
	
	padding:28px 20px 30px 34px;
	min-height:432px;
	height:auto !important;
	height:432px;

}

#head{
	height:48px;
	padding:5px 0 0 0;
	background:#fff;
	border-bottom:1px solid #e8e8e8;
}

#headerUI{
	padding-top:5px;
}

#logo{
	float:left;

	
}

#search{
	float:left;
	
	/*padding:21px 0 30px 0;*/
}

#userHeaderInfo{
	float:right;
	display:inline;
}
#userHeaderInfo p{
	display:inline;
}
#userIcon{
	width:24px;
	height:24px;
}




input.searchInput{
	/*float:left;
	width:103px;
	height:24px;
	padding:4px 45px 3px 15px;
	background: url(../images/search_bg.png) no-repeat top left;
	border:none;
	font-size:11px;
	color:#003b79;
	
	float:right;
	width:197px;
	height:21px;
	padding:4px 45px 3px 15px;
	border:none;
	font-size:11px;
	color:#003b79;

	*/

	float:left; 
	width:300px; 
	height:29px; 
	line-height:27px;
	text-indent:10px; 
	font-family:arial, sans-serif; 
	font-size:1em; 
	color:#333; 
	background: #fff; 
	border:solid 1px #d9d9d9; 
	border-top:solid 1px #c0c0c0; 
	border-right:none;

}

.searchDelete {
	float:left; 
	width:16px;
	height:31px; 
	line-height:27px; 
	margin-right:15px; 
	padding:0 10px 0 10px;
	font-family: "Lucida Sans", "Lucida Sans Unicode",sans-serif;
	font-size:22px; 
	background: #fff;  
	border:solid 1px #d9d9d9; 
	border-top:solid 1px #c0c0c0; 
	border-left:none;
}

/* Set default state of "X" and hide it */
.searchDelete #x {
	color:#A1B9ED; 
	cursor:pointer;
	display:none;
}
/* Set the hover state of "X" */
.searchDelete #x:hover {
	color:#36c;
}
/* Syle the search button. Settings of line-height, font-size, text-indent used to...