JSFiddle - React, Tailwind, and code Playground

by Filippo Bracci

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta id="viewport" name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">

<title> responsive multi level </title>

<!--[if lt IE 9]>

<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>

<![endif]-->




<style>

/* The wrapper div should be wrapped around the page content and be at least 100% page height for the iPad, iPhone and iPod Touch */

html, body {padding:0; margin:0; background:#bbb; overflow-x:hidden;}

.wrapper {height:100%; left:0; top:0; position:relative; min-width:320px; background:#f8f8f8;

-webkit-transition: 0.5s;

-o-transition:  0.5s;

-moz-transition:  0.5s;

transition:  0.5s;

}

.content {width:80%; margin:0 auto; background:#f8f8f8; padding:50px 10px}

.content img.banner {width:100%;}

.logo {padding:20px 0;; width:230px;}

.logo img {display:block; float:left; padding-right:10px;}

.logo h1 {color:#000; padding:0; margin:0; font:bold 40px/62px 'times new roman', serif;}

.logo h1 span {font-weight:normal; color:#666;}



.content p {padding:0; margin:0; font:normal 15px/25px 'texgyreadventorregular', arial, sans-serif; color:#333;}

.content h3 {padding:50px 0 0 0; margin:0; font:normal 25px/40px 'texgyreadventorregular', arial, sans-serif; color:#151;}

.content ol li {padding:0; margin:0; font:normal 14px/22px 'texgyreadventorregular', arial, sans-serif; color:#333;}

.content ol li a {color:#069;}



@media only screen and (max-width: 1024px) {

.content {width:95%; max-width:auto;}

}



</style>

<link rel="stylesheet" href="http://www.visitmontaione.com/xjibike/templates/template_ibikemontaione/stile.css" type="text/css" charset="utf-8" />



<script...

CSS

/* CSS Document */

/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/cssplay-responsive-multi-level-two.html
Copyright (c) Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

/*  Pulsante per far apparire il menu */
.trigger {width:40px; height:40px; position:fixed; left:0; top:5px; background:#444; color:#fff; border-radius:0 5px 5px 0;
-webkit-transition: 0.5s;
-o-transition:  0.5s;
-moz-transition:  0.5s;
transition:  0.5s;
}
.trigger label {display:block; width:40px; height:40px; position:absolute; left:0; top:0; background:url(menu-icon.png) no-repeat center center; cursor:pointer;} 
.trigger label span {position:absolute; left:-9999px;}




input.submenus,
input#toggle {position:absolute; display:none;}



.menuHolder {width:100%; position:fixed; right:0; top:0; background:#444; z-index:400;}
.menu {
float:right; 
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
-ms-touch-action: none;
}





.menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left;}

.menu li {display:block; position:relative;}

.menu ul ul {position:absolute; left:-9999px; top:50px; padding:10px 0; z-index:0; /*border-radius:0 0 5px 5px;*/
-webkit-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
transition: opacity 0.5s;
}

/*.menu ul ul ul {left:100%; top:auto; margin-top:-35px; border-radius:5px;}*/
.menu ul li.left > ul {left:auto; right:0; top:50px;}
.menu ul li.left ul li > ul {left:auto; right:100%; top:auto; margin-top:-35px;}

.menu > ul {margin:0 auto;}
.menu > ul > li {float:left; position:relative;}

.menu ul...