JSFiddle - React, Tailwind, and code Playground

HTML

<article>
  <header>
    <h1>
      <strong>[TOPIC]</strong> Privacy &amp; App Permissions
    </h1>
    <ul class="tags">
      <li>privacy</li>
      <li>data leaks</li>
      <li>cambridge analytica</li>
      <li>facebook</li>
    </ul>
  </header>
  <section class="foreword">
    <p>
      The current privacy discussion around cambridge analytica and facebook has re-ignited a discussion about the value of your personal data, and the control you may or may not have about how it's used &amp; shared. Let's discuss the implications, problems, and challenges.
    </p>
  </section>
  <section class="references">
    <ol>
      <li><a href="https://en.wikipedia.org/wiki/Facebook%E2%80%93Cambridge_Analytica_data_scandal">
        <em>wikipedia.org</em> - Facebook–Cambridge Analytica data scandal
      </a> <small> - added by <a href="#">@ReAn</a></small></li>
      <li><a href="https://www.vox.com/policy-and-politics/2018/3/23/17151916/facebook-cambridge-analytica-trump-diagram">
        <em>vox.com</em> - The Facebook and Cambridge Analytica scandal, explained with a simple diagram
      </a> <small> - added by <a href="#">@ReAn</a></small></li>
      <li><a href="http://www.bbc.com/news/topics/c81zyn0888lt/facebook-cambridge-analytica-data-scandal">
        <em>bbc.com</em> - Facebook-Cambridge Analytica data scandal
      </a> <small> - added by <a href="#">@Demios</a></small></li>
      <li><a href="https://www.theguardian.com/uk-news/2018/may/02/cambridge-analytica-closing-down-after-facebook-row-reports-say">
        <em>theguardian.com</em> - Cambridge Analytica closing after Facebook data harvesting scandal 
      </a> <small> - added by <a href="#">@cfabbro</a></small></li>
    </ol>
  </section>
</article>
<article class="comments">
  <header>
    <h2>Comments</h2>
    <div>
      <strong>Top Tags: </strong>
      <small><em>(Select one or more to filter)</em></small>
    </div>
    <ul class="tags">
      <li><a href="#filter"><strong>32</strong>...

SCSS

body {
  background-color: #eee;
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

a { color: rgb(34, 125, 188); }

article {
  margin: 20px;
  padding: 10px;
  background-color: white;
}

article header {
  h1, h2 { margin: 0;}
}

.tags {
  list-style: none;
  padding: 0;
  margin: 5px 0;
  
  display: flex;
}

.tags li {
  margin-right: 5px;
  padding: 2px 5px;
  background-color: #fdd;
  border-left: 3px solid #855;
}

.tags a {
  color: black;
  text-decoration: none;
  
  &:hover {
    text-decoration: underline;
  }
}

.foreword {
  color: #333;
  font-size: 18px;
  line-height: 1.3;
  font-family: serif;
}

.references {
  font-size: 14px;
  li em { color: #666; }
}

.comments {
  
}