JSFiddle - React, Tailwind, and code Playground

HTML

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pagina prova</title>
  <link rel="stylesheet" href="pàgina_home.css">
</head>

<body>
    <header style = "width: 100%;">
        <p style="text-align:center;">
            <a href = "pàgina%20home.html">
                <img src= "https://i.imgur.com/BSHMhUe.png" alt = "logo">
            </a>
        </p>
    </header>
    <nav style = "width: 100%;">
        <p class="rectangle">
          <button class="button1" onclick="location.href='pàgina%20productes.html'">Productes</button>
          <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
          <button class="button1" onclick="location.href='pàgina%20contacte.html'">Contacte</button>
        </p>
    </nav>
    <main>
        <section style="text-align:center;" class = "Imatge">
            <h2 style="font-size:150%;">Producte Destacat</h2>
            <a href = "pàgina%20producte.html">
                <p style="text-align:center;">
                    <img src= "https://clubtech.es/wp-content/uploads/2018/12/playstation_4_console_controller_ps4_92842_3840x2160.jpg" alt = "Producte destacat" style="width:40%">
                </p>
            </a>
        </section>
        <article style="text-align:center;" class = "Descripcio"><p></p>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</article>
    </main>
    <footer>
        <p style="text-align:center;">
            <a href = "pàgina%20avís%20legal.html">Avís Legal-Privadesa-Termes d'ús</a>
        </p>
        <p style="text-align:center; font-size:75%;"> 
            <a href="https://www.freepik.com/vectors/logo">Logo vector created by freepik - www.freepik.com</a>
        </p>
    </footer>
</body>

CSS

@media screen and (max-width:480px){

    body {
        background-color: mediumspringgreen;
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 30% 6% 60% 4%;
        grid-template-areas: "header" "nav" "main" "footer";
    }

    header img{

        display: block;
        align-self: center;
        justify-self: center;
        max-height: 5%;
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 50%;
    }
  
    .rectangle {
        width: 100%;
        height: 4%;
        background: gold;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
    }
  
    .button1 {
        background-color: green;
        color: gold;
        border: 3px solid mediumspringgreen;
        border-radius: 12px;
        display: inline-block;
        cursor: pointer;
    }
  
    nav {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
    } 

    main{

        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 70% 30%;
        grid-template-areas:    "imatge"
                                "descripcio";

    }

    .imatge{

        background-color: mediumspringgreen;
        display:inline-block;

    }

    .descripcio{

        background: gold;
        justify-content: center;
        align-items: center;
        display:inline-block;
        width:100%;
        height: 50%;

    }

    footer{

        display: inline-block;
        width: 100%;
        align-items: center;
        justify-content: center;

    }

}

@media screen and (min-width:481px){
    body {
        background-color: mediumspringgreen;
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 30% 6% 60% 4%;
        grid-template-areas: "header" "nav" "main" "footer";
        width:100%;
        height:100%;
    }

    header img{

        display:...