JSFiddle - React, Tailwind, and code Playground

by jchaplin2

HTML

<div class="mainbody">
    		<div class="innerbody">
    			<div class="txg">
    				<a class="homelogo logo" href="#">WebSiteName</a>
    			</div>
    			<div class="teg">
    				<ul>
    					<li><a href="#">New</a></li>
    					<li><a href="#">Top</a></li>
    					<li><a href="#">Hd</a></li>
    					<li><a href="#">Upcoming</a></li>
    				</ul>
    			</div>	
    		</div>	
    	</div>

CSS

.mainbody{
    	width: 100%;
    	float: left;
    	background-color: red;
    	margin-top: 5px;
    }
    .innerbody{
    	width: 1000px;
    	margin:auto;
    	background-color: green;
    	height: 500px;
    }
    .txg{
display: inline-block;
text-align: center;
width:100%;
margin-top:10%;
    }
    .homelogo {
    	text-align: center;
    	line-height: 1em;
    	font-family: helvetica, arial, sans-serif;
    	font-weight: bold;
    	background: linear-gradient(to right, #7db9e8 50%,#1e5799 50%);
    	-webkit-background-clip: text;
    	-webkit-text-fill-color: transparent;
    	font-size: 50px;
    }
    .teg{
display: inline-block;
text-align: center;
width:100%
    }
    .teg ul{
    	list-style: none;
    }
    .teg li{
    	display: inline-block;
    	background-color: #07ABD8;
    	padding:15px;
    	border-radius: 8px;
    	font-size: 15px;
    	text-transform: uppercase;
    	font-family: helvetica, arial, sans-serif;
    }
    .teg li a{
    	text-decoration: none;
    	color: white;
    }