JSFiddle - React, Tailwind, and code Playground

by Mawel Don

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<nav id="main-menu" role="navigation">
  <ul class="menu">
      <li class="menu-item home">
          <a href="/"><i class="fa fa-home"></i></a>
      </li>
      <li class="menu-item spe">
          <a class="linkSubMenu" href="#">Top destinations</a>
          <div class="subMenu">
              <div class="subMenuRow">
                  <div class="subMenuCol">
                      <label><a href="/voyage/ameriques/">Amérique</a></label>
                  </div>
                  <div class="subMenuCol">
                      <label><a href="/voyage/europe/">Europe</a></label>
                  </div>
                  <div class="subMenuCol">
                      <label><a href="/voyage/afrique/">Afrique</a></label>
                  </div>
                  <div class="subMenuCol">
                      <label><a href="/voyage/asie/">Asie</a></label>
                  </div>
                  <div class="subMenuCol">
                      <label><a href="/voyage/oceanie/">Océanie</a></label>
                  </div>
              </div>
              <div class="subMenuRow2">
                  <div class="subMenuCol">
                      <ul>
                          <li><a href="/voyage/ameriques/etats-unis/">Etats Unis</a></li>
                          <li><a href="/voyage/ameriques/canada/">Canada</a></li>
                          <li><a href="/voyage/ameriques/mexique/">Mexique</a></li>
                          <li><a href="/voyage/ameriques/bresil/">Brésil</a></li>
                          <li><a href="/voyage/ameriques/republique-dominicaine/">République Dominicaine</a></li>
                          <li><a href="/voyage/ameriques/cuba/">Cuba</a></li>
                          <li><a href="/voyage/ameriques/bahamas/">Bahamas</a></li>
                          <li><a href="/voyage/ameriques/perou/">Pérou</a></li>
                         ...

CSS

/* Reset CSS*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* Starting */
#main-menu{
    display:table;
    border-collapse:separate;
    border-spacing:2px;
    margin:0;
    padding:0;
    width:100%;
    color: white;
}
#main-menu .menu{
	display:table-row;
}
#main-menu .home > a{
    font-size: 21px;
}
#main-menu .menu > li{
    display:table-cell;
    text-align:center;
    position:relative;
    list-style:none;
    text-transform:uppercase;
    font-size:12px;
    line-height:30px;
}
#main-menu .menu > li{
    background: #ff9c00;
    background: -moz-linear-gradient(-45deg, #ff9c00 0%, #ef7f09 35%);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#ff9c00), color-stop(35%,#ef7f09));
    background: -webkit-linear-gradient(-45deg, #ff9c00 0%,#ef7f09 35%);
    background: -o-linear-gradient(-45deg, #ff9c00 0%,#ef7f09 35%);
    background: -ms-linear-gradient(-45deg, #ff9c00 0%,#ef7f09 35%);
    background: linear-gradient(135deg, #ff9c00 0%,#ef7f09 35%);
...

JavaScript

$('.spe').click(function(){
	$('.subMenu').fadeToggle(350);
});