JSFiddle - React, Tailwind, and code Playground

by wrxsti85

HTML

<div class="header">
    <div class="container">
        <h1>LOGO HERE</h1>
    </div>
</div>
<div class="nav">
    <ul class="container">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
</div>
<div class="content">
    <div class="container">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dui ipsum, dignissim faucibus pharetra id, ultrices id justo. Mauris varius felis in tellus elementum laoreet. Curabitur condimentum fringilla sapien ut aliquam. Ut dignissim lectus tellus. In nec scelerisque lacus, bibendum pharetra mi. Morbi feugiat ipsum velit, ac tempor erat sollicitudin sed. Proin et pellentesque ante. Donec sit amet dictum elit. Praesent pellentesque luctus sagittis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
        <p>
Duis aliquam tempus lorem sed accumsan. Aliquam nec magna interdum, consequat lacus congue, porttitor enim. Donec in ullamcorper mauris. Vestibulum viverra accumsan neque at elementum. Vestibulum vitae leo semper, interdum ante molestie, sagittis neque. Proin sodales magna ut risus dapibus luctus. Proin vel semper lorem. Suspendisse eu enim eget velit bibendum fringilla in facilisis nisl. Morbi fringilla nibh auctor lorem rhoncus pharetra. Morbi venenatis, quam at venenatis congue, nisi diam bibendum leo, eget porttitor tortor lectus at orci. Aliquam ultricies, est at dictum accumsan, nulla tellus adipiscing felis, eu pretium dolor lacus cursus libero. Nullam consequat, mi venenatis ultricesisque nec congue lorem. Mauris viverra justo quis tincidunt aliquam. Nullam interdum nisi quis lacus tristique, sit amet commodo urna interdum. Donec facilisis nec metus id vehicula. Vivamus id augue elit. Nulla a justo pretium, faucibus mauris fringilla, fermentum eros. Vivamus mauris magna, venenatis et tempor a, ornare quis tellus. Nulla vulputate...

CSS

body {
    margin: 0px;
    padding: 0px;
}

.header h1 {
    color: #fff;
    margin: 0px;
    text-align: center;
    padding-top: 40px;
}

.nav {
    background: #e5e5e5;
}

.nav ul {
    list-style: none;
    padding: 0px;
}

.nav ul li {
    display: inline-block;
}

.nav ul li a {
    padding: 5px 10px;
    color: #000;
    text-docoration: none;
}

.container {
    width: 300px;
    margin: 0px auto;
}

.header {
    background: #000;
    height: 200px;
}

.content {
    text-align: justify;
}

.footer {
    background: #e5e5e5;
    height: 100px;
    padding: 10px 0px;
}