JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
    



    <!-- Marketing messaging and featurettes
    ================================================== -->
    <!-- Wrap the rest of the page in another container to center all the content. -->

    <div class="container marketing">
      

      <!-- Three columns of text below the slider -->
      <div class="row">
        <div class="col-lg-offset-4 col-lg-4 col-md-offset-4 col-md-4 col-sm-offset-4 col-sm-4">
          <img class="img-circle" src="images/author1.jpg" class="img-responsive" alt="Галина Покудова">
          <h2>Галина Покудова</h2>
          <p class"test">Вьётся судьбы-разлучницы<br>
            Неуловимая нить.<br>
            Может ещё получится –<br>
            Мне без тебя прожить.</p>
          <p><a class="btn btn-default" href="#">Читать дальше &raquo;</a></p>
        </div><!-- /.col-lg-4 -->
        <div class="col-lg-offset-4 col-lg-4 col-md-offset-4 col-md-4 col-sm-offset-4 col-sm-4">
          <img class="img-circle" src="images/author2.jpg" class="img-responsive" alt="Лев Болдов">
          <h2>Лев Болдов</h2>
          <p class="test">Сколько побед было – гордых, классных –<br>
            Что там растленный Рим!<br>
            Нестор Махно, не ложись под красных,<br>
            Не завоевывай Крым!</p>
          <p><a class="btn btn-default" href="#">Читать дальше &raquo;</a></p>
        </div><!-- /.col-lg-4 -->
        <div class="col-lg-offset-4 col-lg-4 col-md-offset-4 col-md-4 col-sm-offset-4 col-sm-4">
          <img class="img-circle" src="images/author3.jpg" class="img-responsive" alt="Тамара Егорова">
          <h2>Тамара Егорова</h2>
          <p>В акустике воздуха слышно дыхание сфер,<br>
            И медью валторны поёт виноградник на склоне.<br>
            А выше, где штрих горизонта расплывчато сер,<br>
            Челесты звучанье небесное вторит валторне.</p>
          <p><a class="btn btn-default"...

CSS

/* GLOBAL STYLES
-------------------------------------------------- */
/* http://colorschemedesigner.com/#0T11Tw0w0w0w0 */
/* Padding below the footer and lighter body text */

body {
  padding-bottom: 40px;
  color: #5a5a5a;
  background: url(images/#.jpg);
  background-repeat:no-repeat;
  background-attachment:fixed;
}
/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */

/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
  position: relative;
  z-index: 15;
}


/* CUSTOMIZE SLIDER (centering)
-------------------------------------------------- */

.bxslider {
  margin-left:auto;
  margin-right:auto;
}

/* MARKETING CONTENT
-------------------------------------------------- */

/* Pad the edges of the mobile views a bit */
.marketing {
  padding-left: 15px;
  padding-right: 15px;
}

/* Center align the text within the three columns below the slider */
.marketing .col-md-4 {
  text-align: left;
  margin-bottom: 20px;
}
.marketing h2 {
  font-weight: normal;
}
.marketing .col-md-4 p {
  margin-left: auto;
  margin-right: auto;
}


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 80px 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -1px;
}



/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 768px) {

  /* Remove the edge padding needed for mobile */
  .marketing {
    padding-left: 0;
    padding-right: 0;
  }

  /* Navbar positioning foo */
  .navbar-wrapper {
    margin-top: 20px;
  }
  /* The navbar becomes detached from the top, so we round the corners */
  .navbar-wrapper .navbar {
    border-radius: 4px;
  }

  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
 ...