JSFiddle - React, Tailwind, and code Playground

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>

<title>pour le concert</title>
<meta name="Identifier-URL" content="http://tizianadecarolis.com">
<META HTTP-EQUIV="Content-Language" CONTENT="fr">
<META NAME="Audience" CONTENT="all">
<META NAME="revisit-after" CONTENT="2 days">
<meta name="robots" content="all">
<meta name="Author" content="Hervé Duclos">
<meta name="description" content="Tiziana de Carolis est une compositrice, spécialisée dans la musique de film et pianiste">
<meta name="keywords" content="pre-ludio, quatro stagioni del cuore, quatres elements, éléments, lembi di sogno, malumbia, del riso et dell oblio">
<meta name="robot" content="index,follow"
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link href="../css/chartregraph.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="../css/fond.css" type="text/css" media="screen"/>

<title> Menu deroulant css3 </title>

<link rel="stylesheet" href="../css/stylemenuderoulant.css" type="text/css" media="screen"/>

<body text="#630" link="#630" vlink="#630" alink="#630">

    <ul id="menu">
        <li><a href="indexderoulant.html" target="_parent">TIZIANA DE CAROLIS :</a>
            <div class="menu-conteneur-3">
<div class="colonne-2">
<ul>
                            <li><a href="../indexderoulant.html" target="_parent">Home</a></li>
                            <li><a href="#"></a></li>
                    </ul>      
                </div>
            </div>         
        </li>
        
  <li><a href="#">Biographie</a>
<div class="menu-conteneur-1">
                <div class="colonne-2">
                    <ul>
                            <li><a href="fr/biographiefr.html" target="_parent">Biographie</a></li>
                            <li><a href="fr/cvdetailfr.html" target="_parent">Biographie détaillée</a></li>
                 ...

CSS

/* CSS Document */


body{
    font-family:Didot, Verdana, Geneva, sans-serif;
    background-color:none;
}

ul, li{
    line-height:24px;
    text-align:left;
    font-size:14px;
}

/* commentaire : menu ici */

#menu{
    list-style:none;
    width:960px;
    margin:0 auto;
    height:40px;
    padding:5px 30px;
    margin-bottom:10px;
    z-index:100;
 
    
    /* coins arrondis*/    
     border-radius:0px;
    -moz-border-radius:0px;
    -webkit-border-radius:0px;
    
    
    /* degrade*/
    background:#ffff00;
    background:-moz-linear-gradient(top, #ffff00, #F4F44F);
    background:-webkit-gradient(linear, left top, left bottom, from(#ffff00), to(#F4F44F));
    
    /* bordures*/
    
    border:1px solid #870000;
    box-shadow:inset 0px 0px 1px #e8edf0;
    -moz-box-shadow:inset 0px 0px 1px #e8edf0;
    -webkit-box-shadow:inset 0px 0px 1px #e8edf0;
}

/* onglets ici*/

#menu li{
    float:left;
    display:block;
    position:relative;
    text-align:center;
    padding:10px 10px;
    margin:7x 30px 0 0;
    border:none;
}

#menu li:hover{
    border:1px solid #b7b7b7;
    padding:7px 9px;
    
    /* coins arrondis */
    
    border-radius:0px 0px 0 0;
    -moz-border-radius:0px 0px 0 0;
    -webkit-border-radius:0px 0px 0 0;
    
    /* degrade possible de le supprimer, peut etre mieux*/
    background:#faf5f5;
    background:-moz-linear-gradient(top, #faf5f5, #9F6918);
    background:-webkit-gradient(linear, left top, left bottom, from(#faf5f5), to(#9F6918));
    
}

#menu li a{
    font-size:18px;
    color:#655134;
    display:block;
    outline:0;
    text-decoration:none;
    text-shadow::1px 1px 1px #000;
}

#menu li:hover a{
    color:#161616;
    text-shadow:1px 1px 1px #FFF;
}

/* conteneurs ici */

.menu-conteneur-1,
.menu-conteneur-2,
.menu-conteneur-3,
.menu-conteneur-4{
    margin:4px auto;
    float:left;
    position:absolute;
    left:-999em;
    text-align:left;
    padding:10px 5px;
    border:1px solid #b7b7b7;
   ...