JSFiddle - React, Tailwind, and code Playground

by Josh Hurlburt

HTML

<link href='https://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Dosis:600' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Rambla' rel='stylesheet' type='text/css'>
<body>
    <h1 class="header">WJFW Search</h1>
    <input type="text" class="search" placeholder="Search"></input>
    <button type="submit" class="searchButton">Search</button>
    <img src="http://upload.wikimedia.org/wikipedia/en/7/75/WJFW_2011_Logo.png" class="logo">    
    <div>
        <img src="http://pagead2.googlesyndication.com/simgad/9429225716928857855" class="banner" alt="banner">
    </div>
    <div class="mainClass">
        <div class="imgColor">
            <!-- <img src="https://c1.staticflickr.com/5/4015/4716419367_282a00ed64.jpg" class="backgroundImg" alt="Northwoods Forrest">  -->
        </div>
    </div>
</body>

CSS

body {
    background-color:#cfcfcf;
 background:url("https://c1.staticflickr.com/5/4015/4716419367_282a00ed64.jpg");
    background-repeat:no-repeat;
    background-size:600px;
}
h1.header {
    position:fixed;
    top:100px;
    right:206px;
    z-index:1;
    font-family: 'Rambla', sans-serif;
    margin:auto;
    color:blue;
}
button.searchButton {
    position:fixed;
    top:195px;
    right:190px;
    padding:4px;
    z-index:1;
    color:white;
    font-family: 'Dosis', sans-serif;
    background:blue;
    border:none;
    height:28px;
    width:55px;
}
input.search {
    position:absolute;
    top:195px;
    right:240px;
    padding:5px;
    z-index:1;
    width:130px;
    border:1px solid blue;
}
img.logo {
    position:fixed;
    top:260px;
    right:250px;
    height:80px;
    z-index:1;
}
div.imgColor {
    height:395px;
    width:480px;
    background-color:red;
    margin-left:0;
    margin-right:0;
    text-align:center;
    top:-20px;
    right:0;
    left:1px;
    bottom:1px;
    margin:auto;
    opacity:.80;
}
/*div.mainClass {
    height:350px;
    width:550px;
    background-color:grey;
    margin-left:0;
    margin-right:0;
    text-align:center;
    top:0;
    right:0;
    left:0;
    bottom:0;
    margin:auto;
}
img.backgroundImg {
    height:295px;
    width:545px;
    opacity:.5;
}*/
img.banner {
    height:60px;
    top:0;
    bottom:0;
    right:0;
    left:33px;
    position:relative;
    margin:auto;
    border:solid black 2px
}