JSFiddle - React, Tailwind, and code Playground

by Marventus

HTML

<div id="banner">
    <img class="logo" src="images/logo.png" alt="logo" />
    <div class="stirling">Stirling</div>
    <a class="topNav" href="search.html">Search</a>
    <a class="topNav" href="contact.html">Contact</a>
    <a class="topNav" href="about.html">About</a>
    <a class="active" href="index.html">Home</a>
</div><!--end of banner -->
<div id="container">
    <div id="content">
        <div class="photo-div photo-div1">
            <a href="search-results.html">
                <span id="wildlife">Wildlife</span>
            </a>
        </div>
        <div class="photo-div photo-div2">
            <a href="search-results.html">
                <span id="food">Food</span>
            </a>
        </div>
        <div class="photo-div photo-div3">
            <a href="search-results.html">
                <span id="flowers">Flowers</span>
            </a>
        </div>
        <div class="photo-div photo-div4">
            <a href="search-results.html">
                <span id="sport">Sport</span>
            </a>
        </div>    
    </div><!-- end content -->
</div><!--end of container-->

<div id="footer">
    <hr/>
    <a class="bottomNav" href="admin-log.html">Admin</a>
    <a class="bottomNav1" href="some-href"> | </a>
    <a class="bottomNav" href="sitemap.html">Sitemap</a>
</div><!--end of footer -->

CSS

#banner {
    margin: 0px auto;
    width: 100%;
    height: 130px;
    background-color: #E8FCFF;
    border-bottom: 2px solid #7A7A7A;
    box-shadow: 0px 7px 7px #999;
}
#container {
    margin-bottom: 50px;
    width: 100%;
}
#footer {
    width: 100%;
    bottom:0;
    left:0;
    text-align: center;
    clear:both;
}
hr
/*single direction drop shadow*/
 {
    height: 10px;
    border-top: 1;
    border-bottom: 0;
    box-shadow: inset 0 11px 11px -11px rgba(0, 0, 0, 0.5);
    position: relative;
}
.logo {
    margin-top: 5px;
    margin-left: 20px;
    width: 190px;
    height: 105px;
    float: left;
    display: block;
}
.stirling {
    font-size:20px;
    color: #999;
    font-weight:bold;
    float: left;
    position:relative;
    margin-top: 80px;
    text-decoration: none;
}
.bottomNav {
    font-size: 22px;
    color: #999;
    font-weight:bold;
    text-decoration: none;
}
.bottomNav:hover {
    font-size:22px;
    color: #606060;
    font-weight:bold;
    text-decoration: none;
}
.bottomNav1 {
    font-size:22px;
    color: #606060;
    font-weight:bold;
    text-decoration: none;
}
.bottomNavActive {
    font-size:22px;
    color: #DD7B7B;
    font-weight:bold;
    text-decoration: none;
}
.bottomNavActive:hover {
    font-size:22px;
    color: #606060;
    font-weight:bold;
    text-decoration: none;
}
.active {
    font-size:22px;
    color: #DD7B7B;
    font-weight:bold;
    float: right;
    margin: 30px;
    text-decoration: none;
}
.active:hover {
    font-size:22px;
    color: #606060;
    font-weight:bold;
    float: right;
    margin: 30px;
    text-decoration: none;
}
.topNav:hover {
    font-size:22px;
    color: #606060;
    font-weight:bold;
    float: right;
    margin: 30px;
    text-decoration: none;
}
.topNav {
    font-size: 22px;
    color: #999;
    font-weight:bold;
    float: right;
    margin: 30px;
    text-decoration: none;
    overflow: hidden;
    display:inline;
}
#header {
    float: left;
}
#wildlife {
   ...