JSFiddle - React, Tailwind, and code Playground

by peteng

HTML

<div class="container">
			<div class="oss-gradient">
			</div>
			<div class="header">
				<div class="logo">
				</div>
				<div class="product-name">
					App name 
				</div>
				<div class="logout">
					<a href="#">Logout</a>
				</div>
				<div class="help">
					<a href="#">Help</a>
				</div>
			</div>
			<div class="content-wrapper">
			</div>
		</div>

CSS

body {
			margin: 0px;
		}
		.oss-gradient {
			height: 5px;
			min-width: 1024px;
			background: yellow;
		}
		.header {
			height: 40px;
			min-width: 1024px;
			background: #def;
            display:table;
		}
.header > div {display:table-cell;}
		.logo {
			background-image: url("logo_top_small.png");
			background-repeat: no-repeat;
			background-position: center center;
			background-attachment: scroll;
			width: 50px;
			height: 100%;
		}
		.product-name {
			line-height: 35px;
			height: 100%;
		}
		.help {
			line-height: 35px;
			height: 100%;
            width:4em;
		}
		.logout {
			line-height: 35px;
			height: 100%;
            width:5em;
		}
		.content-wrapper {
			width: 1024px;
			background: #defabc;
			margin: 0px auto;
		}