JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div id="container">
<div id="containerHeader">
<h1>Seek & enjoy</h1>
<h3>Your movie seeker</h3>
<div id="containerForm">
<form class="form-wrapper cf">
<div id="inputplusbuttons">
<input type="text" placeholder="Find your movie" required>
<div id="containerButtons">
<button id="seek" type="submit">Seek</button>
<button id="reset" type="submit">Reset</button>
</div>
</div>
</form>
</div>
</div>
<div id="results">
<p>
</p>
<div id="movieList">
</div>
<div id="movieDetails">
</div>
</div>
</div>
</body>
CSS
#container {
font-size: 16px;
margin-top: -20px;
margin-left: -10px;
}
#containerHeader {
background-color: #e0e0e0;
padding-top: 20px;
text-align: center;
padding-bottom: 20px;
width: 100%;
position: fixed;
}
h1, h3 {
font-family: OliJoBold;
color: #4e4d4d;
}
h1 {
margin-top: 20px;
margin-bottom: -20px;
font-size: 70px;
}
h3 {
font-size: 30px;
margin-bottom: 10px;
}
#inputplusbuttons {
width: 250px;
margin: auto;
overflow: hidden;
}
input {
width: 100%;
height: 30px;
padding-left: 10px;
}
button {
width: 50%;
height: 30px;
}
#seek {
float: left;
}