JSFiddle - React, Tailwind, and code Playground

by jojoroxursox

HTML

<!DOCTYPE html> 
<!--[if IE 6]>
<html id="ie6" dir="ltr" lang="en-US">
<![endif]--> 
<!--[if IE 7]>
<html id="ie7" dir="ltr" lang="en-US">
<![endif]--> 
<!--[if IE 8]>
<html id="ie8" dir="ltr" lang="en-US">
<![endif]--> 
<!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!--> 
<html dir="ltr" lang="en-US"> 
<!--<![endif]--> 
<head> 
<meta charset="UTF-8" /> 
<meta name="viewport" content="width=device-width" /> 
<title>Media | Aktuell Produktion</title> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <title>Bokono</title> 
 
 
    <link href="http://www.konstructive.com/projects/aktuellproduktion/wp-content/themes/AktuellProduktion/style.css" rel="stylesheet" type="text/css" /> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" charset="UFT-8" type="text/javascript"></script> 
    <script src="http://www.konstructive.com/projects/aktuellproduktion/wp-content/themes/AktuellProduktion/js/ap.js"  type="text/javascript"></script> 
    <script src="http://www.konstructive.com/projects/aktuellproduktion/wp-content/themes/AktuellProduktion/js/cufon-yui.js"  type="text/javascript"></script>    
    <script src="http://www.konstructive.com/projects/aktuellproduktion/wp-content/themes/AktuellProduktion/js/font.js"  type="text/javascript"></script>        
    <!--  Slider   --> 
    <script language="javascript" type="text/javascript" src="http://www.konstructive.com/projects/aktuellproduktion/wp-content/themes/AktuellProduktion/js/jquery.easing.js"></script> 
    <script language="javascript" type="text/javascript" src="http://www.konstructive.com/projects/aktuellproduktion/wp-content/themes/AktuellProduktion/js/script.js"></script> 
    <link href="http://www.konstructive.com/projects/aktuellproduktion/wp-content/themes/AktuellProduktion/css/slide-style.css" rel="stylesheet" type="text/css" /> 
    <link rel="alternate" type="application/rss+xml" title="Aktuell Produktion &raquo; Media Comments Feed"...

CSS

@charset "utf-8";
/*
Theme Name: Aktuell Produktion
Description: Variable grid layout, easing effect on window resizing.
Version: 0.01
Author: Konstructive Media
Author URI: http://www.konstructive.com


Index:
  - Basic Elements
  - Basic Styling
  - Layout
  - Grid Items, Single Item and Comments
  - Navigation and Sidebar Widget
  - Form Elements

*/
/*---------- HTML ------- */

*{margin:0px; padding:0px; font-family: Helvetica Neue, Verdana, Arial;}
body{
    background:#ebe9e7;    
}
a {text-decoration: none; color: inherit;}
a:hover {color: white;}
h1 { color: white; margin: 20px 0px 20px 0px;}
img {border: none;}
/*---------- General Display ------- */
.wrapbox { margin:0 auto; width:1000px; display: block;}
.twocol { width: 500px; float: left; display: block; }
.whitebox { background: #f4f4f4; border: 1px solid #d9d7d5; float: left; min-width: 480px;}
.ndlevhed { color: #414d56;}
/*---------- Top-Menu ------- */
#top {background: #e1dfde; border: 1px solid #cfcece; height: 100px; }
#top_logo { float: left; margin: 40px 0px 0px 10px;}
.main_menu {list-style: none; float: left;padding:20px; margin: 42px 0px 0px 0px;}
.main_menu ul li.page_item {float:left; display: block;  color: black;}
.main_menu ul li.page_item  a {padding: 20px; color: black;}
.main_menu ul li.page_item  a:hover { background:#4aaff5; color: white;}
.main_menu ul li.current_page_item { background:#4aaff5; color: white; padding: 20px; float: left; margin-top: -20px; }
/*---------- footer ------- */
#footer { float: left; background: #414d56; color:white;  margin-top: 50px; border: 1px solid #2a3237; font: 10px/1.2em Helvetica Neue; height: 100px; width: 1000px; display:block;  }
#footer_info { font: 10px/1.2em Helvetica Neue; width: 180px; float: left; }
#footer_list { }
#footer_list li { padding: 20px 40px;  border-right: 1px solid #4f5e69;list-style: none; float: left; height: 50px; }
#footer_list li: after { border-right: 1px solid #3b454d; position: absolute; right: -1;...