Responsive news homepage using Grid and TailwindCSS

Hi Dario Rodrigues, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:

I noticed that you used a button in which case the best option would be an a, because in my head when a person clicks on a button written Read more, he is not confirming a form, or something like, it will be redirected to another page, to read more about!

To resolve do this:

<a class="px-16 font-bold tracking-widest py-3 md:py-4 uppercase bg-soft-red transition-all hover:bg-very-dark-blue text-white">Read more</a>

If we see how the layout is behaving at higher resolutions, with the help of google dev tools, we will see that it is stretching a lot, to solve this we can use a max-width with the value we want the content to stop growing and to center use a margin: 0 auto;

body {
    max-width: 1440px;
    margin: 0 auto;
}

The rest is great!

I hope it helps... 👍

Oì Dario, tudo bom contigo ? ;) I think i can give you some advices to help you to improve your solution :

• As you can see, we can divide the design in 3 big columns ( by the three columns of the last section). So, you can divide the structure as two sections :

<section class="first-section">
    <div class="main-content">…</div>
    <div class="aside">…</div>
</section>
<section class="second-section">
    <ul>
        …
    </ul>
</section>

In that way, you'll be able to define a specific width to each box in function of the container they all in.

For exemple : For the three cards at the bottom you'll be able to do this .second-section ul li { width: calc((100% - 60px)/ 3); } "60px" represent 2 times 30px which are the spacing between each column. and by getting the <ul> parent as a flexbox with justify-content: space-between you'll have the good size for your Three cards section ;)

For the main content .main-content { width: calc((100% - 60px)/ 3 * 2 + 30px); } because the main content takes 2 column i added "* 2" and "+ 30px" to include the column spacing unused because there are only 2 column in this section.

Parabéns para a tua solução, continua como assim :) Hope it helps...

Maxime