JSFiddle - React, Tailwind, and code Playground

by Filippo Bracci

HTML

<div class="wrapper">

	<nav id="menu">

  <label for="tm" id="toggle-menu">MENU<span class="drop-icon">▾</span></label>

  <input type="checkbox" id="tm">

  <ul class="main-menu cf">
    <li><a href="index.php?option=com_content&view=article&id=1&Itemid=101&lang=it">Il Territorio</a></li>
    <li><a href="index.php?option=com_content&view=article&id=2&Itemid=103&lang=it">I Percorsi<!--<span class="drop-icon">▾</span>--><label title="Toggle Drop-down" class="drop-icon" for="sm0">▾</label></a>
      
      <input type="checkbox" id="sm0">

      <ul class="sub-menu"><!-- dubbio per questo sm2 copiato -->
        <li><a href="index.php?option=com_content&view=article&id=7&Itemid=114&lang=it">Percorsi per mountain bike<!--<span class="drop-icon">▸</span>--><label title="Toggle Drop-down" class="drop-icon" for="sm1">▾</label></a>

          <input type="checkbox" id="sm1">

          <ul class="sub-menu">
            <li class="bkg1mtb"><a href="index.php?option=com_content&view=article&id=215&Itemid=116&lang=it"><img src="images/swmenupro/ico-pmtb1.png"/>Percorso 1</a></li>
			<li class="bkg1mtb"><a href="index.php?option=com_content&view=article&id=216&Itemid=343&lang=it"><img src="images/swmenupro/ico-pmtb1.png"/>Percorso 1 Anello "Gli Orti"</a></li>
			<li class="bkg1mtb"><a href="index.php?option=com_content&view=article&id=217&Itemid=344&lang=it"><img src="images/swmenupro/ico-pmtb1.png"/>Percorso 1 Anello "Gambassi terme"</a></li>
            
            <li class="bkg2mtb"><a href="index.php?option=com_content&view=article&id=214&Itemid=117&lang=it"><img src="images/swmenupro/ico-pmtb2.png"/>Percorso 2</a></li>
            
            <li class="bkg3mtb"><a href="index.php?option=com_content&view=article&id=213&Itemid=118&lang=it"><img src="images/swmenupro/ico-pmtb3.png"/>Percorso 3</a></li>
            
            <li class="bkg4mtb"><a href="index.php?option=com_content&view=article&id=210&Itemid=119&lang=it"><img...

CSS

.cf:after {
  content: "";
  display: table;
  clear: both;
}


.wrapper {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}



#menu ul {
  margin: 0;
  padding: 0;

}

#menu .main-menu {
  display: none;
}

#tm:checked + .main-menu {
  display: block;
}

#menu input[type="checkbox"], 
#menu ul span.drop-icon {
  display: none;
}

#menu li, 
#toggle-menu, 
#menu .sub-menu {
	/*border:1px solid #FF3; si può omettere */
  /*border-style: solid;
  border-color: rgba(0, 0, 0, .05);
  font-family: Arial, Helvetica, sans-serif;*/
}



#menu li, 
#toggle-menu {
  border-width: 0 0 1px;
}

#menu .sub-menu {
  /*background-color: #369;*/
  border-width: 1px 1px 0;
  /*margin: 0 1em; Elimino lo spazio a sx e dx nel sottomenu in mod responsive*/
  white-space: nowrap;
}

#menu .sub-menu li:last-child {
  border-width: 0;
}

#menu li, 
#toggle-menu, 
#menu a {
  position: relative;
  display: block;
  color: white;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .125);
  text-decoration:none;
}

/* Sfondo del menu principale  e dei sub menu in modalità responsive */
#menu {
  background: url("images/bkg-1px70blk.png");
  /* height:80px;*/
}

/* parametri del menu in resposive mode */
#toggle-menu {
	font:normal normal 1.3em "Open Sans Condensed", sans-serif;
	color:white;
	padding-top:20px;
	padding-bottom:20px;
}
#toggle-menu a{
	color:white;
	text-decoration:none;
}
#toggle-menu a:hover{
	color:white;
	text-decoration:underline;
}



#toggle-menu, 
#menu a {
  /*padding: 1em 1.5em;*/
}


/********************************************** Menu TOP */
ul.main-menu li a {
  /*padding: 1em 1.5em;*/
    padding: 20px 0px 10px 0px;
	height:35px;
	font:normal normal 1.2em "Open Sans Condensed", sans-serif;
	text-transform:uppercase;
}




ul.sub-menu li a{
  /*padding: 1em 1.5em;*/
    padding: 10px 20px 10px 10px;
	font:normal normal 1.0em "Open Sans Condensed", sans-serif;
	text-transform:none;
	text-align:left;
	height:25px;
}


ul.sub-menu li...