JSFiddle - React, Tailwind, and code Playground

by Wolf Wortmann

HTML

<!doctype html>
<html>
<head>
    <title>Trafficpoint - die Internetagentur für Hannover!</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="Gute Webseiten mit maximaler Sichtbarkeit für Ihr Unternehmen von Trafficpoint - der Internetagentur für Hannover!">
    <link rel="shortcut icon" type="image/x-icon" href="r.jpg" />
    <link rel="stylesheet" href="home.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="webdesign-hannover.html">Webdesign</a></li>
                <li>|</li>
                <li><a href="suchmaschinenoptimierung-hannover.html">SEO</a></li>
                <li>|</li>
                <li><a href="cro-hannover.html">CRO</a></li>
                <li>|</li>
                <li><a href="social-media-agentur.html">SMM</a></li>
                <li>|</li>
                <li><a href="affiliate-marketing-agentur.html">Affiliate</a></li>
            </ul>
        </nav>
        <article>

        </article>
    </header> 
    <section>
        <h1>Unsere Internetagentur für Hannover - Trafficpoint!</h1>
        <p>
            Als Internetagentur für Hannover bieten wir Ihnen umfassendes Know-How rund um Fragestellungen bezüglich Ihres Internetauftritts. Vom Online-Konzept Ihrer Website bis zum Webcontrolling – unsere Internetagentur aus Hannover unterstützt Sie in jeder Phase Ihres Vorhabens.
        </p>
        <!-- <iframe width="1024" height="496" src="//www.youtube.com/embed/ngR0DBX2FDU" frameborder="0" allowfullscreen></iframe>-->
        <video src="Deineurl.mp4"></video>
        <p>
            Auf der Basis einer eingehenden Situationsanalyse erarbeiten wir als Internetagentur für Hannover mit Ihnen gemeinsam konkrete, messbare qualitative und quantitative Ziele. In einem nächsten Schritt erarbeiten wir Ihnen die strategische und operative Planung. Wir...

CSS

*{
    padding: 0;
    margin: 0;
}
html{
    background-color: rgba(40,40,40,1);
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-family: 'Montserrat','sans-serif';
}
a{
    color: inherit;
    transition: all 0.4s;
}
body>header nav{
    font-size: 1.2em;
    text-align: right;
    background-color: rgba(0,255,255,.9);
    width: 100%;
    padding: 20px 40px 20px 40px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
body>header a{
    text-decoration: none;
    padding: 0px 10px 0px 10px;
}
body>header a:hover{
    color: rgba(255,255,255, 1);
}
body>header nav ul{
    height: 1.5em;
}
body>header article{
    padding: 40px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    min-height: 200px;
    background-color: rgba(0,0,0, .5);
}
nav a{
    display: inline-block;
}
nav li{
    list-style-type: none;
    display: inline;
}
body>section{
    color: rgba(255,255,255, .6);
    padding: 40px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
body>footer{
    color: rgba(255,255,255, .6);
    background-color: rgba(255,255,255, .1);
    padding: 40px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
body>footer form{
    text-align: right;
}
body>footer input{
    text-align: left;
    padding: 7px;
    background-color: rgba(0,0,0, .2);
    border: none;
    border-radius: 4px;
    margin-top: 10px;
    color: rgba(255,255,255,1);
    box-shadow: 3px 5px 8px rgba(0,0,0, .4);
    transition: all 0.4s;
}
body>footer input:hover{
    background-color: rgba(0,0,0, .5);
}
body>footer input:focus{
    background-color: rgba(0,0,0, .5);
}
body>footer input[type="submit"]{
    border: 3px solid rgba(0,255,255,.9);
}
body>footer input[type="submit"]:hover{
    color: rgba(0,0,0,1);
    background-color:...