JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Blog</title>
</head>
<body>
    
    <header class="cabecalho">
         <nav class="menu">
            <a class="menu__link" href="#inicio">Início</a>
            <a class="menu__link" href="#CSGO">CsGo</a>
            <a class="menu__link" href="#RD2">Red Dead 2</a>
            <a class="menu__link" href="#GTAV">Gta V</a>
            <a class="menu__link" href="#DBH">Detroit: Become Human</a>
        </nav>
    </header>
    
    <main class="apresentacao">
       
        <section class="inicio">
            <div id="inicio" class="conteudo__inicio">
                <h1 class="titulo__inicio">Os  melhores jogos que já joguei</h1> 
                <p class="texto__inicio">Olá, meu nome é Matheus, tenho 25 anos e gosto de jogos desde sempre. Aqui vou colocar os jogos que eu mais gostei de jogar. </p>
                <p class="botao">Vamos jogar juntos</p>   
                <a class="botao__link" href="https://s.team/p/nkc-fphv/jcpfvdhc"><img src="assests/icons8-steam-64.png"> Steam </a>  
            </div>
                <img class="imagem__inicio" src="assests/avatarastronauta.png" alt="Astronauta">             
         </section>
        
         <section class="csgo">
            <div id="CSGO" class="conteudo__csgo">
                <h2 class="titulo__csgo">1° Lugar - Counter-Strike: Global Offensive</h2>
                <p class="texto__csgo"> Counter-Strike: Global Offensive é um jogo online desenvolvido pela Valve Corporation e pela Hidden Path Entertainment, sendo uma sequência de Counter-Strike: Source. É o quarto título principal da franquia. Também conhecido como CS:GO, é um FPS tático lançado em 21 de agosto de 2012 pela Valve Corporation. Trata-se de um jogo de tiro em primeira pessoa entre equipes, cujo objetivo é marcar o maior número de pontos...

CSS

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600&family=Roboto:ital,wght@1,300&display=swap');

*{
    margin: 0;
    padding: 0;
}

body{
    box-sizing: border-box;
    background: #001C30;
    color: #64CCC5;
}
    
/*menu com os botoes*/
.cabecalho{
    padding: 2% 0 0 0%;
}

.menu{
    display: flex;
    gap: 30px;
    justify-content: center;
}

.menu__link{
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-decoration: none;
    font-size: 1.25rem;
    color: #DAFFFB;
}

.apresentacao{
    display: flex;
    padding: 3% ;
    flex-direction: column;
}

/*conteudo inicio*/
.inicio{
    display: flex;
    row-gap: 80%;
    column-gap: 30%;
}


.conteudo__inicio{
    display: flex;
    align-items:center;
    text-align:justify;
    flex-direction: column;
    padding: 1% 0%;
    
}

.titulo__inicio{
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 68px;
    padding: 7% 0% 0% 0%;
    color: #DAFFFB;
}

.texto__inicio{
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 45px;
    padding: 5% 0% 0% 0%;
    text-align:center;
}

.botao{
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    text-align: center;
    font-size: 45px;
    padding: 5% 0% 0%;
    color: #DAFFFB;  
}

.botao__link{    
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 30px;
    text-decoration: none;
    text-align:center;
    border: 2px solid;
    border-radius: 10px;
    margin-top: 5%;
    padding-bottom: 2%;
    color: #64CCC5;
    width: 50%;
    gap: 30px;
    padding: 10pxpx;
}

.botao__link:hover{  
    background-color: #DAFFFB ;
}

.imagem__inicio{
    margin-right: 5%;
    gap: 82px;
}

/*conteudo csgo*/
.csgo{
    display:flex;
    row-gap: 30%;
}

.condeudo__csgo{
    display: flex;
    align-items:center;
    text-align:justify;
    padding: 1% 0%;
}

.titulo__csgo{
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
   ...