JSFiddle - React, Tailwind, and code Playground

by Zonedark

HTML

<body>
  <div class="container">
    <ul class="accordion">
      <li class="tabs">
        <div class="social-links twitter-icon">
          <a href="http://twitter.com">Twitter</a>
        </div>
        <div class="paragraph">
          <h1>Twitter</h1>
          <p>My thoughts in 140 characters or less. Sometimes, I do not know how to correctly use Twitter.</p>
        </div>
      </li>
      <li class="tabs">
        <div class="social-links facebook-icon">
          <a href="http://facebook.com">Facebook</a>
        </div>
        <div class="paragraph">
          <h1>Facebook</h1>
          <p>Where I get to stalk my friends and let them stalk me. A place to get people to stroke your ego.</p>
        </div>
      </li>
      <li class="tabs">
        <div class="social-links linkedin-icon">
           <a href="">LinkedIn</a>
        </div>
        <div class="paragraph">
          <h1>LinkedIn</h1>
          <p>I act totally professional on this one. It is what the recruiters see, you see.</p>
        </div>
      </li>
      <li class="tabs">
        <div class="social-links insta-icon">
          <a href="">Instagram</a>
        </div>
        <div class="paragraph">
          <h1>Instagram</h1>
          <p>Where I post my duckface pictures. Occasionally, I would post pictures of my food and my cats.</p>
        </div>
      </li>
      <li class="tabs">
        <div class="social-links youtube-icon">
          <a href="http://youtube.com">Youtube</a>
        </div>
        <div class="paragraph">
          <h1>YouTube</h1>
          <p>Just kidding! I do not have a YouTube account. I'm not too fond of the camera.</p>
        </div>
      </li>
      <li class="tabs">
        <div class="social-links tumblr-icon">
          <a href="">Tumblr</a>
        </div>
        <div class="paragraph">
          <h1>Tumblr</h1>
          <p>I have a tumblr but I don't really use it. I still prefer WordPress. I'm quite old-fashioned.</p>
        </div>
     ...

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

/* Variables */
body {
  background: #f77462;
  font-family: Lato, sans-serif;
}

@font-face {
  font-family: 'Genericons';
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/genericons-regular-webfont.eot");
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/genericons-regular-webfont.woff") format("woff"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/genericons-regular-webfont.eot") format("truetype");
  font-weight: normal;
  font-style: normal;
}
[class*="genericon"] {
  display: inline-block;
  width: 16px;
  height: 16px;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1;
  font-family: 'Genericons';
  text-decoration: inherit;
  font-weight: normal;
  font-style: normal;
  vertical-align: top;
}

/* IE7 */
[class*="genericon"] {
  *overflow: auto;
  *zoom: 1;
  *display: inline;
}

.container {
  margin: 100px...