JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>My Favorite Films</title>

        <link type="text/css" rel="stylesheet" href="css/site.css" />

        <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" />
        <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" />
        <link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet" />
    </head>

    <body>
        <div id="container">
            <div id="header">
                <h1 class="home-page-header">My Favorite Films</h1>
            </div>

            <div id="content">
                <div id="nav">
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="black_mirror.html">Black Mirror</a></li>
                        <li><a href="hoc.html">House of Cards</a></li>
                        <li><a href="inception.html">Inception</a></li>
                        <li><a href="interstellar.html">Interstellar</a></li>
                        <li><a href="st.html">Stranger Things</a></li>
                    </ul>
                </div>

                <div class="home-page-images-row1">
                    <img src="images/black_mirror_cover.jpg" class="home-page-image-row1" />
                    <img src="images/hoc_cover.jpg" class="home-page-image-row1" />
                    <div class="clear-float"></div>
                </div>

                <div class="home-page-images-row2">
                    <img src="images/inception_cover.jpg" class="home-page-image-row2" />
                    <img src="images/interstellar_cover.jpg" class="home-page-image-row2" />
                    <img src="images/st_cover.jpg" class="home-page-image-row2" />
                    <div class="clear-float"></div>
                </div>
            </div>

            <div class="clear-float"></div>

            <div id="footer">
                <h3>My Favorite Films</h3>
 ...

CSS

body {
    background-color: lightgray;
    background-image: url('../images/brushed.png');
    background-repeat: repeat;
    float: left;
    font-family: 'Lato', 'Roboto', 'Arial', 'Verdana', sans-serif;
    margin: 0px auto;
    width: 960px;
}

div.clear-float {
    clear: both;
}

div.home-page-images {
    float: left;
    margin: 0px 0px 0px 25px;
}

div#container {
    background-color: #aaaaaa;
    color: white;
    width: 960px;
}

div#footer {
    background-color: gray;
    margin-top: 50px;
    padding: 5px 0px;
    text-align: center;
}

div#header {
    padding: 50px 0px;
}

div#nav {
    font-family: 'Playfair Display', serif;
    float: left;
    text-transform: uppercase;
    width: 200px;
}

div#nav a:hover, div#nav a:active {
}

div#nav a:link, div#nav a:visited {
    color: white;
    text-decoration: none;
}

div#nav li {
    margin: 0px 0px 20px 0px;
}

div#nav ul {
    list-style-type: none;
    overflow: hidden;
}

h1 {
    text-align: center;
}

h1.home-page-header {
    color: #bf0000;
    font-size: 60px;
}

img.home-page-image-row1 {
    float: left;
    width: 300px;
    height: 175px;
    margin-left: 50px;
    margin-top: 50px;
}

img.home-page-image-row2 {
    float: left;
    width: 250px;
    height: 150px;
    margin-left: 50px;
    margin-top: 50px;
}