JSFiddle - React, Tailwind, and code Playground

by basti1012

HTML

<html id="basti1012" lang="de-DE" dir="LTR" class="">
<head>
<meta name="keywords" content="scripte basti1012 pennerhack pennerhackisback userscripte">
<meta name="DC.Description" content="ales &uuml;ber mich und scripte">
<meta name="description" content="alles  ber mich und scripte">
<meta name="keywords" content="pennergame ,pennerhack,pennerhackisback,basti1012,sebastian1012,javascript ,userscripte">
<meta name="title" content="basti1012">
<meta name="language" content="German, de, deutsch">
<meta name="author" content="basti1012">
<meta name="publisher" content="sebastian k&ouml;ster">
<meta name="revisit-after" content="after 20 days">
<meta name="date" content="2018-01-10">

<meta name="page-topic" content="scripte">
<meta name="page-type" content="blog">
<meta name="audience" content="alle">
<meta charset="utf-8">
<meta name="robots" content="index,follow">
<meta name="generator" content="http://sebastian1012.bplaced.net/">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">


<link id="" rel="stylesheet" type="text/css" href="http://sebastian1012.bplaced.net/topmenu.css">

<link id="" rel="stylesheet" type="text/css" href="http://sebastian1012.bplaced.net/erstescss.css">
<!-- CSS_ADSBLOCK_START -->
<link rel="stylesheet" href="http://adblockers.opera-mini.net/css_block/default-domainless.css" type="text/css" />

<link id="" rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- CSS_ADSBLOCK_START -->


<!-- CSS_ADSBLOCK_END -->
<title>Basti1012 ,Scripte,Userscripte und vieles mehr</title>
</head>
<body>
 








 







<header id="kopf">
      <ul id="nav">
            <li><a>Home</a>
                <ul>
 
                    <li><a href="index.html">Home</a></li>
                <li><a id="reghex">Rgb to Hex</a></li>
            ...

CSS

#nav{
  display:block;
}
#nav,#nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#nav {
  position:absolute;
  top:0px;
  z-index:999;
    font-family: "Lucida Sans Unicode",Verdana,Arial,sans-serif;
    font-size:120%;
    height: 36px;
  
    text-shadow: 0 -1px 3px #202020;
    width:100vw;
 
    /* border radius */
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;

    /* box shadow */
    -moz-box-shadow: 0px 3px 3px #cecece;
    -webkit-box-shadow: 0px 3px 3px #cecece;
    box-shadow: 0 3px 4px #8b8b8b;

    /* gradient */
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
    background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
    background-color: #5f5f5f;
}
#nav li {
    border-bottom: 1px solid #575757;
    border-left: 1px solid #929292;
    border-right: 1px solid #5d5d5d;
    border-top: 1px solid #797979;
    display: block;
    float: left;
    height: 34px;
    position: relative;
    width:19.9vw;
}
#nav > li:first-child {
    border-left: 0 none;
    margin-left: 5px;
}
#nav ul {
    left: -9999px;
    position: absolute;
    top: -9999px;
    z-index: 2;
}
#nav ul li {
    background: none repeat scroll 0 0 #838383;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    width: 100%;
}
#nav li a {
    color: #FFFFFF;
    display: block;
    line-height: 34px;
    outline: medium none;
    text-align: center;
    text-decoration: none;

    /* gradient */
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
    background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
    background-color: #5f5f5f;
}

/* keyframes #animation */
@-webkit-keyframes...

JavaScript

/////    LINKS    KLICKS   ////////



$('#scriptlink1').click(function(){
 $('#test1').css("display","block")
   $('#mittebauch').html('<iframe class="frame" width="100%" height="100%" src="https://jsfiddle.net/basti1012/tofyr8kr/embedded/result,js,html,css/?disableModals"></iframe>')
 $('.scriptuberschrift').html('<h3>Basti1012 Ãœberschrift</h3>')
 
  $('.tool').html('Hier erfahr ihr wie die Regenbogenfarbe in meiner Basti1012 Ãœberschrift entsteht')
 })
  
  $('#scriptlink2').click(function(){
 $('#test1').css("display","block")
   $('#mittebauch').html('<iframe class="frame" width="100%" height="100%" src="https://jsfiddle.net/basti1012/jpqbu8jr/embedded/result,js,html,css/?disableModals"></iframe>')
   
   
 $('.scriptuberschrift').html('<h3>Footer Laufbild</h3>')
 
  $('.tool').html('Das Script läst ein Bild in dauer Schleife von rechts nach Links durchlaufen.So entsteht der Effekt eines Endlos Bildes')
 })
 
   $('#scriptlink3').click(function(){
 $('#test1').css("display","block")
   $('#mittebauch').html('<iframe class="frame" width="100%" height="100%" src="https://jsfiddle.net/basti1012/1f1mv2oq/embedded/result,js,html,css/?disableModals"></iframe>')
   
   
  $('.scriptuberschrift').html('<h3>Top Menü</h3>')
 
  $('.tool').html('Dieses Script  zeigt ,wie man mit Css ein schönes Top Menü erstellen kann.Dieses Script wird erst nach einer bestimmten Scollhöhe angezeigt')
 })
 
    $('#scriptlink4').click(function(){
 $('#test1').css("display","block")
   $('#mittebauch').html('<iframe class="frame" width="100%" height="100%" src="https://jsfiddle.net/basti1012/zc9d5tvh/embedded/result,js,html,css/?disableModals"></iframe>')
   
   
 $('.scriptuberschrift').html('<h3>Bahnhofs Uhr</h3>')
 
  $('.tool').html('Eine Uhr die mit  Canvas geschrieben wurde')
 })
 
 
    $('#scriptlink5').click(function(){
 $('#test1').css("display","block")
   $('#mittebauch').html('<iframe class="frame" width="100%" height="100%"...