JSFiddle - React, Tailwind, and code Playground

HTML

<figure id="guides" aria-hidden="true">
	<div class="site-guide sg0"><div></div></div><div class="site-guide sg1"><div></div></div><div class="site-guide sg2"><div></div></div><div class="site-guide sg3"><div></div></div><div class="site-guide sg4"><div></div></div><div class="site-guide sg5"><div></div></div><div class="site-guide sg6"><div></div></div><div class="site-guide sg7"><div></div></div><div class="site-guide sg8"><div></div></div><div class="site-guide sg9"><div></div></div><div class="site-guide sg10"><div></div></div><div class="site-guide sg11"><div></div></div><div class="site-guide sg12"><div></div></div><div class="site-guide sg13"><div></div></div><div class="site-guide sg14"><div></div></div><div class="site-guide sg15"><div></div></div><div class="site-guide sg16"><div></div></div>	<figcaption id="mq">&nbsp;</figcaption>
</figure>


<section id="items">
<ul>
	<li>
		<article id="post-1" class="wrapper feat double">
      <div class="inner">1</div>
		</article>
	</li>
	<li>
		<article id="post-2" class="wrapper feat quad">
      <div class="inner">2</div>
		</article>
	</li>
	<li>
		<article id="post-3" class="wrapper feat single">
      <div class="inner">3</div>
		</article>
	</li>
	<li>
		<article id="post-4" class="wrapper feat single">
      <div class="inner">4</div>
		</article>
	</li>
</ul>
</section>

CSS

body {
  margin:0;
  padding:0;
}

/* Responsive Site Guides & Baseline Grid */
/* ----------------------------------------- */
#guides {
  /*display: none;*/
  position: relative;
  z-index: 1;
  zoom: 1;
  opacity: .3;
  filter: alpha(opacity=30);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box; }
  #guides > * {
    pointer-events: none; }
  #guides .site-guide {
    height: 101%;
    position: fixed;
    z-index: -1;
    top: -1px;
    margin-left: -0.75em;
    border-left: 1px solid rgba(0, 0, 0, 0.4); }
    #guides .site-guide div {
      left: 1.40em;
      border-right: 1px solid rgba(0, 0, 0, 0.4);
      height: 101%;
      position: absolute;
      top: 0; }
  #guides .sg0 {
    left: -1px;
    border-right: 1px solid rgba(0, 0, 0, 0.4); }
  #guides .sg1 {
    left: 11.11111%; }
  #guides .sg2 {
    left: 16.66667%; }
  #guides .sg3 {
    left: 22.22222%; }
  #guides .sg4 {
    left: 27.77778%; }
  #guides .sg5 {
    left: 33.33333%; }
  #guides .sg6 {
    left: 38.88889%; }
  #guides .sg7 {
    left: 44.44444%; }
  #guides .sg8 {
    left: 50%; }
  #guides .sg9 {
    left: 55.55556%; }
  #guides .sg10 {
    left: 61.11111%; }
  #guides .sg11 {
    left: 66.66667%; }
  #guides .sg12 {
    left: 72.22222%; }
  #guides .sg13 {
    left: 77.77778%; }
  #guides .sg14 {
    left: 83.33333%; }
  #guides .sg15 {
    left: 88.88889%; }
  #guides .sg16 {
    right: -1px;
    border-left: 1px solid rgba(0, 0, 0, 0.4); }
  #guides .sg0, #guides .sg16 {
    width: 5.55556%;
    padding-right: 0.75em;
    margin: 0; }
  #guides .sg0 div {
    left: auto;
    right: 0.75em; }
  #guides .sg16 div {
    left: 0.75em; }

@media screen and (max-width: 719px) {
  .sg2, .sg6, .sg10, .sg14 {
    -webkit-transform: scale(0, 1);
    -moz-transform: scale(0, 1);
    -ms-transform: scale(0, 1);
    -o-transform: scale(0, 1);
    transform: scale(0, 1); } }
@media screen and (max-width: 1871px) {
  .sg1,...