JSFiddle - React, Tailwind, and code Playground

by adamschwartz

HTML

<h2>Primary</h2>
<p>A few caucus locations across the state had to be changed ahead of time to accommodate larger numbers of voters. In Albany County, one of the larger counties in the state, <a href>more than 1,200 people</a> showed up to caucus in an ice rink. Most voters were wearing buttons or stickers in support of either Clinton or Sanders, but the mood was unmistakably friendly between the two camps.</p>

CSS

body {
  margin: 34px;
  background: #fff;
}

h2 {
  text-transform: uppercase;
  color: #777;
  font-family: arial;
  font-size: 11px;
  letter-spacing: .06em;
}

p {
  margin: 0 0 1.17em;
  font-size: 17px;
  font-family: Georgia, serif;
  color: #333;
  line-height: 1.75;
  width: 40em;
  max-width: 100%;
}

p a {
  color: inherit;
  text-decoration: none;
  box-shadow: inset 0 -3px rgba(0, 0, 0, .15);
}

.blue h2 {
  color: rgb(0, 98, 255)
}

.blue p a {
  box-shadow: inset 0 -3px rgba(0, 98, 255, .2)
}

.red h2 {
  color: rgb(255, 87, 34)
}

.red p a {
  box-shadow: inset 0 -3px rgba(255, 87, 34, .2)
}

JavaScript

document.documentElement.classList.add('blue')