JSFiddle - React, Tailwind, and code Playground

HTML

<span class = "heading" style = "width:100%">ПРИСОЕДИНЯЙТЕСЬ К ПРОЕКТУ</span>
        <div class = "text">

<h3 class="font_3" style="font-size:20px;"><span style="font-size:20px;">Лори</span></h3>

<p class="font_8">
Толстые лори плохо размножаются в неволе, однако известны случаи рождения в неволе детёнышей малого лори, в том числе в зоопарке Сан-Диего.
    <br>Но большинство толстых лори, ныне живущих в зоопарках, уже слишком стары для размножения. Толстые лори, содержащиеся в неволе
    <br>непрофессионалами, часто гибнут от последствий неправильного питания, ненадлежащего ухода, стрессов и инфекционных заболеваний.<br> Зачастую торговцы толстыми лори удаляют зубы животным, чтобы сделать их безопасными для малолетних детей.<br> Удаление зубов нередко приводит к большим потерям крови, инфекциям и смерти лори, а выжившие беззубые животные уже не смогут вернуться в природу и сами добывать себе пищу.            
</p>

</div>

CSS

.heading {
    color:#FFFFFF;
    background-color:rgb(47, 47, 47);
 padding-top:5px;
 font: normal normal normal 23px/1.4em helvetica-w01-roman,helvetica-w02-roman,helvetica-lt-w10-roman,sans-serif
}
.text {
    background-color:rgba(255, 255, 255, 0.9);
}