JSFiddle - React, Tailwind, and code Playground

HTML

<div id="interface">
    <header id="cabecalho">
 
        <nav id="menu">
 
            <div class="container" id="main" role="main">
 
            <ul class="menu">
                <li><a href="#">Home</a></li>
                <li><a href="#s1">Menu 1</a>
                    <ul class="submenu">
                        <li><a href="#">Submenu a</a></li>
                        <li><a href="#">Submenu b</a></li>
                        <li><a href="#">Submenu c</a></li>
                        <li><a href="#">Submenu d</a></li>
                        <li><a href="#">Submenu e</a></li>
                        <li><a href="#">Submenu f</a></li>
                        <li><a href="#">Submenu g</a></li>
                        <li><a href="#">Submenu h</a></li>
                    </ul>
                </li>
                <li class="active"><a href="#s2">Menu 2</a>
                    <ul class="submenu">
                    <li><a href="#">Submenu f</a></li><li><a href="#">Submenu f</a></li><li><a href="#">Submenu f</a></li><li><a href="#">Submenu f</a></li>
                    </ul>
                </li>
                <li><a href="#">Menu 3</a>
                     <li><a href="#">Submenu f</a></li><li><a href="#">Submenu f</a></li><li><a href="#">Submenu f</a></li><li><a href="#">Submenu f</a></li>
                </li>
                <li><a href="#">Menu 4</a></li>
</div>
 </nav>
 
    </header>
    <section id="corpo">
        <article id="noticia-principal">
            <header id="cabecalho-noticia">
                <hgroup>
                    <h3 class="direita"</h3>
                </hgroup>
 
            </header>
            <h2>Conheça Nossa Clinica!</h2>
            <p>
               TEXTO CONTENDO:
                ORIGEM DA CLINICA, EQUIPE,MISSÃO
            </p>
 
         
                <div class="caixa">
                    <div id="caixa-slider">
                        <div id="slider">
                            <div id="mascara">
  ...

CSS

{
    margin: 0;
    padding: 0;
 
 
}
html
 
 {
    background-color: #000;
}
 
.container {
  
   margin: 30px auto;
    width: 90%;
}
 
 
/* general styles */
 
.menu, 
.menu ul
 {
    list-style: none;
    padding: 0;
    margin: 0;
}
 
.menu {
    height: 28px;
}
 
.menu li
 {
  background: -moz-linear-gradient(#292929, #252525);
 
    background: -ms-linear-gradient(#292929, #252525);
   
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #252525));
    
    background: -webkit-linear-gradient(#292929, #252525);
 
    background: -o-linear-gradient(#292929, #252525);
    
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525');
   
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525')";
    
    background: linear-gradient(#292929, #252525);
 
  
   border-bottom: 2px solid #181818;
    
   border-top: 2px solid #303030;
  
   min-width: 50px;
}
 
   .menu > li {
 
    display: block;
     
   float: left;
    
  position: relative;
 
}
.menu > li:first-child {
   
  border-radius: 5px 0 0;
}
 
.menu a {
 
    border
 
    -left: 3px solid rgba(0, 0, 0, 0);
   
    color: #808080;
    
    display: block;
      
    font-family: 'Lucida Console';
 
    font-size: 18px;
   
    line-height: 27px;
  
    padding: 0 25px;
       
    text-decoration: none;
    
    text-transform: uppercase;
}
 
 
/* onhover styles */
 
.menu li:hover
 {
    background-color: #1c1c1c;
  
   background: -moz-linear-gradient(#1c1c1c, #1b1b1b);
  
   background: -ms-linear-gradient(#1c1c1c, #1b1b1b);
   
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1c1c1c), color-stop(100%, #1b1b1b));
  
   background: -webkit-linear-gradient(#1c1c1c, #1b1b1b);
 
   background: -o-linear-gradient(#1c1c1c, #1b1b1b);
  
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c',...