JSFiddle - React, Tailwind, and code Playground

by victorrseloy

HTML

<center>
    <div class="container">
        <!-- Start Header -->
        <div class="header">
            <img align="left" height="100%" width="180px" src="G:\Web Design\Website\Images\Tech Pics\amityshield.jpg" />
             <h1>Welcome to Amity Technology Education</h1>

        </div>
        <!-- End Header -->
        <!-- Start Naviagtion Bar -->
        <center>
            <ul id="nav">
                <!-- Has Dropdown -->
                <li class="current"><a href="homepage.html">Home</a>
                </li>
                <li><a href="consumer.html">Consumer &amp; Family Science</a>

                    <ul>
                        <li><a href="zawacki.html">Mr. Zawacki</a>
                        </li>
                        <li><a href="anderson.html">Mrs. Anderson</a>
                        </li>
                        <li><a href="hans.html">Mr. Hans</a>
                        </li>
                    </ul>
                </li>
                <li><a href="business.html">Business Education</a>

                    <ul>
                        <li><a href="fuller.html">Mr. Fuller</a>
                        </li>
                        <li><a href="cofrancesco.html">Mr. Cofrancesco</a>
                        </li>
                        <li><a href="tupper.html">Mrs. Tupper</a>
                        </li>
                    </ul>
                </li>
                <li><a href="tech.html">Technology Education</a>

                    <ul>
                        <li><a href="richard.html">Mr. Richard</a>
                        </li>
                        <li><a href="teravainen.html">Mr. Teravainen</a>
                        </li>
                        <li><a href="battaglia.html">Mr. Battaglia</a>
                        </li>
                        <li><a href="loman.html">Ms. Loman</a>
                        </li>
                        <li><a href="whelpley.html">Mr. Whelpley</a>
                        </li>
    ...

JavaScript

body {
    background - color: #eee;
    font - family: "Trebuchet MS",
    Helvetica,
    sans - serif;
    background - size: 100 % ;
}
a {
    color: #333;
}
.container {
    background-color: # 767070;
    width: 75 % ;
    height: 97 % ;
    min-width: 1000px;
    min-height: 600px;
    border- tyle: none;
    box-shadow: 0 0 10px 3px #888888;
    height: auto;
    min-height: 97% !important;
    background-color: "#FF0000"
}
.header {
    width: 100%;
    height: 150px;
    background-color: # 767070;
    background - size: cover;
}.header h1 {
    float: left;
    position: relative;
    left: 55px;
    top: 25px;
}#nav {
    width: 98.8 % ;
    margin: 0;
    padding: 7px 6px 0;
    background: #2b2b2b;
    line-height: 100%;
    display: inline-block;
}
# nav li {
        margin: 0 5px;
        padding: 0 0 8px;
        float: left;
        position: relative;
        list-style: none;
    }#nav a {
        font-weight: bold;
        color: #e7e5e5;
        text-decoration: none;
        display: block;
        padding: 8px 20px;
        margin: 0;
    }#nav a: hover {
        background: #000;
    color: # fff;
    }#nav.current a,
    #nav li: hover > a {
        background: #ddd;
        color: #666;
}
# nav ul li: hover a,
        #nav li: hover li a {
            background: none;
            border: none;
            color: #666;
}
# nav ul a: hover {
                color: black!important;
            }#nav li: hover > ul {
                display: block;
            }#nav ul {
                display: none;
                margin: 0;
                padding: 0;
                width: 98.5 % ;
                position: absolute;
                top: 35px;
                left: 0;
                background: #ddd;
                border: 1px solid#b4b4b4;
            }#nav ul li {
                float: none;
                margin: 0;
                padding: 0;
            }#nav ul a {
                font - weight: normal;
            }#usualp...