JSFiddle - React, Tailwind, and code Playground

by danield770

HTML

<body>
    <nav role="navigation">
        <ul id="rightnav">
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ul id="leftnav">
            <li>A</li>
            <li>B</li>
            <li>C</li>
        </ul>
        <ul id="centernav">
            <li id="dislike">dislike</li>
            <li id="stumble">STUMBLE</li>
            <li id="like">like</li>
        </ul>
    </nav>
</body>

CSS

/* CSS Document */
*
{
    margin:0;padding:0;
}
ul
{
   list-style-type: none; 
}
nav{
	height: 30px;
	top: 0;
	right: 0;
	left: 0;
	position: fixed;
	width: 100%;
	background-color: red;
	text-align: center;
}

#centernav{
	display:inline-block;	
}

#dislike{
	margin: 0 auto;
	background-color: yellow;
	text-align: center;
	text-vertical-align: middle;
	height: 30px;
	width: 100px;
	line-height:40px;
	display: inline-block;
}

#stumble{
	margin: 0 auto;
	top: 0;
	background-color: blue;
	text-align: center;
	text-vertical-align: middle;
	height: 40px;
	width: 100px;
	line-height:40px;
	display: inline-block;
	vertical-align: top
}

#like{
	margin: 0 auto;
	background-color: pink;
	text-align: center;
	text-vertical-align: middle;
	height: 30px;
	width: 100px;
	line-height:40px;
	display: inline-block;
}

#rightnav{
	float:right;
}

#rightnav li{
	border: 1px black solid;
	background-color: yellow;
	text-align: center;
	text-vertical-align: middle;
	height: 30px;
	width: 100px;
	float: right;
	line-height:40px;
	display: inline-block;
}

#lefttnav{
	float:left;
}

#leftnav li{
	border: 1px black solid;
	background-color: green;
	text-align: center;
	text-vertical-align: middle;
	height: 30px;
	width: 100px;
	float: left;
	line-height:40px;
	display: inline-block;
}