JSFiddle - React, Tailwind, and code Playground

by Liam Talbot

HTML

<body>
    <div class="nav">
        <div class="container">
            <div class="logo">
                <a href="#"><img src="RepublicSquare_logo.svg" style="height: 80px;"></a>
            </div>
            <div class="navMain">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>

CSS

body {
    width: 100%;
    height: 600px;
    padding-top: 300px;
    background-color: skyblue;
}

.nav {
    width: 90%;
    border: 2px solid black;
    display: block;
    background-color: transparent; }

li {
    display: inline;
    padding: 20px;
}

JavaScript

$( window ).scroll(function() {
  $('.nav').css('background-color', 'red');
});