JSFiddle - React, Tailwind, and code Playground

by BrainExploded

HTML

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
  <title>Слои</title>
 </head>
 <body>
  <div class= "header">Анапест как композитный анализ</div>
  <div class="content">
    Рифма существенно осознает лирический дактиль, 
    несмотря на отсутствие единого пунктуационного алгоритма. 
    Из нетрадиционных способов циклизации обратим внимание 
    на случаи, когда эвокация однородно дает резкий анапест, 
    туда же попадает и еще недавно вызывавший безусловную 
    симпатию гетевский Вертер.
  </div>
 </body>
</html>

CSS

.header {
  background: #008b66;
  color: #fff;
  font-size: 1.2em;
  padding: 10px;
}

.content {
  background: #dfe6e1;
  padding: 5px;
  border-left: 1px solid #fff;
  border-top: 1px solid #fff;
  font-size: 0.9em;
  margin-left: 2em;
  margin-top: -0.5em;
}