JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="sass/style.css">
    <title>Document</title>
    
</head>
<body>
    <div class="blog">
        <div class="container">
          <h1 class="logo">my blog</h1>
          <main class="wrapper">
            <aside class="sidebar">
              <h2 class="section-title">All posts</h2>
              <ul class="list titles">
                <li><a href="#article-1" class="active"><span>Article 1</span></a></li>
                <li><a href="#article-2" class="active"><span>Article 2</span></a></li>
                <li><a href="#article-3"><span>Article 3</span></a></li>
                <li><a href="#article-4"><span>Article 4</span></a></li>
                <li><a href="#article-5"><span>Article 5</span></a></li>
                <li><a href="#article-6"><span>Article 6</span></a></li>
                <li><a href="#article-7"><span>Article 7</span></a></li>
                <li><a href="#article-8"><span>Article 8</span></a></li>
                <li><a href="#article-9"><span>Article 9</span></a></li>
                <li><a href="#article-10"><span>Article 10</span></a></li>
              </ul>
            </aside>
            <section class="posts">
              <article class="post active" id="article-1">
                <h3 class="post-title">Article 1</h3>
                <p class="post-author">by Marion Berry</p>
                <div class="post-content">
                  <p>Duis non dolor efficitur erat interdum fringilla a lobortis dolor. Aenean in massa viverra, pretium augue et, imperdiet diam. Proin varius vitae lectus ut suscipit. Etiam metus lacus, molestie at ante eget, gravida tristique metus. Morbi finibus elit mi, ut aliquam libero tempor eu.</p>
                  
                  <p>Curabitur a arcu ut nunc ornare tempor. Vestibulum et augue purus. Sed mattis auctor iaculis....

CSS

@import url("https://fonts.googleapis.com/css?family=Oswald:400,600|Sacramento|Source+Sans+Pro:300&subset=latin-ext");
/* Variables */
/* Global */
*, *::before, *::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  background: #fff;
  font-family: "Source Sans Pro", sans-serif;
  color: #444;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
}

.container {
  max-width: 1140px;
  margin: 0 auto;
}

.section-title {
  font-size: 22px;
  text-transform: uppercase;
  font-family: "Oswald", sans-serif;
  font-weight: 600;
}

.section-title span {
  text-transform: none;
  font-weight: 400;
  color: #777777;
}

/* Layout */
.wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: 10px;
}

.sidebar {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0px;
          flex: 1 0 0;
}

.posts {
  -webkit-box-flex: 2;
      -ms-flex: 2 0 0px;
          flex: 2 0 0;
}

.sidebar, .posts {
  background: #fff;
  margin-right: 10px;
  padding: 40px;
  border: 1px solid #444;
  border-radius: 5px;
}

/* Logo */
.logo {
  font-family: "Sacramento", cursive;
  font-weight: 400;
  font-size: 104px;
  line-height: 1;
  text-align: center;
}

/* Lists */
.list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.list .active {
  font-weight: bold;
}

.list-horizontal li {
  display: inline-block;
}

/* Authors */
.authors li {
  margin-bottom: 12px;
}

/* Post */
.post {
  display: none;
}

.post.active {
  display: block;
}

.post-author {
  font-style: italic;
}

.post-tags {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.post-tags p {
  margin: 0 10px 0 0;
}
/*# sourceMappingURL=style.css.map */

JavaScript

'use strict';

const titleClickHandler = function (event) {
    event.preventDefault();
    const clickedElement = this;

    console.log('Link was clicked!');
    //console.log(event);

/* [DONE] remove class 'active' from all article links  */

    const activeLinks = document.querySelectorAll('.titles a.active');

    for (let activeLink of activeLinks) {
        if(clickedElement !==activeLink) activeLink.classList.remove('active');
    }

/* [DONE] add class 'active' to the clicked link */

        clickedElement.classList.toggle('active');
    
    //console.log('clickedElement:', clickedElement);

/* [DONE] remove class 'active' from all articles */

    const activeArticles = document.querySelectorAll('.posts article.active');

    for (let activeArticle of activeArticles) {
        activeArticle.classList.remove('active');
    }

/* [DONE] get 'href' attribute from the clicked link */

    const articleSelector = clickedElement.getAttribute('href');

    console.log(articleSelector);

/* [DONE] find the correct article using the selector (value of 'href' attribute) */

    const targetArticle = document.querySelector(articleSelector);

    console.log(targetArticle);

/* add class 'active' to the correct article */

    targetArticle.classList.add('active');
}

const links = document.querySelectorAll('.titles a');

for (let link of links) {
    link.addEventListener('click', titleClickHandler);
}