JSFiddle - React, Tailwind, and code Playground

HTML

<body>


<div class="content">
				<div class="date">11.08.2017</div>
				<h1>Заголовок</h1>
				
					<p>

Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Что вскоре единственное, безорфографичный последний. Точках единственное использовало пустился его. Дал буквенных своего текста заглавных заголовок за заманивший диких даль.
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Коварный за рыбного правилами речью грустный осталось страна, одна большой приставка точках, эта парадигматическая встретил языкового он на берегу, скатился собрал.

</p>
				</div>
        
        </body>

CSS

body{
  background-color: green;
}

.content {
  width: 50%;
  height: 100%;
  font-family: 'Roboto';
  background-color: #FFF;
  box-shadow: 0px 1px 14px 2px rgba(0, 0, 0, 0.15);
  margin-top: 90px;
  position: relative;
  display: inline-block;
  padding: 0 50px;
  background-color: #FFF; }
  .content h1 {
    font-size: 36px;
    color: #252525;
    text-align: center;
    position: relative;
    font-weight: 700;
    margin-bottom: 47px;
    margin-top: 20px; }
  .content h1:after {
    content: "";
    background-color: black;
    height: 6px;
    left: 50%;
    margin-left: -75px;
    margin-top: 65px;
    position: absolute;
    width: 150px;
    border-radius: 3px; }
  .content .date {
    color: white;
    text-align: center;
    background-color: blue;
    padding: 7px 17px;
    border-radius: 17px;
    font-weight: 400;
    display: inline-block;
    margin-top: 20px;}