JSFiddle - React, Tailwind, and code Playground

by Sergey khorev

HTML

<div class="container">
              <div class="row">
                  <article class="col-md-12 no-pad">
                    <h1 class="super-heading">Строительная компания</h1>
                    <h3 class="main-heading"><span>Отчет по работе с заказчиком</span></h3>
                    <div class="liner"></div>
                  </article>
              </div>
              <div class="row add-top-half">
                  <article class="col-md-12 no-pad">
                    <img alt="" title="" class="img-responsive" src="http://milleu.ru/images/portfolio/skb.jpg">
                  </article>
              </div>
              <div class="row add-top-quarter">
                  <article class="col-md-6">
                    <p class="promo-text dark font1 add-top-quarter">
                       </p><h2>О проекте:</h2><br>Клиент - организация занимается строительством малоэтажных объектов из клееного бруса, таких как дома, бани, беседки и гаражи. Также занимается производством клееного бруса и покраской деревянных домов. Хотим обратить внимание, что у компании достаточно большой спектр предоставляемых услуг. Иметь швейцарский нож в кармане весьма неплохо, но в контексте продвижения большую роль играет наполнение коммерческого ресурса. После долгих переговоров клиент решился немного сузить профиль работ и сосредоточится на максимально выгодном(с максимальной <b>маржой</b>) направлении.<p></p>
                          <div class="liner-small color-bg "></div>
                          
                  </article>
                  <article class="col-md-6">
                    <p class="promo-text dark font1 add-top-quarter">
                        <b style="font-size:20px;">Итог:</b><br>Сроки сотрудничества: с апреля 2017 года по настоящее время. Услуга: "Комплексный интернет-маркетинг". <br>Результаты работы: увеличение поискового трафика и закрепление результатов продвижения. </p>
                        <a href="#top"><img...

CSS

@media (min-width: 1024px) and (max-width: 5000px) {
    .container{
        max-width: 1000px;
    }
}
.super-heading{
    font-size: 124px;
    line-height: 148px;
    font-weight: 200;
}
.main-heading{
    font-size: 3vw;
    line-height: 3vw;
    font-weight: 200;
}
.liner{
    width: 75%;
    height: 27px;
    margin-top: 30px;
    display: inline-block;
}
.add-top-half {
    margin-top: 60px;
}
.img-bg {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}