JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="fr">

<head>
    <title>Formulaire</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <link rel="stylesheet" href="formulairestyle.css" /> <!-- TMP -->
</head>



<body>
    <!------------------------- HEADER ------------------------->
    <header>
        <div id="navbackground">
            <nav>
                <a href="" class="active">Home</a>
                <a href="">News</a>
                <a href="">Contact</a>
                <a href="">About</a>
                <a href="" id="search">
                    <input type="image" alt="searchcloud" src="cloudsearch2.svg" id="searchcloud"/>
                </a>
            </nav>
        </div>
    </header>


    <section>

        <!------------------------- FORMULAIRE ------------------------->
        <form action="" method="POST" id="formulaire">
            <!-- action="<?php echo $_SERVER['REQUEST_URL'] ?>" -->



            <!-- TITLE -->
            <div id="formtitle"> Contact</div>



            <!-- 1 NAME -->
            <div id="formname">
                <label for="name">Nom</label>
                <input type="text" id="name" name="name" placeholder=" nom" /> <!--required-->
            </div>



            <!-- 2 AGE -->
            <div id="formage">
                <label for="age"> Age</label>
                <select id="age" name="age">
                    <?php
                        for($i=1;$i<100;$i++){
                            echo "<option value=\"$i\">$i</option>";
                        }
                    ?>
                </select>
            </div>



            <!-- 3 SEXE -->
            <div id="formsexe">
                <label for="sexe">Sexe</label>
                <optgroup id="sexe">
                    <option>
                        <input type="radio" id="sexeH" name="sexeH" value="H" />
                        <label for="sexeH" class="formsexelabel">H</label>
...

CSS

/* TEMPORARY */

/*header, footer{*/
/*	display: none;*/
/*}*/


/* ################### BODY ################### */

body{
	/*border: 4px solid #8dcba5;*/
	margin: 0px;
	background-color: white;
	color: rgba(70,147,188,1);
	font-family: sans-serif;
	/*background-image: url("clouds.svg");
	background-repeat: repeat;*/

}



/* ################### HEADER ################### */

header{
	width: 100%;
	margin-left: auto;
    margin-right: auto;
    margin-bottom: 0; /* ??? */
}

#navbackground{
	background-color: rgba(70,147,188,1);
	border-bottom: 5px solid white;
	border-top: 5px solid white;
}


nav{
	/* border: 4px solid red; */
	display: flex;
	justify-content: center;
	height: 75px;
	background-color: rgba(70,147,188,1);
	
	min-width: 600px;
	max-width: 980px;
	margin: 0 auto;

	
}


nav a{	
	font-size: 1.3em;
	color: white;
	width: 25%;
	text-align: center;
	text-transform: uppercase;
	padding-top: 25px;
	transition: 1s;
	text-decoration: none;
}


nav a:hover, nav input[type=img]:hover{
	padding-bottom: 15px;
	background-color: #23719a;
	transition: 1s;	
}


/* bouton de recherche */
nav input{
	display: inline;
	border: white;
	border-radius: 3px;
	height: 1.5em;
	width: 50px;
	
}

/*#searchcloud{
	position: relative;
	display: block;
	margin-left: auto;
	margin-right: auto;
	bottom: 2px;
	left: 10px;
	height: 30px;
	width: 35px;
}*/


#imgbackground{	
	background-color: #8bcdf0;
}

#island{
	/* svg -> mettre un display block d'abord */
	display: block;	
	margin: 0 auto; 
    width: 70%;
}





/* ################### SECTION ################### */
section{
	/*border: 4px solid pink;*/
	font-size: 1.3em;
	display: block;
	
	padding-top: 20px;
	padding-bottom: 10px;
	min-width: 600px;
	max-width: 980px;
	margin: auto;

	text-align: justify;
}

section p::first-letter{
	font-size: 2em;
	color: #337fa0;
}


#phpdate{
	color: deeppink;
	text-align: center;
}


/* ################### FORMULAIRE ################### */

form{
	max-width: 750px;
	min-width:...