JSFiddle - React, Tailwind, and code Playground

by Alexander Branchugov

HTML

<p class="normal">
Съешь ещё этих мягких французских булок, да выпей же чаю. Съешь ещё этих мягких французских булок, да выпей же чаю. Съешь ещё этих мягких французских булок, да выпей же чаю. Съешь ещё этих мягких французских булок, да выпей же чаю
</p>
<p class="big">
Съешь ещё этих мягких французских булок, да выпей же чаю. Съешь ещё этих мягких французских булок, да выпей же чаю. Съешь ещё этих мягких французских булок, да выпей же чаю. Съешь ещё этих мягких французских булок, да выпей же чаю
</p>
<p class="x-big">
Съешь ещё этих мягких французских булок, да выпей же чаю. Съешь ещё этих мягких французских булок, да выпей же чаю. Съешь ещё этих мягких французских булок, да выпей же чаю. Съешь ещё этих мягких французских булок, да выпей же чаю
</p>

CSS

p {
  margin: 16px 0 0;
  margin: 0;
}
.normal {
  font-size: 15px;
  line-height: 20px;
  margin-top: 12px;
}
.big {
  font-size: 18px;
  line-height: 24px;
   margin-top: 16px;
}
.x-big {
  font-size: 20px;
  line-height: 28px;
   margin-top: 20px;
}