JSFiddle - React, Tailwind, and code Playground

by Please_Reply

HTML

<body>
<div class="container"> <!-- This is the container -->
	<div class="header"> <!-- This is the header -->
    	<div style="float:left"> <!-- This is the logo -->
        	<img src="logo.png" height="120px"/>
        </div>
        <div style="float:right; font-family:'Myriad Pro'; background-image:url(images/loginsignupbar.png); width:535.1px; height:30px">
        	<div onmouseover="tabDisplay('block')" id="shopcartbar" style="float:right; font-size:24px; margin-top:-7px">
            <img src="images/shoppingCart.png" height="30px"/>&nbsp;Shopping Cart (<span id="numberOfItems">0</span>)&nbsp;
            </div>
            <div id="shoppingTab" onmouseout="tabDisplay('none')">
            Shopping Cart<br />
            	<div class="smallProduct" style="margin-top:5px" id="thmbproduct0"></div>
                <div class="smallProduct" id="thmbproduct1"></div>
                <div class="smallProduct" id="thmbproduct2"></div>
                <div class="smallProduct" id="thmbproduct3"></div>
                <div class="smallProduct" id="thmbproduct4"></div>
                <div class="smallProduct" id="thmbproduct5"></div>
                <div class="smallProduct" id="thmbproduct6"></div>
                <div class="smallProduct" id="thmbproduct7"></div>
                <div class="smallProduct" id="thmbproduct8"></div>
                Total: $<span id="totalPrice">00</span>.00
            </div>
            <span id="topnavbar" style="float:right; font-size:24px; margin-top:5.5px">
            </span>
        </div>
        <div style="float:right; clear:right"> <!-- This is the navigation menu -->
        	<div style="position:relative"> <!-- This is the container of the navigation menu -->
            	<div id="slider"></div> <!-- This is the slider bar -->
            	<a href="link.html"><div id="one" class="item"><div class="inside">Button 1</div></div></a> <!-- This is just one of the buttons -->
    			<a href="link2.html"><div id="two"...

CSS

body{ /* Applies to the <body> tag */
	margin:0px; /* Sets the margin on all sides to 0px */
}
.container{ /* The container class */
	width:100%; /* This sets the width */
	height:100%; /* This sets the height */
	background-color:white; /* Sets the background colour */
	font-family:"Myriad Pro"; /* Sets the font family */
}
.header{ /* The header class */
	width:100%;
	background-color:blue;
	color:white; /* The sets the colour of the font */
}
div{
    display: inline-block; /* Sets the display type */
    float:left; /* Sets the float position */
}
#one, #two, #three, #four{
    background-color:black;
    height:90px;
	color:white;
	text-align:center;
	font-size:25px;
}
#slider{
    background-color:blue;
    height:10px;
    width:100px;
    position: absolute; /* Sets the position to a specific type */
    left: 0; /* Sets the number of pixels from the left that this object is placed */
    bottom:0; /* Sets the number of pixels from the bottom that this object is placed */
}
.inside{
	margin-left:30px; /* Specifies the margin from the left side */
	margin-right:30px; /* Specifies the margin from the right side */
	padding-top:7px; /* Specifies the padding from the top side */
	pointer-events:none; /* Specifies the cursor events */
	margin-top:25px; /* Specifies the margin from the top side */
}
#shoppingTab{
	display:none;
	height:670px;
	width:400px;
	background-color:white;
	color:black;
	position:relative;
	margin-top:-2px;
	border-radius:10px;
	color:black;
	border:1px solid #323232;
	padding:10px;
	float:right;
	z-index:50;
}
.smallProduct{
	height:50px;
	width:390px;
	float:left;
	border: 2px solid black;
	border-radius:10px;
	font-size:16px;
	cursor:pointer;
	margin-bottom:10px;
	overflow:hidden;
}
.smallProduct:hover{
	border:2px solid blue;
}

JavaScript

document.getElementById("topnavbar").innerHTML = "TESTING 123";

function tabDisplay(displayStatus){
	shoppingTab.style.display = displayStatus;
}

$(document).ready(function() {
  $("#slider").animate({
    "left": $('#three').position().left + "px",
    "width": $('#three').width() + "px"
  }, 0);

  $(".item").hover(function() {
    $("#slider").stop();
    $("#slider").animate({
      "left": $(this).position().left + "px",
      "width": $(this).width() + "px"
    }, 500);
  });

  $(".item").on("mouseout", function() {
    $("#slider").stop();
    $("#slider").animate({
      "left": $('#three').position().left + "px",
      "width": $('#three').width() + "px"
    }, 500);
  });
});