JSFiddle - React, Tailwind, and code Playground

by Cupidvogel

HTML

<body>
    <div id="container">

      <div id="switcher">
        <h3>Style Switcher</h3>
        <div class="button" id="switcher-default">
          Default
        </div>
        <div class="button" id="switcher-narrow">
          Narrow Column
        </div>
        <div class="button" id="switcher-large">
          Large Print
        </div>
      </div>

      <div id="header">
        <h2>A Christmas Carol</h2>
        <h2 class="subtitle">In Prose, Being a Ghost Story of Christmas</h2>
        <div class="author">by Charles Dickens</div>
      </div>
      
      <div id="chpt">
        <h3 class="chapter-title">Preface</h3>
        <p>I HAVE endeavoured in this Ghostly little book, to raise the Ghost of an Idea, 

which shall not put my readers out of humour with themselves, with each other, with the 

season, or with me.  May it haunt their houses pleasantly, and no one wish to lay it.</p>
        <p>Their faithful Friend and Servant,</p>
        <p>C. D.</p>
        <p>December, 1843.</p>
      </div>
      
      <div class="chapter" id="chapter-1">
        <h3 class="chapter-title">Stave I: Marley's Ghost</h3>
        <p>MARLEY was dead: to begin with. There is no doubt whatever about that. The 

register of his burial was signed by the clergyman, the clerk, the undertaker, and the chief 

mourner. Scrooge signed it: and Scrooge's name was good upon 'Change, for anything he chose 

to put his hand to. Old Marley was as dead as a door-nail.</p>
        <p>Mind! I don't mean to say that I know, of my own knowledge, what there is 

particularly dead about a door-nail. I might have been inclined, myself, to regard a 

coffin-nail as the deadest piece of ironmongery in the trade. But the wisdom of our 

ancestors is in the simile; and my unhallowed hands shall not disturb it, or the Country's 

done for. You will therefore permit me to repeat, emphatically, that Marley was as dead as a 

door-nail.</p>
        <p>Scrooge knew he was dead? Of course he...

CSS

html, body {
  margin: 0;
  padding: 0;
}
body { 
  font: 62.5% Arial, Verdana, sans-serif; 
} 
#container {
  font-size: 1.2em;
  margin: 10px 2em;
}

h1 { 
  font-size: 2.5em; 
  margin-bottom: 0; 
} 
h2 { 
  font-size: 1.3em; 
  margin-bottom: .5em; 
} 
h3 { 
  font-size: 1.1em; 
  margin-bottom: 0; 
} 

.poem {
  margin: 0 5em;
}
.chapter {
  margin: 1em;
}

#switcher {
  float: right;
  background-color: #ddd;
  border: 1px solid #000;
  margin: 10px;
  padding: 10px;
  font-size: .9em;
}
#switcher h3 {
  margin: 0;
}
#switcher .button {
  width: 100px;
  float: left;
  text-align: center;
  margin: 10px;
  padding: 10px;
  background-color: #fff;
  border-top: 3px solid #888;
  border-left: 3px solid #888;
  border-bottom: 3px solid #444;
  border-right: 3px solid #444;
}
#header {
  clear: both;
}
.large {
  font-size: 1.5em;
}

.narrow {
  width: 400px;
}

.selected {
  font-weight: bold;
}

.hidden {
  display: none;
}

#switcher .hov {
  cursor: pointer;
  background-color: #9400d3;
}

JavaScript

$(function() {
$(".button").hover(function() { $(this).addClass("hov"); }, function() { $(this).removeClass("hov"); });

$(".button").click(function(event) {
$(".button").removeClass("selected");
$(this).addClass("selected");
if (event.target.id == "switcher-default")
$("div#chpt").removeClass();
else if (event.target.id == "switcher-narrow")
$("div#chpt").removeClass().addClass("narrow");
else
$("div#chpt").removeClass().addClass("large");
event.stopPropagation(); });

$("#switcher").click(function() {
if (!($("#chpt").hasClass("narrow")) && !($("#chpt").hasClass("large")))
$(".button").toggleClass("hidden");
});
$("#switcher").trigger("click");
$("#switcher-default").addClass("selected");
});