JSFiddle - React, Tailwind, and code Playground

by Baliga

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Startseite - Malermeister Gen</title>
        <link rel="stylesheet" href="css/index.css">
        <script src="js/script.js"></script>
        <link rel="shortcut icon" type="image/png" href="img/favicon.ico">
        <meta http-equiv="Content-Language" content="de">
        <meta http-equiv="last-modified" content="21.10.2018 08:22:20"> <!-- Edit: Nach Abschluss der Arbeit aktualisieren! -->
        <meta charset="UTF-8">
        <meta name="author" content="Til Jungbluth">
        <meta name="description" content="Hier wird eine Beschreibung stehen..."> <!-- Edit: Beschreibung hinzufuegen! -->
        <!-- <meta name="keywords" content="Malerorth, GmbH, Maler, Orth, Malermeister, Westerwald, Seck"> <!-- Edit: Ergaenzen! -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div id="wrapper">
            <div id="headerWrapper">
                <header id="header">
                    <a href="index.html"><img id="headerLogo" src="img/Logo Malerinnung.jpg" alt=""></a>
                    <h1 id="headerHeading">Malermeister Gen</h1>
                    <p id="headerSlogan"><span id="gestaltung">Gestaltung</span> - <span id="schoenheit">Schöhnheit</span> - <span id="schutz">Schutz</span></p>
                </header>
                <nav id="headerNav">
                    <a href="index.html" class="headerNavLinks" id="headerNavLinkActive">Home</a>
                    <a href="unser_team.html" class="headerNavLinks">Unser Team</a>
                    <a href="kontakt.html" class="headerNavLinks">Kontakt</a>
                </nav>
            </div>
            <div id="contentWrapper">
                <h2 id="contentHeading">Lorem ipsum dolor sit amet</h2>
                <div id="content">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mattis ligula ac dui rhoncus finibus. Duis sit amet sollicitudin lorem, id interdum...

CSS

body{
    background: linear-gradient(to right, rgb(0, 51, 145) 0%, rgb(241, 185, 0) 50%, rgb(212, 24, 0) 100%);
    margin: 0;
    font-size: 14px;
}

#header{
    height: 4.3em; /*Actual height is 4.1em. There was a space between #header and #headerNav, whyever...*/
    margin: 0 0 -0.2em 0; /*In this way they overlap, so there's no unwanted space between.*/
    padding: 0.6em;
    background: darkgrey;
}

#headerLogo{
    float: left;
    height: 100%;
}

#headerHeading{
    margin: 0 0 0 0.4em;
    display: inline-block;
}

#headerSlogan{
    display: block;
    margin: 0.2em 0.2em 0 0;
    float: right;
    font-size: 1.25em;
}

#gestaltung{
    color: rgb(0, 51, 145);
}

#schoenheit{
    color: rgb(241, 185, 0);
}

#schutz{
    color: rgb(212, 24, 0);
}

#headerNav{
    height: 1.9em; /*Actual height is 1.7em. There was a space between #headerWrapper and #contentWrapper, whyever...*/
    margin: 0 0 -0.2em 0;
    padding: 0.5em 0 0.23em 0;
    display: block;
    text-align: center;
    background: lightgrey;
}

.headerNavLinks{
    margin: 0 0.4em;
    padding: 0 0.6em;
    text-decoration: none;
    font-size: 1.25em;
    border: 0.0625em solid black;
    border-radius: 10%;
}

.headerNavLinks:hover{
    background: black;
    color: white;
}

#headerNavActive{
    border: 0.0625em solid green;
    border-radius: 10%;
}

#contentWrapper{
    background: white;
    padding: 0.6em;
}

#contentHeading{
    margin: 0;
}

#content{

}

#content p:last-child{
    margin: 1em 0 0 0;
}

#footer{
    background: darkgrey;
    padding: 0.6em;
}

#footerP{
    margin: 0 0 0.4em 0;
    text-align: center;
}

#scrollBackToTop{
    background: lightgrey;
    display: block;
    margin: 0 auto;
}

@media only screen and (min-width: 480px){

    body{
        font-size: 15px;
    }

}

@media only screen and (min-width: 545px){

    body{
        font-size: 16px;
    }

    #headerHeading{
        margin: 0;
        display: block;
    }

    #headerLogo{
        margin:...