JSFiddle - React, Tailwind, and code Playground

by sashavladyka

HTML

<div>
  <h2>Квитанція:</h2>
  <p class="info">Екскурсія для групи з <strong>20</strong> школярів.</p>
  <p class="price">Ціна: <strong>100 грн.</strong></p>
  <p class="control">Контроль</p>

  
</div>

CSS

div { padding: 4px 20px; width: 170px; border: 1px solid #999;}
h2 { margin: 0; padding: 10px 0;}
p { margin: 0; padding: 10px 0;}
.info { font-size: 120%; line-height: 1.3em;}
.price { padding-bottom: 30px; font-style: italic;}
.control:before {
  content: url(https://poshtarboba.github.io/fe/img/cut_here.png);
}

.control:after {
  content: "(квиток зберігайте до кінця поїздки)";
  display: block;
  padding-top: 10px;
}