JSFiddle - React, Tailwind, and code Playground

HTML

<body class="photoBody">
<div class="left">  
    <div id="sidebar">
        <div class="navigation">
            <h1 id="photogLogo">Text Logo</h1>
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </div>
    </div>
</div>
<div class="right">
    <div class="main1">
        <img class="row1" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/PM5544_with_non-PAL_signals.png/320px-PM5544_with_non-PAL_signals.png" alt="Coastline" />
        <img class="row1" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/PM5544_with_non-PAL_signals.png/320px-PM5544_with_non-PAL_signals.png" alt="Coastline" />
        <img class="row1" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/PM5544_with_non-PAL_signals.png/320px-PM5544_with_non-PAL_signals.png" alt="Coastline" />
        <img class="row1" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/PM5544_with_non-PAL_signals.png/320px-PM5544_with_non-PAL_signals.png" alt="Coastline" />
    </div>
</div>
</body>

CSS

/* ----- Fonts CSS ----- */
    body{
        font-family: 'Comfortaa', cursive, sans-serif;
        margin: 0;
        padding: 0;
    }
    /* ----- End Fonts CSS ----- */
    .indexBody{
        width: 100%;
        background-image: url("city.jpg");
        color: #fff;
    }
    #textLogo{
        text-align: center;
        font-size: 46px;
    }

    /*---- Index Page ----*/
    .serviceTitle{
        float: left;
        width: 49%;
        text-align: center;
        margin-bottom: 0;
    }
    .serviceImage{
        float: left;
        margin-left: 4.5%;
        margin-bottom: 9%;
        margin-top: 3%;
        width: 600px;
    }
    a .serviceImage:hover{
        background-image: url("IMG_3134.jpg");
    }
    .clearfix{
        clear: both;
    }
    footer{
        color: #fff;
        font-size: 24px;
        text-align: center;
    }

    /*---- Photograohy Portfolio Index Page ----*/
    nav ul{
        width: 75%;
    }
    nav ul li{
        list-style-type: none;
        font-size: 34px;
        color: #fff;
        text-align: center;
        padding: 15px;
        border-bottom: 2px solid black;
    }
    nav ul li a{
        text-decoration: none;
        color: black;
    }
    nav ul li a:hover{
        color: blue;
    }
    .col1{
        float: left;
        width: 35%;
    }
    .photoBody{
        margin: 0;
        background-color: #fff;
    }
    #sidebar{
        width: 20%;
    }
    .navigation{
        background-color: #fff;
        width: 100%;
        height: 100%;

    }
    #photogLogo{
        text-align: center;
        font-size: 46px;
        color: black;
        margin-top: 0;
    }
    .main1{
        width: 35%;
        clear: both;
    }

    .row1{
        display:block;
        left:0;
        float:left;
        width: 100%; 
        padding: 3px;
        margin: 1%;
        border: 2px solid black;
    }


    /*Test*/
    .right{
        float: right;
    }