JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Заголовок</h1>
    <p>Позволяет отобрать элементы, на основе их позиции в родительском списке
дочерних элементов. Можно использовать номер элемента, выражение или
ключевые слова odd и even (для таблиц в стиле зебры). Например, если вы хотите
получить группу из трех элементов, после четвертого, то можно использовать
такую конструкцию.</p>

CSS

h1{font-size:30pt;}
p{font-size:15pt;}
@media (min-width: 800px) {
h1{font-size:40pt;color: red;}
p{font-size:20pt;}
}
@media (max-width: 600px){
h1{font-size:25pt; color: yellow; }
p{font-size:12pt;}
}
@media (max-width: 400px){
h1{font-size:20pt; color: green; }
}