JSFiddle - React, Tailwind, and code Playground

HTML

<?php

function nameIsValid(){
    //n'accepte pas les caractères spéciaux et accents
    return preg_match('/^[A-Z][a-z]+$/',htmlspecialchars($_POST['name'])); }


function emailIsValid(){
    return  (filter_var(htmlspecialchars($_POST['email']), FILTER_VALIDATE_EMAIL));
}

function phoneIsValid(){
    // doit commencer par 0 et contenir 10 charactères au total
    return preg_match('/^0[0-9]{9}$/', htmlspecialchars($_POST['phoneNumber']));
}

function languageChosen(){
    return isset($_POST['languefr']) || isset($_POST['langueen']) || isset($_POST['languejp']);
}

function hobbyChosen(){
    return isset($_POST['loisirs']);
}

function allFieldsFilled(){
    // conversion de $_POST en tab classique
    $fields = array_values($_POST);

    //compte le nombre de champs remplis
    $fieldsFilled = 0;
    for($i = 0; $i <= count($fields)-2; $i++){
        // -2 car : i commence à 0 + exclusion du dernier élément "envoyer"
        if (!empty($fields[$i])){
            $fieldsFilled++;
        }
    }
    // est-ce que tous les champs sont remplis
    return ($fieldsFilled == count($fields)-1);
}

// ############## script ##############
if(isset($_POST['submit']) && allFieldsFilled()){
    $alert = "tous les champs sont remplis!";
    // todo BDR
}
else{
    $alert = "certains champs ne sont pas remplis !";
}

?>




<!------------------------- 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">
     ...

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;*/

	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;*/

	display: block;
	
	padding-top: 20px;
	padding-bottom: 10px;
	/*min-width: 400px;*/
	/*max-width: 980px;*/
	margin: auto;

	text-align: justify;
	border: 3px solid red;

}

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


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


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

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