JSFiddle - React, Tailwind, and code Playground

HTML

<header class="full_height" id="home">
    <nav id="nav"> <a href="index.html"><img src="logo.png" id="logo"></a>

        <ul>
            <li><a href="#">Test</a>
            </li>
        </ul>
    </nav>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1400 1120" enable-background="new 0 0 1400 1120" xml:space="preserve" id="city" preserveAspectRatio="xMidYMax">
        <g id="bg2" enable-background="new"></g>
        <g id="bg1"></g>
        <g id="building_15" enable-background="new">
            <rect x="188" y="832" fill-rule="evenodd" clip-rule="evenodd" fill="#B8E4E9" width="65" height="288"></rect>
        </g>
        <g id="bridge" enable-background="new">
            <path fill-rule="evenodd" clip-rule="evenodd" fill="#B8E4E9" d="M1254,1120h39V857h-39v10c0,0,3,20-60,20s0,13,0,13s34,3,53-12
		c19-15,7-6,7-6L1254,1120z"></path>
        </g>
        <g id="building_14" enable-background="new">
            <path fill-rule="evenodd" clip-rule="evenodd" fill="#99D8E2" d="M314,617v38h-35v39h-44v426h143V617H314z M267,739h-15v-17h15V739
		z M313,693h-15v-17h15V693z"></path>
        </g>
        <g id="building_13">
            <polygon opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" fill="#BAE8EF" points="1044,537 1044,508 1041,508 1041,537 
		1036,537 1036,489 1033,489 1033,537 993,537 993,1120 1067,1120 1067,537 	"></polygon>
        </g>
        <g id="building_12">
            <polygon opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" points="353,531 389.5,494 426,531 	"></polygon>
            <rect x="352" y="531" opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" fill="#BAE8EF" width="74" height="589"></rect>
        </g>
        <g id="building_11">
            <rect x="890" y="600" opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" fill="#99D8E2" width="143" height="520"></rect>
        </g>
        <g id="building_10">
            <rect...

CSS

* {
    padding:0px;
    margin:0px;
    border: 0px;
}
a {
    text-decoration:none;
}
a, img {
    border:none;
    outline:none
}
html, body {
    height: 100%;
}
body {
    font-family: myriad-pro, Helvetica, sans-serif;
    background-color: rgb(248, 248, 248)
}
header {
}
h1, h2, h3, h4 {
    color: #0f0f0f;
}
section {
    min-height:200px;
    padding:1em;
}
.full_height {
    height: 100%;
    min-height: 350px;
    position: relative;
}
.container {
    width: 780px;
    margin:0px auto;
}
.fluid_container {
    padding-left: 40px;
    padding-right: 40px;
}
.per_fluid {
    min-height: 100%;
}
ul li {
    display: inline;
}
li {
    list-style-type: none;
}
#nav {
    padding: 20px;
}
#nav ul {
    float: right;
}
#nav img {
    float:left;
}
.container p {
    float:left;
}
#home {
    background-color: rgb(248, 248, 248);
    color: rgb(28, 94, 100);
}
#header-content {
    color: rgb(28, 94, 100);
    font-size: 45px;
    text-shadow: 1px 1px rgba(255, 255, 255, 0.35);
    font-weight: bold;
    display:block;
}
.btn {
    padding: 15px;
    background: rgba(255, 255, 255, 0.5);
    margin-right: 15px;
}
svg {
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:0;
}
div.buttons {
    position:relative;
    padding-top:60px;
    padding-left: 70px;
    width: 400px;
}
nav {
    position:relative;
    z-index:1;
}
.btn_main {
    background: -webkit-gradient(linear, left top, left bottom, from(#168add), to(#007ee5));
    background: -moz-linear-gradient(top, #168add, #007ee5);
    border-radius: 4px;
}
.lrg_input {
    padding: 10px;
    width: 40%;
    margin-bottom: 20px;
    font-size: 16px;
}
#learn {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.6);
    z-index:1;
    margin-bottom: 20px;
    left:50%;
    width: 150px;
    margin-left: -75px;
    text-align: center;
    line-height: 50px;
}
#learn a {
    color: black;
   ...