JSFiddle - React, Tailwind, and code Playground

by rafacardosoc

HTML

<title>Taste of Brazil Market</title>
<script>
    $(document).ready(function() {
        // when the #hover DIV is hovered, change the background of the body
        $('#hover').hover(function() {
            $('body').addClass('myNewBackground');
        });
    });
</script>
</head>
<body>
    <div id="hover"></div>
    <ul id="nav">
        <li class="menu_item" id="menu_item_menu"><a href="#">&nbsp;</a>

            <li class="menu_item" id="menu_item_contact"><a href="contact.html">&nbsp;</a>

                <li class="menu_item" id="menu_item_location"><a href="location.html">&nbsp;</a>

    </ul>
    <div id="coconut"><a href="#">&nbsp;</a>
    </div>
    <ul id="footer">
        <li class="footer_item"><a href="#">816-527-0400</a>

            <li class="footer_item"><a href="#">|</a>

                <li class="footer_item"><a href="#">[email protected]</a>

                    <li class="footer_item"><a href="#">|</a>

                        <li class="footer_item"><a href="#">25 E 3rd Street, KCMO 64106</a>

    </ul>

CSS

body {
    background-image:url(http://s5.postimg.org/6qbplw2xj/Background_main.jpg);
    background-position:top center;
    background-repeat: no-repeat;
    background-color:black;
    height:800px;
    width:800px;
}
#nav {
    list-style: none;
    position:fixed;
    right:50%;
    margin-right:155px;
    margin-top:220px;
}
.menu_item {
    padding-left:60px;
    padding-top:3px;
    margin:15px 15px 0 0;
    width:254px;
    height:30px;
    opacity:0.8;
}
#nav li a {
    text-decoration: none;
    color:white;
    display:block;
}
#menu_item_menu {
    background:url(images/MenuItem_menu.jpg);
    display:block;
}
#menu_item_contact {
    background:url(images/MenuItem_contact.jpg);
}
#menu_item_location {
    background:url(images/MenuItem_location.jpg);
}
#hover {
    background: blue;
}
#hover {
    width: 200px;
    height: 200px;
    position: relative;
    top: 200px;
    background: green;
}
.myNewBackround {
    background: red;
}
#footer {
    list-style: none;
    position:fixed;
    right:50%;
    top:835px;
    font-size:14pt;
    margin-right:-345px;
}
.footer_item {
    display:inline-block;
    padding:0 0px 0 30px;
}
#footer li a {
    color:white;
    text-decoration: none;
    display:inline;
}