JSFiddle - React, Tailwind, and code Playground

HTML

<div id="bloc_page">
	<div id="header"></div>
	<!-- Menu grey -->
    <div id="content-menu">
	<div id="menu"></div>
	<!-- Text menu -->
	<div id="menu-text">

	<dl>
	    <dt><a href="index.html">Home</a></dt>
    </dl>

    <dl>
	    <dt><a href="news.html">News</a></dt>
    </dl>

    <dl>
	    <dt><a href="#">Air Traffic Control</a></dt>
        <dd>
           <ul>
               <li><a href="atc.html">Menu #1</a></li>
               <li><a href="atc.html">Menu #2</a></li>
               <li><a href="atc.html">Menu #3</a></li>
           </ul>
        </dd>
    </dl>

    <dl>
	    <dt><a href="#">Systems and radars</a></dt>
        <dd>
           <ul>
               <li><a href="sar.html">Menu #1</a></li>
               <li><a href="sar.html">Menu #2</a></li>
               <li><a href="sar.html">Menu #3</a></li>
           </ul>
        </dd>
    </dl>

    </div>
    </div>

    <div id="contents">
    	<div id="presentation"><h1><br/> Presentation of the website </h1></div>
    	<div id="presentationtext">Passionated with aviation from my youngest age, wishing one day to become an Air traffic Controller, I'm presently in high school. I made this website to share my knowledge with you about the world of Air Traffic Control. You will find articles about new systems, some explanations news about aviation especially ATC, videos/pictures ... And a lot more !
        </div>

        <div id="construction"><h1><br/> Website under construction </h1></div>
        <div id="constructiontext">This website is still under construction, the only active page is the one you are reading. Very soon, two more will be available, you will find them in the Menu Bar. Please be patient, it will be ready in a short time.<br/><br/>
        <div id="constructiontextsize"> To contact me: contact [at] blackbirds-virtu.com or in the contact page.</div>
        <p class="right">The Webmaster.</p>
        </div>

        <div id="article"><h1><br/> My first article is published !...

CSS

body
{
	background-color: #000b1d;
	background-size: 100% 100%;
    font-family: Helvetica, sans-serif, verdana
}

#bloc_page
{
	width: 1080px;
	margin: auto;
}

.right
{
	text-align: right;
}

a
{
	text-decoration: none;
	color: #000000;
}

.clear
{
	clear: both;
}

#header
{
	background: url(pictures/header.jpg) no-repeat center;
	height: 358px;
}

#menu
{
    height: 40px;
    margin: 0;padding: 0;
    background: url(pictures/menu.jpg) no-repeat center;
}

#menu a
{
    display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
    padding : 0; /* aucune marge intérieure */
    background : #000; /* couleur de fond */        
    color : #fff; /* couleur du texte */
    text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
    width : 144px; /* largeur */
}

#menu a:hover
{
    color: #000; /* On passe le texte en noir... */
    background: #fff; /* ... et au contraire, le fond en blanc */

}

#contents
{
	background: url(pictures/contenu.jpg) repeat-y center;
}

/* Sur les écrans, quand la largeur de la fenêtre fait au maximum 1280px */
@media screen and (max-width: 1024px)
{
	#bloc_page
	{
		width: auto;
	}

    #footer
    {
    display: none;
    }
}

/* Sur tous types d'écran, quand la largeur de la fenêtre est comprise entre 1024px et rien */
@media all and (min-width: 1024px)
{

    #content-menu
    {
    position: relative; 
    }
	#menu-text
	{
	height: 40px;
	margin-left: -20px;
	margin-top: -40px; 
	text-align: center;
	font-family: Arial;
	font-size: 18px;
    }

    dl
    {
	width: 250px;
	height: 40px;
	margin: 0; padding: 0px;
	float: left;
    }

    dt
    {
	height: 40px;
	line-height: 40px;
	text-align: center;
	cursor: pointer;
	color: #620055;
    }

    dt a
    {
    text-decoration: none;
    border: none;
    color: #620055;
    }

    dt:hover
    {
	color: #005371;
    }

    dt a:hover
    {
	color: #005371;
    }

    dd
    {
    display:...