JSFiddle - React, Tailwind, and code Playground

by xJuhix

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Modern Simplicity selles modern, elegant and simple decor for your Home">
    <meta name="keywords" content="">
    <meta name="author" content="Juhi Saigal">
    <title>Modern Simplicity | Home </title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div class="header-Logo">
            <a href="index.html">
                <img src="http://elits.no/FinalLogo.png" alt="Logo for Modern Simplicity, Moreden Simplicity written in 2 triangles facing down">
            </a>
        </div>
    
        
        <nav class="nav-Bar">
            <ul>
                <li><a href="index.html">HOME</a></li>
                <li><a href="hikes.html">ROOMS</a>
                    <ul class=dropdown>
                        <li><a href=#>LIVING ROOM </a></li>
                        <li><a href="#">BEDROOM</a></li>
                        <li><a href="#">BATH</a></li>
                        <li><a href="#">KITCHEN</a></li>
                        <li><a href="#">OFFICE</a></li>
                    </ul>
                </li>
                <li><a href="about.html">SALE</a></li>
                <li><a href="about.html">ABOUT</a></li>
                <li><a href="contact.html">CONTACT</a></li>
            </ul>
        </nav>
    </header>
    
</body>
</html>

CSS

* {
	box-sizing: border-box;
}

/*Global style*/

@font-face {
	font-family: "PermanentMarker";
	src: url('../fonts/PermanentMarker-Regular.ttf') format('truetype');
}

@font-face {
	font-family: "Kushan";
	src: url('../fonts/KaushanScript-Regular.ttf') format('truetype');
}

@font-face {
	font-family: "OpenSans-SemiBold";
	src: url('../fonts/OpenSans-SemiBold.ttf') format('truetype');
	font-style: normal;
}
@font-face {
	font-family: "OpenSans";
	src: url('../fonts/OpenSans-Regular.ttf') format('truetype');
}


html {
	height: 100%;
	padding: 0px;
}

body {
	padding-bottom: 0px;
	overflow: visible;
	height: 100vh;
	margin: 0;
	padding:0;
}

main{
	margin: 0 auto;
	max-width: 1100px;
}
p {
	color: black;
	font-size: 20px;
	font-weight: 400;
	font-family: "OpenSans";
	max-width: 900px;
}
h1, h2, h3, li a{
	font-family: "OpenSans-SemiBold";
}

/*------------------------------Header--------------------------*/


.header-Logo{
    padding-top: 10px;
    position: relative;
	display: flex;
    flex-direction: column;
    width: 60%;
	
	/*background-image: url("../images/woman.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	height: 450px;*/
}

.header-Logo img{
    width: 50%;
    height: 50%;
    margin-left: auto;
}


/*-----------------------------Navigation---------------*/

.nav-Bar{
    display: block;
	color: white;
	position: relative;
	margin-bottom: 0px;
	margin-top: 0px;
	text-align: center;
    border-bottom: solid #014421 3px;
}

nav > ul {
	margin: 0
}


ul {
	list-style: none;
	padding:0;
}

ul li {
	display: inline-block;
	margin-left: 5%;
	font-size: 28px;
	position: relative;
}

ul li a {
	padding: 5px 20px;
	display: block;
	text-align: left;
	color: black;
	text-decoration: none;
}

ul li a:hover {
	border: solid #D4AF37 1px;
	text-decoration: none;
}
.dropdown a{
	font-size: 18px;
	font-family: "Verdana";
    padding: 5px;
    
}

ul li ul.dropdown{
	min-width: 100%;
	position: absolute;
    display: none;
   ...