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="apresentacao__conteudo">
            <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 jogo 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-circled-32.png">Steam</a> 
                <img src="assests/avatarastronauta.png">
                </div>
           <div class="conteudo__csgo" id="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 possíveis na partida.</p>
                <video width="640" height="360" controls>
                   ...

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*/
.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: 20px;
    color: #DAFFFB;
}

.apresentacao{
    display: table;
    padding: 1%; 
}

.apresentacao__conteudo{
    display:flex;
    flex-direction: column;
    width: 50%;
    gap: 10%;   
    text-align:justify;     
}

.conteudo__inicio{
    align-items:center;
    gap: 10px;
    text-align: left;
    flex-direction: column;
    padding: 1%;
}

.apresentacao__conteudo__inicio{
    flex-direction: row;
}


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

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

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

.botao__link{    
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 25px;
    text-decoration: none;
    text-align:center;
    border: 2px solid;
    border-radius: 10px;
    justify-content:center center ;
    margin-left: 32%;
    width: 35%;
    margin-top: 3%;
    color: #64CCC5;
    padding-bottom: 15px;
    display: inline-block;
}

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

.conteudo__csgo{
    text-align: left;
    flex-direction: column;
    padding: 1%;
}

.titulo__csgo{
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 40px;
    color: #DAFFFB; 
   ...