JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    <h1>Mi periódico</h1>
</header>      
<nav>
<ul class="menu-principal">
    <li><a href="./internacional/">Internacional</a></li>
    <li><a href="./sucesos/">Sucesos</a></li>
    <li><a href="./deportes/">Deportes</a></li>
</ul>
</nav>
<section class="deportes">
<header>
  <h2>Noticias de deportes</h2>
</header>
<article>
  <header>
    <h3>El Futbol Club Pepito gana por 2-0 a...</h3>
  </header>
  <nav>
    <ul class="submenu">
      <li><a href="#pag1">Página 1 de la crónica</a></li>
      <li><a href="#pag2">Página 2 de la crónica</a></li>
    </ul>
  </nav>
  <section id="pag1">Aqui la crónica del partido, página 1</section>
  <section id="pag2">Aqui la crónica del partido, página 2  </section>
</article>

<aside>
    <header>
      <h4>Clasificación general</h4>
    </header>
    <ol>
      <li>Futbol Club Pepito</li>
      <li>ASDF C.F.</li>
      <li>Wadus</li>
      <li>...</li>
    </ol>
</aside>
</section>

CSS

*{font: medium/1.2 sans-serif; padding: .5em}
header{font-weight: bold}
h1{font-size: 200%}
h2{font-size: 150%}
h3{font-size: 120%}
ul li{display: inline-block}
ol{list-style: decimal inside}
nav{border: 1px solid blue}
section{border: 1px solid red}
article{border: 1px solid black}
aside{border: 1px solid green}