JSFiddle - React, Tailwind, and code Playground

by Ulrich Bangert

HTML

<!-- === BANNER === -->

    <header id="header-banner"></header>

    <!-- === Navigationsleiste === -->

    <nav id="header-nav">
        <div class="container">
            <div class="row">
                <div class="col-6">

                    <a id="header-nav-name" href="index.html">Test</a>

                    <div id="navbar" class="clearfix">
                        <ul>
                            <li class="tier1"><a href="index.html">Home</a></li>
                            <li class="dropdown-content tier1"><a href="index.html">Unser Verein</a>
                                <ul>
                                    <li class="tier2"><a href="news.html">News</a></li>
                                    <li class="tier2"><a href="termine.html">Termine</a></li>
                                    <li class="tier2"><a href="jugend.html">Jugend</a></li>
                                    <li class="tier2"><a href="satzung.html">Satzung</a></li>
                                    <li class="tier2"><a href="aufnahmeantrag.html">Aufnahmeantrag</a></li>
                                    <li class="tier2"><a href="mitgliederliste.html">Mitgliederliste</a></li>
                                </ul>
                            </li>

                            <li class="tier1"><a href="index.html">Turniere</a></li>
                            <li class="tier1"><a href="index.html">Mannschaften</a></li>
                            <li class="tier1"><a href="index.html">Kontakt</a>
                                <ul class="dropdown">
                                    <li class="tier2"><a href="kontaktformular.html">Kontaktformular</a></li>
                                    <li class="tier2"><a href="impressum.html">Impressum</a></li>
                                    <li class="tier2"><a href="datenschutz.html">Datenschutzerklärung</a></li>
                                </ul>
                            </li>

                        </ul>
  ...

CSS

@font-face {
            font-family: 'Raleway';
            font-style: normal;
            font-weight: 400;
            src: url(../fonts/Raleway/raleway-v22-latin-regular.eot) format('embedded-opentype'),
                /* IE6-IE8 */
                url(../fonts/Raleway/raleway-v22-latin-regular.woff2) format('woff2'),
                /* Super Modern Browsers */
                url(../fonts/Raleway/raleway-v22-latin-regular.woff) format('woff'),
                /* Modern Browsers */
                url(../fonts/Raleway/raleway-v22-latin-regular.ttf) format('truetype'),
                /* Safari, Android, iOS */
                url(../fonts/Raleway/raleway-v22-latin-regular.svg) format('svg');
            /* Legacy iOS */
        }

        /* raleway-700 - latin */
        @font-face {
            font-family: 'Raleway';
            font-style: normal;
            font-weight: 700;
            src: url(../fonts/Raleway/raleway-v22-latin-700.eot) format('embedded-opentype'),
                /* IE6-IE8 */
                url(../fonts/Raleway/raleway-v22-latin-700.woff2) format('woff2'),
                /* Super Modern Browsers */
                url(../fonts/Raleway/raleway-v22-latin-700.woff) format('woff'),
                /* Modern Browsers */
                url(../fonts/Raleway/raleway-v22-latin-700.ttf) format('truetype'),
                /* Safari, Android, iOS */
                url(../fonts/Raleway/raleway-v22-latin-700.svg) format('svg');
            /* Legacy iOS */
        }

        /* raleway-italic - latin */
        @font-face {
            font-family: 'Raleway';
            font-style: italic;
            font-weight: 400;
            src: url(../fonts/Raleway/raleway-v22-latin-italic.eot) format('embedded-opentype'),
                /* IE6-IE8 */
                url(../fonts/Raleway/raleway-v22-latin-italic.woff2) format('woff2'),
                /* Super Modern Browsers */
                url(../fonts/Raleway/raleway-v22-latin-italic.woff)...