JSFiddle - React, Tailwind, and code Playground

by Michaël van de Weerd

HTML

<section>
  <h1>
    <strong>Parcifal</strong> Programmatuur
  </h1>
  <p>
    Het is onze missie digitale oplossingen te ontwikkelen die zowel <strong>handzaam</strong> als <strong>duurzaam</strong> zijn. Essentieel voor het behalen van ons doel is het onderzoeken van <strong>nieuwe technieken</strong> en het maken van <strong>prototypes</strong> en <strong>open-source software</strong>.
  </p>
  <p>
    Onze klanten kunnen rekenen op <strong>hoogwaardige technische oplossingen</strong> voor een breed scala aan vraagstukken en problemen. Een aantal voorbeelden van opdrachten die u ons kunt geven:
  </p>
  <ul>
    <li>
      <p>
        U wilt een website laten bouwen met specifieke technische eisen, zoals een eigen API service of data-visualisatie.
      </p>
    </li>
  </ul>
</section>

CSS

* {
  margin: 0;
  padding: 0;
  font: inherit;
  box-sizing: border-box;
}

html {
  background-color: #003300;
  font: normal 13px/13px monospace;
}

section {
  border: 6px double white;
  background-color: #009900;
  margin: 32px calc((100% - 512px) / 2);
  padding: 16px;
}

section * {
  margin-bottom: 1rem;
}

section *:last-child {
  margin-bottom: 0;
}

h1 {
  font: 1.3rem/1.3rem sans-serif;
  color: white;
}

p {
  font: 1em/1em serif;
  color: white;
}

strong {
  font-weight: bolder;
}

ul {
  list-style: bullet;
  padding-left: 32px;
}