JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SuperApp</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
</head>
<body>
    <header>
        <div class="menu">
            <div class="container">
                <nav>
                    <ul class="ElementsMenu">
                        <li class="logo"><img src="https://i.stack.imgur.com/DIMR5.png"  alt="Logo"></li>
                        <li><a href="">A propos</a></li>
                        <li><a href="">Services</a></li>
                        <li><a href="">L'équipe</a></li>
                        <li><a href="">Contact</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>

    <main>
        <section class="intro">
            <div class="container">
                    <h1> SUPER APP !</h1>
                    <h2> L'application trop super !</h2>
                    <hr></hr>
                    <div class="icones">
                        <figure class="icone"> 
                            <img src="images/thumbs-up.svg" alt="Like it"> 
                            <figcaption>Like it</figcaption> </figure>
                        <figure class="icone"> 
                            <img src="images/heart-shape-silhouette.svg" alt="Love it"> 
                            <figcaption>Love it</figcaption> </figure>
                        <figure class="icone"> 
                            <img src="images/shopping-cart-black-shape.svg" alt="Buy it"> 
                            <figcaption>Buy it</figcaption> 
                        </figure>
            ...

CSS

*{
    box-sizing: border-box;
    margin: 0;
}

body {
    font-family: 'Open Sans';
    font-size: 14px;
    color: #333;
}

.container { /* règles générale de mise en forme des containers */
    
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    width: 100%;
  
}


/*---------------------MENU------------------------------- */


.menu > div.container { /* couleur fond menu */
    background-color: #DD5555; 
}



.ElementsMenu {
    display: grid;
    grid-template-columns: repeat(5, max-content);
    justify-content: center;
    gap: 2rem;
    border: 1px solid rgb(255, 255, 255);
  }

  .ElementsMenu > li {
    display: block;
    height: 40px;
    line-height: 40px;
    border: 1px solid rgb(0, 0, 0);
    list-style: none; /* supprime les puces */
}

.ElementsMenu > .logo{


}

.logo > img{
    vertical-align: middle;
    border: 1px solid rgb(172, 178, 15);
}



a{ /* Mise en forme de la police du menu */
    text-decoration : none; /* supprimer soulignage du texte menu */
    color: #FFFFFF;
}











h1{ /* titre SUPER APP */
    text-align: center;
    font-weight: bold;
    letter-spacing: 2px;
    font-size: 3rem;
    color: #FFFFFF;
   /* border: 1px solid white; */
}

h2{ /* sous-titre  */
    font-weight: normal;
    text-align: center;
    font-size: 1.7rem;
    color: #FFFFFF;
    margin-top: 5px;
   /* border: 1px solid white; */
}

.intro > div.container{
    background-image: url("images/about.jpg.png"); /* image de fond */
    background-size: cover;
    height:848px; /* taille du conteneur */

    display: flex;
    flex-direction: column;
    /*justify-content:space-between ;*/
    gap: 10 px;
    align-items: center;  /* alignement horizontal */
    padding-top: 280px; /* alignement vertical */
    border: 1px solid rgb(116, 84, 234);

}


hr{
    width:480px;
    margin-top:20px;
    /*margin-left:504px;*/

} 

div.icones{
    display: flex;
    margin: 0 auto;
    margin-top: 25px;
   ...