JSFiddle - React, Tailwind, and code Playground

by Joe Scotto

HTML

<!doctype html>
<style type="text/css">
    a {
        text-decoration:none;
        color:#000
    }
    h1:hover {
        color:#FFF
    }
</style>
<title>CodeGrammers - The Coders Community</title>
</head>
<body>
    <div id="content_wrapper">
        <div id="logo_wrapper">
            <center>	<a href="index.html">
            	<h1 class="logo">CodeGrammers</h1>
            </a>

            </center>
        </div>
        <div id="navbar_wrapper">
            <div id="navbar_pos">
                <center>
                    <ul class="navbar">|
                        <li><a href="html.html">HTML</a>

                        </li>|
                        <li><a href="css.html">CSS</a>

                        </li>|
                        <li><a href="javascript.html">JAVASCRIPT</a>

                        </li>|
                        <li><a href="php.html">PHP</a>

                        </li>|</ul>
                </center>
            </div>
        </div>
        <div id="page_wrapper">
            	<h1>Info for page<h1>
        </div>
    </div>
</div>
</body>
</html>

CSS

@charset"utf-8";
 body {
    margin:0px;
    padding:0px;
    background-color:#64AAD0
}
#content_wrapper {
    margin-left:auto;
    margin-right:auto;
    width:1200px;
}
#logo_wrapper {
    margin-left:auto;
    margin-right:auto;
    width:1200px;
    height:100%;
    text-align:center;
    position:relative;
    bottom:21px;
    bottom:50px;
}
#navbar_wrapper {
    position:relative;
    bottom:133px;
    background-color:#235B79;
    width:1230px;
    border-radius:10px;
}
#navbar_pos {
    position:relative;
    right:20px
}
#page_wrapper {
    margin-left:auto;
    margin-right:auto;
    width:1230px;
    height:100%;
    text-align:center;
    position:relative;
    bottom:21px;
    background-color:#086CA2;
    position:relative;
    bottom:149px;
    border-radius:10px;
}
.logo {
    font-family:Slant;
    font-size:100px;
    background-color:#086CA2;
    width:100%;
    border-radius:10px;
    padding:15px
}
h1.logo a {
    text-decoration:none;
    color:#000
}
.navbar {
    list-style:none;
}
ul.navbar li {
    display:inline;
    margin:0;
    text-align:center;
}
ul.navbar a {
    padding:10px;
    margin:0px;
    text-decoration:none;
    color:#CF0;
    border-radius:10px;
    display: inline-block;
    width: 272px;
}
ul.navbar a:hover {
    font-size:14px;
    padding:10px;
    margin:0px;
}