JSFiddle - React, Tailwind, and code Playground

by reporter

HTML

<html><head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="robots" content="INDEX,FOLLOW">
<meta name="keywords" content="Rock,hardrock,austropop,austrorock,dialektmusik,dialekt,mundart,austro,musik,oesterreich">
<meta name="description" content="RIBISLS - Dialektmusik die Rockt">
<title>ROCK DER EXTRAKLASSE - RIBISLS</title>
<link rel="stylesheet" href="http:/www.ctdr.bplaced.net/fenster.css" type="text/css">
<link rel="stylesheet" href="http:/www.ctdr.bplaced.net/format.css" type="text/css">
<link rel="stylesheet" href="http:/www.ctdr.bplaced.net/menue.css" type="text/css">

<script type="text/javascript">
var wo = 0;
function oeffnefenster(w)
{
    document.getElementById('weisseflaeche').style.display = 'block';
    document.getElementById('pfeillinks').style.display = 'block';
    document.getElementById('pfeilrechts').style.display = 'block';
    document.getElementById('xbutton').style.display = 'block';
    wo = w;
    closePictures();
    switch (w)
    {
        case 10:
            document.getElementById('bild1').style.display = 'block';
            break;
        case 11:
            document.getElementById('bild2').style.display = 'block';
            break;
        case 12:
            document.getElementById('bild3').style.display = 'block';
            break;
        case 13:
            document.getElementById('bild4').style.display = 'block';
            break;
        case 14:
            document.getElementById('bild5').style.display = 'block';
            break;
        case 20:
            document.getElementById('fst1').style.display = 'block';
            break;
        case 21:
            document.getElementById('fst2').style.display = 'block';
            break;
        case 22:
            document.getElementById('fst3').style.display = 'block';
            break;
        case 23:
            document.getElementById('fst4').style.display = 'block';
            break;
        case 24:
           ...

CSS

#weisseflaeche {
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    position:fixed;
   display:none;
    background-color:black;
    opacity:1;
    filter:alpha(opacity=100);
}

#xbutton {
    width:50px;
    height:700px;
    position:absolute;
    top:390px;
    left:28%;
    background: url(http://www.ctdr.bplaced.net/images/xbutton.png) no-repeat;
   display:none;
}

.bildzoom {
    width:700px;
    border:5px solid white;
    position:absolute;
    top:430px;
    left:15%;
    background:black;
    display:none;
}

#pfeillinks {
    width:30px;
    height:30px;
    position:absolute;
    top:390px;
    left:45%;
    background:url(http://www.ctdr.bplaced.net/images/pfeillinks.png) no-repeat;
    display:none;
}

#pfeilrechts {
    width:30px;
    height:30px;
    position:absolute;
    top:390px;
    left:55%;
    background:url(http://www.ctdr.bplaced.net/images/pfeilrechts.png) no-repeat;
    display:none;
}







/* === ALLGEMEIN=== */

body
{margin-top: 0px;  margin-left: 0px; margin-right: 0px;margin-bottom: 0px; background-color: #000; padding:0px;
width:100%;
}

body {
font-size: 13pt;line-height: 16pt;
font-family: arial, helvetica, tahoma ,verdana, sans-serif;
color:#fff }



/* farbige scrolleiste internet explorer ab vers.5.5 */

body
{scrollbar-arrow-color: #fff; scrollbar-base-color: #2F2F2F;
scrollbar-highlight-color : #AFAFAF; scrollbar-shadow-color : #AFAFAF;
SCROLLBAR-TRACK-COLOR:#000000;}

h2{  font-family: arial;font-style:regular ;color:#fff;
margin-bottom:10px;letter-spacing:0px;font-size:15px;
border-bottom:solid 0px #746b64;
padding-bottom:4px
}

#aussen{  width:100%;
background-image:url(lay.jpg);background-repeat:repeat;
background-position:center top; background-color:#
}


/* ======================================== */

/* === KOPF === */


#top1 {
height:90px;
vertical-align:middle;
text-align:center;
padding-right:56px;
color:#fff;
font-size:14px;
font-family: "Trebuchet MS",arial, helvetica, verdana, tahoma,...