JSFiddle - React, Tailwind, and code Playground

by il kamil

HTML

<header>

    <h1>Header</h1>

    <nav id="standardNav">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Connect</a></li>
        </ul>
    </nav>

</header>

<div class="content">

    <nav id="fixedNav">
        <ul>
            <li style="margin-top: 35px"><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li id="connect"><a href="#">Connect</a></li>
        </ul>

    </nav>

    <div class="primary">

        <div class="primary">

            <h2>Primary primary</h2>

            <p>lorem ipsum ...

                            </p>

                            <p>lorem ipsum ...

                            </p>

        </div>

        <div class="secondary">

            <h2>Primary secondary</h2>

            <p>lorem ipsum ...

                            </p>

        </div>

    </div>

    <div class="secondary">

        <h2>Secondary</h2>


        <p>lorem ipsum...

                    </p>

    </div>

</div>

<footer>

    <h2>Footer</h2>

</footer>

CSS

html, body, header, h1, h2, h3, ul, li, p, nav, aside, 
article, footer, section {
margin: 0;
padding: 0;
}

html {
background: gray;
}

body {
width: 85%;
margin: auto;
font-family: sans-serif;
min-width: 640px;
background: rgb(157, 157, 157);
}

.content {
overflow: hidden;
}

h1 {
padding: 2% 0 1% 2%;
}


h2, .secondary h2 {
padding: 5% 0 5% 2.5%;
}

.secondary h2 {
padding-top: 20%;
}

.primary .secondary h2 {
margin-bottom: 2.8%;
}


header {
border-bottom: 1px solid black;
}

.content {
overflow: hidden;
border-bottom: 1px solid black;
}

.primary {
float: left;
width: 75%; 
}

.primary .primary {
float: left;
width: 70%;
border-right: 1px solid black;
padding-bottom: 9999px;
margin-bottom: -9999px;
}

.primary p, .secondary p, .primary .secondary p, {
padding: 0 5% 5% 5%;
padding-right: 5%;
}

.primary .secondary p {
padding-bottom: 2.5%;
}

.primary .primary p {
padding: 0 2.5% 2.5% 7%;
}

.secondary {
float: right;
width: 20%;
padding-bottom: 9999px;
margin-bottom: -9999px;
}

.primary .secondary {
color: white;
float: right;
width: 27%;
border-right: 1px solid black;
padding-bottom: 9999px;
margin-bottom: -9999px;
}

footer h2 {
padding: 1.5% 0 1.5% 1.5%;
}

#fixedNav li {
background: rgba(67, 67, 67, 0.8);
list-style: none;
padding: 0.3em;
display: block;
margin-bottom: 35px;
text-align: center;
width: 85%;
}

#fixedNav ul {
position: fixed;
left: 0px;
top: 32%;
background: rgba(255, 255, 255, .5);
width: 9%;

}

#fixedNav a {
color: white;
text-decoration: none;
letter-spacing: 0.15em;
}

#fixedNav a:hover {
color: black;
background: white;
}



#standardNav li {
display: inline-block;
padding-bottom: 0.5%;
margin-left: 5%;
}

#standardNav a {
text-decoration: none;
color: white;
}

#standardNav ul {
text-align: right;
}

#standardNav a:hover {
color: black;
}

#connect {
color: red;
}