JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <p id="anchor1" class="project-omschrijving omschrijving row-1">
    <span class='anchor'>Anchor 1</span>
    <a href="#anchor3">To anchor3</a>
    <span class="knop">
        <a class="close">
          <svg class="checkmark" viewBox="-5 -5 115 115" xmlns="http://www.w3.org/2000/svg">
            <line x1="0" x2="50" y1="25" y2="25" stroke-width="5px" stroke-linecap="square" />
            <line x1="0" x2="50" y1="25" y2="25" stroke-width="5px" stroke-linecap="square" transform="translate(50) rotate(90)" />
          </svg>
        </a>
      </span>
    <span class="tekst"></span>
  </p>
  <p id="anchor2" class="project-omschrijving row-1">
    <span class='anchor'>Anchor 2</span>
    <a href="#anchor4">To anchor4</a>
    <span class="knop">
        <a class="open">
          <svg class="checkmark" viewBox="-5 -5 115 115" xmlns="http://www.w3.org/2000/svg">
            <circle cx="25" cy="25" r="25" />
          </svg>
        </a>
      </span>
    <span class="tekst"></span>
  </p>
  <p id="anchor3" class="project-omschrijving omschrijving row-2">
    <span class='anchor'>Anchor 3</span>
    <a href="#anchor1">To anchor1</a>
    <span class="knop">
        <a class="close">
          <svg class="checkmark" viewBox="-5 -5 115 115" xmlns="http://www.w3.org/2000/svg">
            <line x1="0" x2="50" y1="25" y2="25" stroke-width="5px" stroke-linecap="square" />
            <line x1="0" x2="50" y1="25" y2="25" stroke-width="5px" stroke-linecap="square" transform="translate(50) rotate(90)" />
          </svg>
        </a>
      </span>
    <span class="tekst"></span>
  </p>
  <p id="anchor4" class="project-omschrijving row-2">
    <span class='anchor'>Anchor 4</span>
    <a href="#anchor2">To anchor2</a>
    <span class="knop">
        <a class="open">
          <svg class="checkmark" viewBox="-5 -5 115 115" xmlns="http://www.w3.org/2000/svg">
            <circle cx="25" cy="25" r="25" />
          </svg>
        </a>
      </span>
   ...

CSS

/* Reset */

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-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

html,
body {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* Eind reset */

:root {
  --offset: 50vw;
  --cell-hoogte: 50vh;
  --gap: '1em';
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 12px;
}

a {
  text-decoration: none;
  color: palegreen;
}

:target {
  border-radius: 1em;
  background-color: palegreen;
  transition: background-color .3s ease-in-out
}

:target> :nth-child(2) {
  color: #fff;
  transition: color .3s ease-in-out
}

.container {
  color: green;
  font-size: 2em;
  font-weight: bold;
  display: grid;
  grid-template-columns: var(--offset) 100vw;
  grid-template-rows: repeat(2, var(--cell-hoogte));
  grid-gap: var(--gap);
  overflow: hidden;
}

@media (max-width: 700px) {
  .container {
    grid-template-columns: 50vw 100vw;
    grid-template-rows: repeat(2, calc(var(--cell-hoogte)*1));
    grid-gap: 0;
  }
}

p {
  /* Viewport Sized Typography */
  /* https://css-tricks.com/viewport-sized-typography/ */
  font-size: 3.5vmin;
}

p a {
  display: block;
  transition: background .3s ease-in-out
}

#note {
  position: fixed;
  bottom: 1em;
  right: 1em;
  display: flex;
  align-self: flex-end;
}

.omschrijving {
  opacity: .5;
}

.trans {
  transition: all...

JavaScript

const lines = [
  "Random sentences go here, one at a time!",
  "Here's another one! Just keep adding them on.",
  "Look, here's another one.",
  "And yet another. Along with dozens of others."
];

const loremIpsum = el => {
  for (let n = 0; n < 15; n++) {
    el.innerHTML += ' ' + lines.join(' ').toString()
  };
};

const teksten = document.querySelectorAll('.tekst');
const po1 = document.querySelectorAll('.project-omschrijving.row-1');
const po2 = document.querySelectorAll('.project-omschrijving.row-2');
const om = document.querySelectorAll('.omschrijving');
const o = document.querySelectorAll('.open');
const c = document.querySelectorAll('.close');

// Populate
Array.from(teksten, item => loremIpsum(item));

// Toggler
const toggler = (el, klassen) => klassen.map(klas => el.classList.toggle(klas));

// Open
const open = elmt => {
  Array.from(elmt, item => item.addEventListener('click', function() {
    let hoofdNodes = document.querySelectorAll('.' + this.parentNode.parentNode.classList.value.split(' ').join(
      '.').replace('.omschrijving', ''))
    Array.from(hoofdNodes, el => toggler(el, ['trans', 'binnen']));
    console.log(this.parentNode.parentNode);
  }));
}

// Close
const dicht = elmt => {
  Array.from(elmt, item => item.addEventListener('click', function() {
    let hoofdNodes = document.querySelectorAll('.' + this.parentNode.parentNode.classList.value.split(
      ' ').join(
      '.').replace('.omschrijving', ''));
    Array.from(hoofdNodes, el => setTimeout(() => toggler(el, ['trans']), 200));
    Array.from(hoofdNodes, el => toggler(el, ['binnen']))
  }))
}

window.onload = function() {
  open(o);
  dicht(c);
  o[0].click()
}