JSFiddle - React, Tailwind, and code Playground

by anastacia_tymush

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;}
.control:before { content: url(https://poshtarboba.github.io/fe/img/cut_here.png);}
.control:after { content: "(квиток зберігайте до кінця поїздки)";
display: block;
padding-top: 10px;
font-size: 65%;
line-height: 1.4em;
}
.info { font-size: 120%; line-height: 1.3em;}
.price { padding-bottom: 30px; font-style: italic;}