JSFiddle - React, Tailwind, and code Playground

by Dor Cohen

HTML

<!DOCTYPE html>
<html>
<head>
	<title>Dorothy's Closet - Home</title>
	<link type="text/css" rel="stylesheet" href="css/Design.css">
	<link type="text/css" rel="stylesheet" href="css/Home.css">
</head>
<body>			
	<div class="Nav_Bar">
		<a href="Home.html" id="logo"></a>
		<ul>
			<li><a href="Home.html">Home</a></li>
			<li><a href="About.html">About</a></li>
			<li><a href="Contact.html">Contact</a></li>
		</ul>
	</div>
  <div class="Title">Welcome to Dorothy's Closet!</div>
</body>
</html>

CSS

@fontface {
	font-family: OpenSans;
	src: url(https://fonts.googleapis.com/css?family=Open+Sans);
}
body{
	font-family: 'OpenSans', sans-serif;
}

.Nav_Bar{
	background-color: pink;
	position: fixed;
  top:0;
  left:0;
	height: 40px;
	width:100%;
	margin: 0px;
	padding: 0px;
	opacity: 0.7;
}

.NavBar::after{
	clear: both;
	display: block;
	content: "";
}

.Nav_Bar ul{
	/*display: flex;
	justify-content: flex-end;
	flex: 2;*/
	float:right;
}

.Nav_Bar ul li{
	list-style-type: none;
	color: White;
	font-weight: bold;
	text-decoration: none;
	/flex-direction: column;/
	margin-right: 100px;
	display: inline-block;

	/* Doesn't Work 22:25 in the video*/
}

.Nav_Bar ul li a{
	list-style-type: none;
	color: White;
	font-weight: bold;
	text-decoration: none;
}

#logo{
	float: left;
	background-image: url("../img/Logo.png");
	display: block;
	z-index: 101;
}