JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="./../../Public/Css/Sass/Main.css" type="text/css">

<div class="wrapper">
    <div class="topbar">
        <div class="logo"></div>
        <!-- .logo -->
        <div class="search">
            <input type="text" class="searchinput" placeholder="Suchen">
        </div>
        <!-- .search -->
        <div class="drpCustomer">
            <select>
                <option value="opt">opt</option>
                <option value="blub">blub</option>
                <option value="test">test</option>

            </select>
        </div>
        <!-- .drpCustomer -->

    </div>
    <!-- .content -->
    <div class="btnMenu">
        Men&uuml;
    </div>
    <!-- .btnMenu -->

    <div class="wrpNav">

        <div class="navMain">
            <f:format.raw>{mainmenu}</f:format.raw>
        </div>
        <!-- .navMain -->
        <div class="navGov">
            <f:format.raw>{govmenu}</f:format.raw>
        </div>
        <!-- .navGov -->
        <div class="navSocial">
            <span class="scl-10"></span>
            <span class="scl-20"></span>
            <span class="scl-80"></span>
        </div>
        <!-- .navSocial -->
        <div class="navAdress"></div>
        <!-- .navAdress -->
    </div>


    <!-- BACKEND: 2 Spalter -->
    <f:if condition="{layout} == 4">
        <div class="wrpHeader">
            HEADERBILDj
        </div>
        <div class="wrpTwoCol">
            <div class="twoColCnt">
                <div class="wrpBreadcrumb">
                    TEXT < TEXT < TEXT
                </div>

                <div class="wrpTeaser">
                    <f:format.raw>{contentNormal}</f:format.raw>
                </div>
                <div class="wrpLeft">
                    <f:format.raw>{contentLeft}</f:format.raw>
                </div>
                <div class="wrpRight">
                    <f:format.raw>{contentRight}</f:format.raw>
                </div>
                <div class="push"></div>

    ...

CSS

/* Variables BEGIN */
/* Variables END */
/* Import BEGIN */
/**********************************************************************
* Fonts
**********************************************************************/
@font-face {
  font-family: 'texgyreheros';
  src: url("../Fonts/texgyreheroscn/texgyreheros-regular.otf");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'FontAwesome';
  src: url("../Fonts/fontawsome/fontawesome-webfont.eot?v=4.4.0");
  src: url("../Fonts/fontawsome/fontawesome-webfont.eot?#iefix&v=4.4.0") format("embedded-opentype"), url("../Fonts/fontawsome/fontawesome-webfont.woff2?v=4.4.0") format("woff2"), url("../Fonts/fontawsome/fontawesome-webfont.woff?v=4.4.0") format("woff"), url("../Fonts/fontawsome/fontawesome-webfont.ttf?v=4.4.0") format("truetype"), url("../Fonts/fontawsome/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular") format("svg");
  font-weight: normal;
  font-style: normal; }
/**********************************************************************
* Icons
**********************************************************************/
.scl-80 {
  font-family: FontAwesome;
  content: "\f166"; }

/**********************************************************************
* Global CSS
**********************************************************************/
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden; }

.clearfix {
  display: inline-block; }

body {
  overflow-x: hidden;
  font-family: 'texgyreheros'; }

/*
body{
  background-color: #0088c3;
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: 'texgyreheros';
  overflow-x: hidden;

  .wrapper{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;

    .wrpTwoCol{
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;


    }
  }

  .wrpHeader{
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 30%;
    background-color:...