JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>df</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
  </head>

  <body>

    <div class="test">
      <div class="content">Content</div>
    </div>

  </body>

</html>

CSS

body {
  background-color: pink;
}


/* основной контейнер (большой серый) */
.test {
  width: 300px;
  height: 150px;
  background: #f0f0f0;
}

/* его содержимое - темно серый прямоугольник */
.test .content {
  width: 100px;
  height: 50px;
  background: #d0d0d0;
}

/* псевдо-класс after, желтый */
.test::after {
  width: 100px;
  height: 50px;
  background: #f0f000;
  display: block;
  content: " After ";
}

/* псевдо-класс before, лиловый */
.test::before {
  width: 100px;
  height: 50px;
  background: #f000f0;
  display: block;
  content: " iiiBefore ";
}