JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <header id="header">
        <div class="inside">
            <div class="event_header">
<a class="logo" href="http://www.Default.de/" target="_top"><img src="/tl_files/Default/layout/Default_white.png" alt=""></a>

                <div id="nav" class="top_event_nav">
                    <ul>
                        <li><a href="#Home">Home</a>
                        </li>
                        <li><a href="#Agenda">Agenda</a>
                        </li>
                        <li><a href="#Speaker">Speakers</a>
                        </li>
                        <li><a href="#Hotel">Hotel</a>
                        </li>
                        <li><a href="#Register">Register</a>
                        </li>
                    </ul>
                </div>
                <div class="mini_nav">
<a onClick="ShowDIV();"></a> 
                </div>
            </div>
        </div>
    </header>
    <div class="custom">
        <div id="stage">
            <div class="inside">
                <!-- mod_article_event -->
                <div class=" articleEven">
                    <div class="mod_article article_big_event block" id="stage-4630">
                        <div class="ce_image block" id="Home">
                            <figure class="image_container">
                                <img src="tl_files/media/images/events/big_event/big_event.jpg" alt="">
                            </figure>
                        </div>
                        <div class="ce_text img_info block">
                            <div class="center">
                                
<h1>Titel</h1>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="container">
        <div id="main">
            <div class="inside">
                <!-- mod_article_event -->
                <div class=" articleFirst articleOdd">
   ...

CSS

@media screen {
    /* Contao Open Source CMS :: Copyright (C) 2005-2012 Leo Feyer :: LGPL license */
    body {
        margin:0;
        padding:0;
        font-size:100.01%;
        text-align:left;
        position:relative
    }
    select, input, textarea {
        font-size:99%
    }
    form {
        margin:0;
        padding:0
    }
    img {
        border:0
    }
    #left {
        float:left
    }
    #right {
        float:right
    }
    #main {
        width:auto;
        position:relative
    }
    .inside {
        position:relative;
        text-align:left
    }
    .block {
        overflow:hidden
    }
    .clear, #clear {
        height:0.1px;
        font-size:0.1px;
        line-height:0.1px;
        clear:both
    }
    .invisible {
        width:0;
        height:0;
        left:-1000px;
        top:-1000px;
        position:absolute;
        overflow:hidden;
        display:inline
    }
    .custom {
        display:block;
        text-align:left
    }
    .custom:after {
        content:".";
        display:block;
        height:0;
        clear:both;
        visibility:hidden
    }
    *+html #main {
        position:static
    }
    header, footer, nav, section, aside, article, figure, figcaption {
        display:block
    }
}
@media all {
    /* mediaboxAdvanced - black theme */
    #mbOverlay {
        position:fixed;
        z-index:9998;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background-color:#000;
        cursor:pointer
    }
    #mbOverlay.mbOverlayFF {
        background:transparent url("../../plugins/mediabox/1.4.6/images/80.png") repeat
    }
    #mbOverlay.mbOverlayIE {
        position:absolute
    }
    #mbCenter {
        position:absolute;
        z-index:9999;
        left:50%;
        overflow:hidden;
        background-color:#000;
        -webkit-border-radius:10px;
        -khtml-border-radius:10px;
        -moz-border-radius:10px;
        border-radius:10px;
       ...

JavaScript

/*
---

name: NavSimple
script: NavSimple.js
description: A MooTools class for handling navigation on long, single-page sites.

requires:
- Core/Class.Extras
- Core/Element.Event
- Core/Element.Dimensions
- More/Fx.Scroll
- More/Keyboard
- More/Fx.Scroll
- More/Events.Pseudos

provides: [NavSimple]

authors:
- Ian Collins

...
*/

Fx.implement(Events.prototype);

var NavSimple = new Class({

    Implements: [Options, Events],

    options: {
        active: true,
        scrollElement: window,
        sections: 'header,section,footer',
        initialSection: 0,
        keyboardNav: true,
        keyboardNavEsc: true,
        keyboardNavSpace: true,
        keyboardNavNumbers: true,
        doInitialScroll: false,
        markReadDelay: 5000,
        scrollThrottle: 100,
        activeSectionLinkClass: 'active',
        activeSectionClass: 'active',
        readClass: 'done',
        foldRatio: 0.6,
        offset: {
            x: 0,
            y: -100
        },
        hashPathOnLoad: false,
        hashPathRegex: /^#[\w-]+$/,
        hashLoadDelay: 100,
        findSectionIndexFromHash: function (hash, ns) {
            for (var i = 0; i < ns.sections.length; i++) {
                if (hash.replace('#', '') == ns.sections[i].get('id')) return i;
            }
            return 0;
        }
    },

    initialize: function (options) {
        this.setOptions(options);

        this.element = document.id(this.options.scrollElement);
        this.sections = $$(this.options.sections);
        this.sectionLinks = $$(this.options.sectionLinks);

        this.window_scroll = new Fx.Scroll(this.element, {
            offset: this.options.offset
        });

        this.setHeights();

        this.currentSection = this.options.initialSection;
        if (this.options.active && this.options.doInitialScroll) this.toSection(this.currentSection);

        if (this.options.active) this.activate();

        if (this.options.hashPathOnLoad) this.detectHashPath();

       ...