JSFiddle - React, Tailwind, and code Playground

by Afzaal Ahmad Zeeshan

HTML

<script src="http://www.codehelper.io/api/ips/?js"></script>
<div class="topbar">
			<div id="username">
				USERNAME
			</div>
			<div class="navigation">
				<ul>
                    <li>First Item</li>
                    <li>Second Item</li>
                </ul>
			</div>
		</div>
		<div class="titlebox">
			<div class="title">
				TITLE
			</div>
		</div>
		<div class="subtitle">
			SUBTITLE
		</div>

CSS

html, body{
	background-color: #000000;
	color: #FFFFFF;
	margin: 0px;
	font-size: 12px;
	min-width: 1300px;
}
 
div.topbar{
	background-color: #0F0F0F;
	width: 100%;
	height: 40px;
	padding-left: 10px;
	line-height: 40px;
	box-shadow: 0 5px 5px -2px #000000;
}
 
div#username{
	float: left;
	width: 200px;
    border-right: 1px solid #fff;
}
 
div.navigation{
	float: right;
	width: 70%;
}

.nagivation ul li {
    display: inline;
}

.navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
 
div.titlebox{
	margin: 10px;
	float: center;
	text-align: center;
	border: 2px solid #FFFFFF;
	box-shadow: 0px 0px 10px 5px #CCCCCC inset;
}
 
div.title{
	padding-top: 20px;
	padding-bottom: 20px;
	font-size: 20px;
}
 
div.subtitle{
	padding-left: 20px;
	font-size: 16px;
}

JavaScript

$(function(){
				GetIPAddress();
			});
			function GetIPAddress(){
				$("#username").append("Welcome, " + codehelper_ip.IP);
			}