JSFiddle - React, Tailwind, and code Playground

by basti1012

HTML

<!DOCTYPE html>

<html lang="de">
    
    
    <head>
        <!--Zeichensatz definieren-->
        <meta charset="UTF-8">
        
        <!--Anwendung auch auf kleinen Bildschirmen-->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        
        <!--Einträge für Suchmaschinen -->
        <title>Ein Stern - Ein Berg</title>
        <meta name="content-language" content="de" /> 
        <meta name="author" content="Konrad Sternberg " /> 
        <meta name="publisher" content="Konrad Sternberg " /> 
        <meta name="copyright" content="Konrad Sternberg " />
        <meta name="keywords" content="Konrad Sternberg, Ein Stern - Ein Berg, einsterneinberg" /> 
        <meta name="description" content="Internetauftritt von einsterneinberg.de" /> 
        <meta name="page-topic" content=" " /> 
        <meta name="page-type" content=" " /> 
        <meta name="language" content="Deutsch" /> 
        <meta name="revisit" content="After 30 days" /> 
        <meta name="robots" content="INDEX,FOLLOW" />
        
        <!--Definition der Schriftfonts von Google Fonts!!        -->
        <link href="https://fonts.googleapis.com/css?family=Roboto|Waiting+for+the+Sunrise" rel="stylesheet">
        
        <!-- Definition des flavicons-->
        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
        <link rel="manifest" href="/manifest.json">
        <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
        <meta name="theme-color" content="#ffffff">
        
        <!-- Start Definition der CSS Datei-->
        <link rel="stylesheet" href="design-v4.css" type="text/css" />
        
        <link rel="stylesheet" href="colorbox.css" />
		<script...

CSS

/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
/* Universalselektoren setzten, um alle Browser auf "Null" zu setzten*/
* {
    margin: 0;
    padding: 0;
}

/* Fuer alte Browser */
header, nav, footer, article, aside {
    display: block;
}

/* Definition des kompletten Bildschirmes*/
html, body {
    background-image: url(bilder/Rund.jpg);
    background-attachment: fixed;
    background-size: cover;
    font-family: 'Roboto', sans-serif;
    height: 100%;
    text-align: center; /* wegen alter IE-Versionen */
}

/*Definition der Aktion bei verkleinertem Bildschirm HIER bis 40em 
- Menuebutton anstatt Menüleiste + grau hinterlegt
- Größe und Position Überschrift verändert sich
- Schriftgrößen werden kleiner
*/
@media only screen and (max-width: 45em) {
    body, article {
        width: 100%;
    }
    
    article h1 {
        font-size: 1.5em
    }
    
    article h2 {
        font-size: 1.2em
    }
    
    article p {
        font-size: 0.9em
    }
    
    #mobilanzeige {
        position: absolute;
        left: -15em;
        width: 40em;
    }
                              
    header {
        height: 12em;
    }
    #ueberschrift p {
        padding: 0.3em 0.1em 0.1em 2.8em;
        font-size: 4em;
    }
 /* CSS erweitern um Menu Button  */
    nav {
        display: none;
    }
    .menue-button {
        width: 45em;
        display: block;
        background-color: gray;
        color: white;
        position: absolute;
        left: em;
        top: 0;
        cursor: pointer;
        text-decoration: none;
        }
    
    .menue-button:hover {
            font-weight: bold;
            background-image: url(bilder/dreieck1.png);
            background-repeat: no-repeat;
            background-position: left center;
            text-transform: uppercase;
            animation-name: steuerung-animation;
            animation-duration: 2s;
    }
    
    #steuerung p {
 ...