JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8"/>
  <title>Plantilla HTML5</title>
  </head>
  <body>
  <header><h1>La Historia de JQUERY</h1></header>
  <nav><span class="alternador">Alternador de Estilos</span>
  <div id="normal"  class="menu">Normal</div><div id="estrecho" class="menu">Estrecho</div><div id="impresion" class="menu">Impresión</div>
  </nav>
  <section id="contenedor">

       <article>
      <p>jQuery es una biblioteca de JavaScript, creada inicialmente por John Resig, que permite simplificar la manera de interactuar con los documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la técnica AJAX a páginas web. Fue presentada el 14 de enero de 2006 en el BarCamp NYC.
      jQuery es software libre y de código abierto, posee un doble licenciamiento bajo la Licencia MIT y la Licencia Pública General de GNU v2, permitiendo su uso en proyectos libres y privativos.1 jQuery, al igual que otras bibliotecas, ofrece una serie de funcionalidades </p>
       </article>
       <article>
       <h2>Caracteristicas</h2> 
       <p>Selección de elementos DOM.
       Interactividad y modificaciones del árbol DOM, incluyendo soporte para CSS 1-3 y un plugin básico de XPath.
       Eventos.
       Manipulación de la hoja de estilos CSS.
    </p>

       </article>


  </section>
        <aside>

       </aside>

  <footer>

  </footer>

  </body>
</html>

CSS

body {
    background-color: #0f1a23;
    color: #fff;
    font-family: arial;
    font-size: 16px;
    font-weight: 500;
}
header h1{
    color:#0868ac;
    text-shadow:0.1em 0.2em black;
}
nav {
    background-color: #0868ac;
    height: 4em;
    padding-left: 3em;

}
.alternador {
    cursor: pointer;
    margin-top: 1em;
}
#contenedor 

{
background: #131f2b;
width: 95%;
border-radius: 0.5em;
margin: 1em auto;
vertical-align: top;
text-shadow:2px 2px 5px rgba(0,0,0,0.7);
}

#contenedor article {
        text-align: justify;
        width: 40%;
        padding: 0.5em;
        margin:0 2%;
        min-height: 350px;
        background: #192b3d;
        display: inline-block;
        vertical-align: top;
        transition:all 0.5s ease-in;
        -webkit-transition:all 0.5s ease-in;
}

#contenedor article:hover {

    background: #aaa;
    transform: rotate(4deg) translateX(10px);
    -Webkit-transform: rotate(4deg) translateX(10px);
}
h2 {
    text-shadow:0.1em 0.2em black;
}
nav .menu {
    display:inline-block;
    background-color: #b2dfff;
    width: 5em;
    height: 2em;
    color: #0f1923;
    margin-left: 3em;
    text-align: center;
    padding-top: 0.6em;
    cursor: pointer;
    border: 0.3em #fff solid;
}
.normal {
    font-size: 1em;
    color: white;
}

.estrecho {
    font-size: 0.4em;
    color: red;
}
.impresion {
    font-size: 1.8em;

}
.ocultar {
    display: none;


}
.selected {
    font-weight: bold;
    
}
.alternador-hover {
    color: #dadada;
}
.menu-hover {
    background-color:#b2dfff;
    color: #fff;    
}

JavaScript

$(document).on("ready",function(){
  var x=$('.menu');
      x.bind('click',function(){
    $('article').removeClass();
    if (this.id=='estrecho') {
      $('article').addClass('estrecho');
    }else if (this.id=='normal') {
      $('article').addClass('normal');
    }else if (this.id=='impresion') {
      $('article').addClass('impresion');
    }
    x.removeClass('selected');
    $(this).addClass('selected');
   });
});



$(document).on("ready",function(){
  $('span.alternador').toggle(function(){
  $('.menu').css("display","none");
  },function(){
    $('.menu').css("display","inline-block");
  });
 
});