JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
  <head>
    <title>Klassenselektor</title>
    <meta charset="UTF-8">
   <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
  <header class="kopffuss">Kopfzeile</header>
  <nav class="bigfont">Navigation</nav>
  <main>
  <h1>Klassenselektor</h1>
  <p>Das p-Element ohne einer Klasse.</p>
  <p class="hinweis">Das p-Element mit der Klasse <code>hinweis</code>.</p>
  <p class="hinweis warnung">Das p-Element mit den Klassen <code>hinweis warnung</code>.</p>
  <p class="warnung">Das p-Element mit der Klasse <code>warnung</code>.</p>
  <p class="hinweis bigfont">Das p-Element mit den Klassen <code>hinweis bigfont</code>.</p>
  </main>
  <footer class="kopffuss">Fußzeile</footer>
  </body>
</html>

CSS

/* Datei: style.css */
 
/* Schwarzer Rahmen,
   Zentrierter Text,
   5 Pixel Abstand von oben
 */
header,
nav,
footer { 
  text-align:center;
  border: 1px solid black;
  margin-top: 5px;
  padding: 5px;
  font-family: Verdana, Arial;
}

/* Grauer Text
 */
h1,
abbr {
  color: gray;
  font-family: Verdana, Arial;
}

/* Schriftfamilie für p-Elemente
 */
p { font-family: Verdana, Arial; }

/* Absatztext für einen Hinweis
 */
p.hinweis {
  margin-left: 50px;
  border-left: 10px solid green;
  padding-left: 5px;
}

/* Absatztext für einen Hinweis als Warnung
 */
p.hinweis.warnung {
  border-left: 10px solid red;
  border-top: 2px solid red;
  border-right: 10px solid red;
  border-bottom: 2px solid red;
  text-align: center;
}

/* Schriftgröße auf 140%
   Hintergrundfarbe auf grau
*/
.kopffuss {
  font-size: 140%;
  background: #f5f5f5;
}

/* Schriftgröße auf 130% 
 */
.bigfont { font-size: 130%; }

.warnung { color: blue; }