JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <section id="Header" class="group">
        <header>
             <h2><a href="http://www.epicforever.com">My Name</a></h2>

        </header>
        <nav class="main">
            <ul class="group">
                <li class="active"><a href="#">Home</a>
                </li>
                <li><a href="#">About</a>
                </li>
                <li><a href="#">Contact</a>
                </li>
            </ul>
        </nav>
    </section>
    <section id="TopContainer" class="group">
        <p>Welcome to my Portfolio</p>
        <p>Webdevelopment is my passion and I'd love to design and develop a website for you sometime!</p>
        <div class="block1">
            <header>
                <h2>Brand</2></header>
  </div>
  <div class="block2">
   <header><h2>Web</h2>
            </header>
        </div>
        <div class="block3">
            <header>
                <h2>Design</h2>
            </header>
        </div>
        <aside>
            <p>See all projects<a href="#">// brand // web // print</a>
            </p>
        </aside>
    </section>
</body>

CSS

html {
    width: 100%;
}
body {
    background-image: url("img/bg.png");
    font-family: arial, 'Lucida Sans Unicode';
    font-size: 87.5%;
    line-height: 15px;
    color: #000305;
}
#Header, #TopContainer, #MidContainer, #AboutContainer, #ContactContainer {
    width: 70%;
    margin: 0 auto;
}
#Header {
    padding: 0 10% 0 10%;
    background-color: #fff;
    margin-top: -8px;
    position: fixed;
    top:0px;
}
#Header header h2 {
    padding-top: 13px;
}
#Header nav {
    text-align: right;
}
#Header nav ul li {
    list-style: none;
    display: inline-block;
    padding: 5px;
}
#TopContainer {
    height: 150px;
    padding: 0 10% 10% 10%;
    background-color: #fff;
    margin-top: 100px;
    /* change this at the end*/
}