JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
        <header>
                <div id="logo">
                        <span style='color: #ff6c00;'>Dejan</span><<span style='color: #ff6c00;'>></span>Iskra
                </div>
                <div id="menu">
                        <ul>
                                <li><a href="#home">Home</a></li>
                                <li><a href="#about">About</a></li>
                                <li><a href="#projects">Projects</a></li>
                                <li><a href="#contact">Contact</a></li>
                        </ul>
                </div>
                <div class="clear">
                </div>
        </header>
        <div id="contentQuote">
                <h3>“What separates design from art is that design is meant to be... functional.”</h3>
                <br />
                <h4>― Cameron Moll</h4>
        </div>
        <div id="about" class="abt">
                <div class="line">
                    <h3><span style='color: #ff6c00;'>About</span> Me</h3>
                </div>
                <div id="left">
                The key to creating great brands, products and experiences comes through understanding of the client and user needs, among other things. The crucial stages of concept development, research and planning are at the heart of any successful project. I take great care in ensuring all the necessary steps are taken to produce stellar results every time.
                </div>
                <div id="right">
                It takes talent, knowledge, hard work, and dedication to make great ideas come to life. I've been helping make great ideas happen a long time and am not afraid of a challenge. New technologies get me excited and I love jumping right in and getting things done. I'm passionate for untangling problems and learning the lessons that unfold at each and every project.
                </div>
                <div id="middle">
                I have a strong background in...

CSS

*,
*:before,
*:after
{
    position: relative;
}
.line:after
{
    position: absolute;
    top: 49px;
    left: 0;
    content: "";
    height: 1px;
    width: 100%;
    background-color: blue;
}
.line h3
{
    z-index: 1;
    display: block;
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    background-color: #d1d1d1;
}
#container {
    width: 900px;  /* 46.875% */
    margin: 0 auto;
}
 
header {
        margin-top: 0.625em;
}
 
#logo {
        font-family: Otto;
        font-size: 5.018750050187999em;
        float: left;
}
 
#menu {
        padding-top: 2.4em;
        margin-left: 24.5em;
}
 
#menu ul {
        list-style-type: none;
}
 
#menu li {
        display: inline;
}
 
#menu li a {
        text-decoration: none;
        color: #ff6c00;
        font-family: Verdana;
        font-size: 1.0037500100376em;
        padding: 0.2em 0.6em;
}
 
.clear {
        clear: both;
}
 
#contentQuote {
        background-color: #f07057;
        padding-left: 7em;
        padding-top: 3em;
        padding-right: 5.5em;
        padding-bottom: 4em;
        margin-top: 1.5em;
        margin-bottom: 3em;
}
 
#contentQuote h3 {
        font-family: Verdana;
        font-style: italic;
        font-size: 2.5093750250939997em;
        color: white;
        line-height: 1.5em;
}
 
#contentQuote h4 {
        font-family: Verdana;
        font-style: italic;
        font-size: 2.5093750250939997em;
        color: black;
        text-align: right;
}
 
#about {
        background-color: #d1d1d1;
        padding-top: 1em;
        font-family: Verdana;
        font-size: 1.002913551695902em;
        color: black;
        width: 100%;
        padding-bottom: 3em;
        margin-bottom: 3em;
}
 
#about h3 {
        font-family: Otto;
        font-size: 4.0150000401504em;
        text-align: center;
        padding-bottom: 0.7em;
        padding-top: 0.2em;
}
 
#about #left {
float: left;
width: 30%;
padding-right: 4em;
}
 
#about #right {
float: right;
width:...