JSFiddle - React, Tailwind, and code Playground

HTML

<!--Service Section-->
<section class="service-section bg-gray section">
    <div class="container">
        <div class="section-title text-center">
            <h3>Текущие
                <span>Новости</span>
            </h3>

        </div>
        <div class="row items-container clearfix">
            <div class="item">
                <div class="inner-box">
                    <div class="img_holder">
                        <a href="service.html">
                            <img src="images/gallery/1.jpg" alt="images" class="img-responsive">
                        </a>
                    </div>
                    <!--Новости Разобраться со стилями-->
                    <div class="image-content text-center">

                        <a href="service.html">
                            <h6>Барсук забежал в МСЧ и убил пенсионера</h6>
                        </a>

                    </div>
                </div>
            </div>
            <div class="item">
                <div class="inner-box">
                    <div class="img_holder">
                        <a href="service.html">
                            <img src="images/gallery/2.jpg" alt="images" class="img-responsive">
                        </a>
                    </div>
                    <div class="image-content text-center">

                        <a href="service.html">
                            <h6>Новые услуги МСЧ</h6>
                        </a>

                    </div>
                </div>
            </div>
            <div class="item">
                <div class="inner-box">
                    <div class="img_holder">
                        <a href="service.html">
                            <img src="images/gallery/3.jpg" alt="images" class="img-responsive">
                        </a>
                    </div>
                    <div class="image-content text-center">
                        <a href="service.html">
                            <h6>Скидки...

CSS

@import url("../plugins/font-awesome-4.7.0/css/font-awesome.min.css");
@import url("../plugins/animate.min.css");
@import url("../plugins/bootstrap.min.css");
@import url("../plugins/bootstrap-select.min.css");
@import url("../plugins/jquery-ui/jquery-ui.css");
@import url("../plugins/timePicker.css");
@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700|Source+Sans+Pro:400,600,700");
@import url("https://fonts.googleapis.com/css?family=Exo+2");

body {
  line-height: 1.4;
  font-family: "Source Sans Pro", sans-serif;
  -webkit-font-smoothing: antialiased;
}

p {
  font-family: "Source Sans Pro", sans-serif;
  color: #848484;
  font-size: 16px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Roboto", sans-serif;
  font-weight: 600;
}

/*=== MEDIA QUERY ===*/
body {
  font-size: 15px;
  color: #777777;
  line-height: 1.8em;
  font-weight: 400;
  background: #ffffff;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  -webkit-font-smoothing: antialiased;
  font-family: "Roboto", sans-serif;
}

.page-wrapper {
  overflow: hidden;
}

a {
  text-decoration: none;
  cursor: pointer;
}

a:hover, a:focus, a:visited {
  text-decoration: none;
  outline: none;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0px;
}

input, button, select, textarea {
  font-family: "Roboto", sans-serif;
}

p {
  position: relative;
  line-height: 1.8em;
}

.section-title h3 {
  font-size: 40px;
  line-height: 50px;
  color: #222222;
  font-weight: 700;
  font-family: "Source Sans Pro", sans-serif;
}

.section-title span {
  color: #222222;
  font-weight: 400;
}

.section-title p {
  font-size: 15px;
  line-height: 25px;
  font-weight: 400;
  color: #777777;
  font-family: "Roboto", sans-serif;
}

.strike-through {
  text-decoration: line-through;
}

.auto-container {
  position: static;
  max-width: 1200px;
  padding: 0px 15px;
  margin: 0 auto;
}

.small-container {
  max-width: 680px;
  margin: 0 auto;
}

.page-wrapper {
  position:...