JSFiddle - React, Tailwind, and code Playground

HTML

<body data-spy="scroll" data-offset="150" data-target=".navbar">
    <nav class="navbar navbar-default navbar-fixed-top visible-xs">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span>

                <pan class="icon-bar">
                    </span> <span class="icon-bar"></span>
 <span class="icon-bar"></span>

            </button> <a class="navbar-brand" href="#">Brand</a>

        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a>
                </li>
                <li><a href="#">Link</a>
                </li>
                <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>

                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Action</a>
                        </li>
                        <li><a href="#">Another action</a>
                        </li>
                        <li><a href="#">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="#">One more separated link</a>
                        </li>
                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a>
                </li>
                <li class="dropdown"> <a href="#" class="dropdown-toggle"...

CSS

body {
    font-family:'Oswald', serif;
    letter-spacing: 0.05em;
    color: white;
    text-align: center;
}
h1, h2, h3, h4, h5 li {
    font-family:'Bree Serif', serif;
}
.section-bg {
    min-height: 100vh;
    width: 100%;
    padding-top: 7em;
    padding-bottom: 4em;
}
/* navigacijos mygtukus pagrazinti visited, hover, active ir t.t. b8senose */
 .navbar-default {
    background-color: white;
    border-bottom: none !important;
}
.navbar-nav li a span {
    font-size: 2.2em;
}
.navbar-nav li a {
    line-height: 1.5em;
    width: 7.0em;
    border-right: 0.15em solid rgb(215, 215, 215);
    background-color: red;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
    background-color: purple !important;
    border-top: 0.25em solid red !important;
    border-bottom: none;
}
.navbar-brand {
    border-right: 0.15em solid rgb(215, 215, 215);
    border-bottom: 0.15em solid rgb(215, 215, 215);
    text-align: center;
    height: 4.7em;
    margin: 0px;
    padding-left: 1.3em;
    padding-right: 1.3em;
    background-color: red;
}
/* NAVIGACIJA END */

/* Background's for content */
 .intro-bg {
    padding-top:16em;
    /* Location of the image */
    background-image: url(../images/intro_1.jpg);
    /* Background image is centered vertically and horizontally at all times */
    background-position: center center;
    /* Background image doesn't tile */
    background-repeat: no-repeat;
    /* This is what makes the background image rescale based
     on the container's size */
    background-size: cover;
    /* Set a background color that will be displayed
     while the background image is loading */
    background-color: #464646;
}
.portfolio-bg {
    /* IE10 Consumer Preview */
    background-image: -ms-linear-gradient(top, #FFFFFF 0%, #CA1E04 100%);
    /* Mozilla Firefox */
    background-image: -moz-linear-gradient(top, #FFFFFF 0%, #CA1E04 100%);
    /* Opera...