JSFiddle - React, Tailwind, and code Playground
HTML
<header id="header">
<section id="logo">
<!--<img data-gif="data.gif" data-png="data.png" src="logo.svg" />-->
</section><section id="input">
<input id="searchInput" type="text" name="search" autocomplete="off" />
</section>
</header>
<div id="wrapper">
<main id="main" role="main">
<ul>
<li>
<span class="number">1</span>
<div class="result">
<ul>
<li class="title">Title</li>
<li class="description">Description. Description. Description. Description. Description. Description.</li>
<li class="URL">http://someSite.com</li>
</ul>
</div>
</li>
<li>
<span class="number">2</span>
<div class="result">
<ul>
<li class="title">Title</li>
<li class="description">Description. Description. Description. Description. Description. Description.</li>
<li class="URL">http://someSite.com</li>
</ul>
</div>
</li>
<li>
<span class="number">3</span>
<div class="result">
<ul>
<li class="title">Title</li>
<li class="description">Description. Description. Description. Description. Description. Description.</li>
<li class="URL">http://someSite.com</li>
</ul>
</div>
</li>
<li>
<span class="number">4</span>
<div class="result">
<ul>
<li class="title">Title</li>
<li class="description">Description. Description. Description. Description. Description. Description.</li>
<li class="URL">http://someSite.com</li>
</ul>
</div>
</li>
<li>
<span class="number">5</span>
<div class="result">
<ul>
<li class="title">Title</li>
<li class="description">Description. Description. Description. Description. Description. Description.</li>
<li class="URL">http://someSite.com</li>
</ul>
</div>
</li>
<li>
<span class="number">6</span>
<div...
CSS
html, body{
height:100%;
width:100%;
margin:0;
padding:0;
font-family:'Open Sans';
font-size:16px;
}
header, #header{
height:200px;
width:100%;
position:fixed;
display:block;
z-index:1;
}
#logo{
width:20%;
background:pink;
}
#input{
width:80%;
background:green;
}
#input, #logo{
height:100%;
display:inline-block;
vertical-align:top;
}
#searchInput{
height:25.888px;
height:1.618rem;
width:90%;
margin:0 auto;
margin-top:-12.944px;
margin-top:-0.809rem;
padding:0 16px;
padding:0 1rem;
position: relative;
background:#ffffff;
background:rgb(255, 255, 255);
border:2px solid #b1acaa;
border:2px solid rgb(177, 172, 170);
display:block;
font-size:120%;
font-size:1.2rem;
line-height:normal;
outline:none;
outline:0;
top:50%;
}
#wrapper{
height:100%;
padding:42px;
position:relative;
background:#b1acaa;
background:rgb(177, 172, 170);
top:200px;
}
main, [role="main"], #main{
height:auto;
padding:50px;
background:#ffffff;
background:rgb(255, 255, 255);
}
main ul, [role="main"] ul, #main ul{
margin:0;
padding:0;
list-style:none;
list-style-type:none;
}
.number{
display:inline;
font-size:423.6%;
font-size:4.236rem;
}
.result{
display:inline-block;
font-size:100%;
font-size:1rem;
}
.result ul{
margin-left:9.888px !important;
margin-left:0.618rem !important;
}
.result li{
line-height:1.6;
}
embed, img, object, video{
max-width:100%;
margin:0 auto;
display:block;
}