JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<html lang="pt">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Batalha Naval - História do Jogo</title>
		<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
		<link href="css/main.css" rel="stylesheet">
		<link href="css/mobile.css" rel="stylesheet">
	</head>
	<body>
		<header>
			<nav>
				<img src="media/imagens/logo.png" alt="Logótipo da Batalha Naval" title="Batalha Naval" id="small-logo">
				<a href="index.html">Página Inicial</a>
				<a href="como-jogar.html">Como Jogar</a>
				<a href="sobre-nos.html">Sobre</a>
				<img src="media/imagens/logo.png" alt="Logótipo da Batalha Naval" title="Batalha Naval" id="main-logo">
				<a href="historia.html">História do Jogo</a>
				<a href="jogo.html">Jogar</a>
				<a href="login.html">Login</a>
			</nav>
		</header>
		<section>
			<h1>História</h1>
			<p>
				Durante a 1ª Guerra Mundial, os soldados russos conceberam aquele jogo que hoje conhecemos como Batalha Naval. Nesta versão inicial, os dois adversários jogavam em folhas de papel. Eram desenhadas as grelhas do jogo e os navios eram colocados num “hipotético” mar quadriculado. À semelhança dos dias atuais, ganhava o jogo quem descobrisse primeiro as coordenadas dos navios do adversário.
			</p>
			<p>
				O jogo tornou-se rapidamente um passatempo e popularizou-se junto de soldados e prisioneiros nos intervalos entre os combates, durante a década de 20.
			</p>
			<p>
				A primeira versão comercial do jogo surgiu nos EUA, em 1931, pela <i lang="en">Milton Bradley Company</i>. O jogo chamava-se Salvo e ainda era em papel. Em 1943, em plena 2ª Guerra Mundial, uma nova versão do jogo foi lançado, também nos EUA, com o nome <i lang="en">Battleship</i> (Batalha Naval em português), pelo qual ficou mais conhecido. Mais tarde, em 1967, aquando da Guerra Fria, estreou-se a versão de tabuleiro pela primeira vez, com as...

CSS

@import url("https://use.typekit.net/fjy7zmc.css");
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i&subset=latin-ext');
@import url('https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i');


html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
}

h1, h2 {
    font-family: "rogue-sans-ext", sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: 45px;
}

h2 {
    font-size: 35px;
}

h3 {
    font-family: "rogue-sans-ext", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
}

nav, footer {
    background-color: #005EFF;
    font-family: "rogue-sans-ext", sans-serif;
    font-style: normal;
    font-weight: 700;
    width: 100%;
    position: static;
}

nav {
    top: 0;
    left: 0;
    text-align: center;
    font-style: italic;
    font-weight: 700;
    font-size: 25px;
}

nav > img {
    vertical-align: middle;
    margin: 10px 25px 10px 25px;
}

nav > a + a {
    margin-left: 30px;
}

nav > a:link, a:visited {
    color: #FFFFFF;
    text-decoration: none;
}

nav > a:hover {
    color: #77A9FF
}

#small-logo {
    display: none;    
}

section {
    background-color: #77A9FF;
    font-family: "Open Sans", sans-serif;
    font-style: normal;
    font-weight: 400;
    padding-top: 20px;
    padding-bottom: 20px;
}

section > h1, h2 {
    text-align: center;
}

section > h3 {
    left: 20px;
    right: 20px;
    padding-left: 20px;
}

section > h1 {
    font-size: 60px;
}

section > p {
    left: 20px;
    right:...