JSFiddle - React, Tailwind, and code Playground

by Bright RYMER

HTML

<script src="http://fonts.googleapis.com/css?family=Roboto+Condensed:300"></script>
<script src="http://fonts.googleapis.com/css?family=Alegreya:400italic,700italic,400,700"></script>
<script src="http://fonts.googleapis.com/css?family=Alegreya+Sans:400,700,400italic,700italic"></script>
<div class="speisekarte-background"></div>
<div class="speisekarte">
    <div class="speisekarte-header">
        <div class="speisekarte-date">Sonntag, 22.03.2015</div>
         <h1>SPEISEZETTEL</h1>

    </div>
    <div class="speisekarte-content">
        <!-- INCLUDE WITH PHP -->
        <?php include( 'editable/speisekarte-content.php'); ?>
         <h2 class="speisekarte-section-heading">Mittagsspeisen</h2>

        <div class="speisekarte-row">
            <div class="gericht-content">
                 <h3 class="gericht-heading">Der fr&uuml;he Vogel</h3>

                <p class="gericht-description">Su&#776;sses Teilchen, Marmelade, Butter, kleines Bircher Mu&#776;sli</p>
            </div>
            <div class="gericht-preis">9,80 &euro;</div>
        </div>
        <div class="speisekarte-row">
            <div class="gericht-content">
                 <h3 class="gericht-heading">Schw&auml;bisches Fr&uuml;hst&uuml;ck</h3>

                <p class="gericht-description">Ellwanger Schlossschinken, Landj&auml;ger, Fleischk&auml;se, Bio-Dorfk&auml;se,
                    <br />2 hausgemachte Aufstriche, Obst, Butter und Brotk&ouml;rbchen</p>
            </div>
            <div class="gericht-preis">9,80 &euro;</div>
        </div>
        <div class="speisekarte-row">
            <div class="gericht-content">
                 <h3 class="gericht-heading">Lina's Fr&uuml;hst&uuml;ck</h3>

                <p class="gericht-description">Ellwanger Schlossschinken, Salami, Bio-Dorfk&auml;se, kleines Bircher Mu&#776;sli,
                    <br />Obst, Marmelade, ein Aufstrich, Butter und Brotk&ouml;rbchen</p>
            </div>
            <div class="gericht-preis">9,80...

CSS

h1 {
    font-family:'Roboto Condensed', 'Oswald', Impact, sans-serif;
    font-size:25px;
    line-height:44px;
    font-weight:300;
    letter-spacing:10px;
}
p {
    font-family:'Alegreya', serif;
    font-weight: 400;
    font-size:20px;
    line-height:35px;
    margin-top: 10px;
}
/* This is for the greyish background */
 .speisekarte-background {
    height: 100%;
    width: 100%;
    position: fixed;
    opacity: 0.7;
    background: #000000;
    display: block;
    top: 0;
    z-index: 100000000;
}
/* This is for the visible white container */
 .speisekarte {
    top: 0;
    margin: 5% 10%;
    background-color: white;
    min-height: 30px;
    max-height: 80%;
    width: 80%;
    z-index: 10000000000000000;
    opacity: 1;
    position: fixed;
    display: block;
    box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.50);
    border-radius: 5px;
    overflow-x: hidden;
    overflow-y: scroll;
}
/* This is for the red area in the top */
 .speisekarte-header {
    background-color: #9D0C15;
    padding: 70px 10px;
    width: 100%;
    color: white !important;
    text-align: center;
}
/* This is for the white box, containing the date in the top of the red header */
 .speisekarte-date {
    font-family:'Alegreya Sans', sans-serif;
    background-color: white;
    color: #9D0C15;
    display: inline-block;
    position: absolute;
    top: 0px;
    margin-left: -80px;
    padding: 10px 20px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.speisekarte-content {
    padding: 0 50px 50px 50px;
    background-color: white;
}
/* This is for the headings of different sections in the menu card */
 .speisekarte-section-heading {
    font-family:'Alegreya', serif;
    font-weight: 700;
    font-size: 25px;
    color: #9D0C15;
    line-height: 40px;
    margin-top: 40px;
}
/* This is one row for one dish in the menu card */
 .speisekarte-row {
    position: relative;
    margin-top: 30px;
}
.speisekarte-row:first-child {
    margin-top: 20px...