JSFiddle - React, Tailwind, and code Playground

by darkajax

HTML

<body>
    <!-- Header -->	<a href="index.html"><div id="header">
			<img id="elderscrollslogo" src="elderscrollslogo.png">
			<img id="elderscrollstext" src="The_Elder_Scrolls.png">
		</div></a>

    <!-- xxx -->
    <!-- Horizontal Menu -->
    <div class="H-menu">
        <div class="option" id="games">Games</div>
        <div class="option">Media</div>
        <div class="option">Items</div>
        <div class="option">News</div>
        <div class="option">Search</div>
        <div class="open"></div>
        <div class="option" id="settings">Settings
            <img id="gear" src="gear.png" />
        </div>
    </div>
    <!-- xxx -->
    <!-- Second Menus -->
    <div id="containercontainer">
        <!-- Settings Menu -->
        <div id="containersettings">
            <div class="s-o">Account</div>
            <div class="s-o">Privacy</div>
            <div class="s-o" id="last2">Logout</div>
        </div>
        <!-- xxx -->
        <!-- Games Menu -->
        <div id="containergames">	<a href="LAT.html">
					<div class="g-o">L.A.T.
						<img class="imggames" src="LAT.jpg">
					</div>
				</a>
	<a href="arena.html">
					<div class="g-o">Arena
						<img class="imggames" src="arena.jpg">
					</div>
				</a>
	<a href="daggerfall.html">
					<div class="g-o">Daggerfall
						<img class="imggames" src="daggerfall.jpg">
					</div>
				</a>
	<a href="morrowind.html">
					<div class="g-o">Morrowind
						<img class="imggames" src="morrowind.jpg">
					</div>
				</a>
	<a href="oblivion.html">
					<div class="g-o">Oblivion
						<img class="imggames" src="oblivion.jpg">
					</div>
				</a>
	<a href="skyrim.html">
					<div class="g-o">Skyrim
						<img class="imggames" src="skyrim.jpg">
					</div>
				</a>
	<a href="online.html">
					<div class="g-o" id="last1">Online
						<img class="imggames" src="online.jpg">
					</div>
				</a>

        </div>
        <!-- xxx -->
    </div>
    <!-- xxx -->
    <!-- Text -->
    <div id="Text">
       ...

CSS

html {
    background-image: url("carbon_background.jpg");
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cgoogleover;
}
body, html {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}
div div {
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
}
#header {
    height: 75px;
    width: 100%;
    background-image: linear-gradient(right bottom, rgb(61, 60, 61) 21%, rgb(110, 110, 110) 68%);
    background-image: -o-linear-gradient(right bottom, rgb(61, 60, 61) 21%, rgb(110, 110, 110) 68%);
    background-image: -moz-linear-gradient(right bottom, rgb(61, 60, 61) 21%, rgb(110, 110, 110) 68%);
    background-image: -webkit-linear-gradient(right bottom, rgb(61, 60, 61) 21%, rgb(110, 110, 110) 68%);
    background-image: -ms-linear-gradient(right bottom, rgb(61, 60, 61) 21%, rgb(110, 110, 110) 68%);
    background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0.21, rgb(61, 60, 61)), color-stop(0.68, rgb(110, 110, 110)));
    padding: 10px;
}
#elderscrollslogo {
    height: 60px;
    width: 60px;
    margin-left: auto;
    margin-right: auto;
    animation: rotate 5s linear infinite;
    -webkit-animation: rotate 5s linear infinite;
}
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}
#elderscrollstext {
    width: 498px;
    height: 62.33333333px;
}
.H-menu {
    height: 25px;
    background-color: #3B5998;
    width: 100%;
    display: block;
    border-radius: 0px;
}
.H-menu .option {
    float: left;
    width: 15%;
    text-align: center;
    background-color: #3B5998;
    height: 25px;
    border-radius: 0px;
    color: white;
    font-size: 20px;
   ...

JavaScript

$(document).ready(function () {

    $("img").mousedown(function () {
        return false;
    });

    $(".s-o, .g-o").hide();
    
    $('#containergames').find('a').prop("disabled",true);



    $(".H-menu .option").mouseenter(function () {
        $(this).animate({
            backgroundColor: "#7894CC"
        });
    });
    $(".H-menu .option").mouseleave(function () {
        $(this).animate({
            backgroundColor: "#3B5998"
        });
    });

    $("#settings").click(function () {
        $(".s-o").show();
        $(".s-o").animate({
            opacity: 0.9
        });
    });
    $("#containersettings").mouseleave(function () {
        $(".s-o").animate({
            opacity: 0
        }, function () {
            $(".s-o").hide();
        });
    });

    $("#games").click(function () {
        $(".g-o").show();
        $(".g-o").animate({
            opacity: 0.9
        });
    });
    $("#containergames").mouseleave(function () {
        $(".g-o").animate({
            opacity: 0
        }, function () {
            $(".s-o").hide();
        });
    });



});