JSFiddle - React, Tailwind, and code Playground

by Michaël van de Weerd

HTML

<header>
  
</header>
<main>
  <article>
    <header>
      <p>Geachte meneer of mevrouw,</p>
    </header>
    <section>
      <p>U ontvangt dit bericht van mij omdat het me op viel dat uw onderneming nog geen website heeft.</p>
    </section>
    <footer>
      <p>Met vriendelijke groet,</p>
      <p>Michaël van de Weerd</p>
    </footer>
  </article>
</main>
<footer>
  <address>
    <dl>
      <dt>Informatie</dt>
      <dd>Parcifal Programmatuur</dd>
      <dd><a href="https://parcifal.eu">parcifal.eu</a></dd>
      <dd>IBAN NL67 TRIO 0254 7920 30</dd>
      <dd>KVK 12345678</dd>
    </dl>
    <dl>
      <dt>Locatie</dt>
      <dd>Lijnbaanstraat 13B</dd>
      <dd>9711RT Groningen, Nederland</dd>
    </dl>
    <dl>
      <dt>Communicatie</dt>
      <dd><a href="tel:+31657668123">+31 6 57 66 81 23</a></dd>
      <dd><a href="mailto:[email protected]">[email protected]</a></dd>
    </dl>
  </address>
  <aside>
    <ul>
      <li><small>De inhoud van dit bericht is vertrouwelijk en alleen bestemd voor de geadresseerde.</small></li>
      <li><small><strong>Parcifal</strong> Programmatuur &copy; 2016</small></li>
    </ul>
  </aside>
</footer>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font: 13px/1.2em sans-serif;
}

html {
  background-color: silver;
}

body {
  width: calc(8 * 80px);
  margin: 8px;
  padding: 8px;
  background-color: white;
  box-shadow: 0 2px 2px gray;
}

main {
  padding: 16px;
}

article {
  padding: 4px 8px;
}

article *:not(*:last-child) {
  margin-bottom: 1rem;
}

article > header * {
  font-style: italic;
}

article > section {
  padding-left: 8px;
}

article > footer {
  padding-left: 16px;
}

a {
  color: #4c4;
  text-decoration: none;
}

dl {
  padding: 4px;
  float: left;
  box-sizing: none;
  font-style: normal;
  color: gray;
  display: inline-block;
}

dt {
  font-weight: bolder;
}

address {
  width: 100%;
  display: inline-block;
}

aside {
  width: 100%;
  display: block;
  padding: 4px;
  text-align: center;
  color: silver;
}

aside > ul {
  list-style: none;
}
strong {
  font-weight: bolder;
}