JSFiddle - React, Tailwind, and code Playground

by HappyCougar

HTML

<link rel="stylesheet" href="http://rlexpert.ru/templates/real/css/style.css">
<link rel="stylesheet" href=" http://rlexpert.ru/templates/real/css/owl.theme.css">
<link rel="stylesheet" href="http://rlexpert.ru/templates/real/css/owl.carousel.css">
<script src="http://rlexpert.ru/templates/real/javascript/owl.carousel.js"></script>
<div class="srt_block">
    <h2>Механик-23</h2>
    <div class="srt_top_line">
        <div class="srt_type gold">
            <p>Золотой сертифицированный партнер</p>
        </div>
        <div class="srt_town">
            <p>Новосибирск, Москва</p>
        </div>
    </div>
    <div class="srt_slide">
        <div class="srt_slide_text_box">
            <div class="srt_slide_text_box_top">
                <p class="srt_view_count">417</p>
                <img class="srt_view_search" src="http://rlexpert.ru/templates/real/images/srt_search.png" alt="" />
                <p class="srt_view_text">проведенных осмотров</p>
                <p class="srt_auto_count">21</p>
                <img class="srt_view_auto" src="http://rlexpert.ru/templates/real/images/srt_car.png" alt="" />
                <p class="srt_auto_text">отремонтированных автомобилей наших клиентов</p>
            </div>
            <div class="srt_slide_text_box_bot">
                <p class="srt_services_header">Услуги автосервиса</p>
                <div class="srt_services_1"><p>Слесарный ремонт</p></div>
                <div class="srt_services_2"><p>Сход-развал 3D</p></div>
                <div class="srt_services_3"><p>Кузовной ремонт</p></div>
                <div class="srt_services_4"><p>Компьютерная диагностика</p></div>
                <div class="srt_services_5"><p>Продажа запчастей</p></div>
                <div class="srt_services_6"></div>
            </div>
        </div>
        <div class="srt_slide_holder owl-carousel">
                <div class="item"><img src="http://rlexpert.ru/media/k2/items/cache/398a8bc2e3f7f879ff0986359513be80_XL.jpg"...

CSS

body {
    width:960px;
    margin-top:20px;
    margin-left:20px;
}
.srt_block {
  width: 426px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background: #fff;
  margin-bottom: 30px;
  min-height: 610px;
  padding: 0px 17px;
  position: relative;
  display: inline-block;
}
.srt_block:nth-child(2n) {
    margin-left:18px;
}
.srt_block h2 {
   font-size: 23px;
  padding-top: 34px;
  color: #000;
  font-weight: bold;
}
.srt_type.gold {
  border: 1px solid #e4ca59;
  background: #fbf073;
  background: -moz-linear-gradient(top, #fbf073 0%, #f9e94d 10%, #f5dd11 50%, #f9e94d 90%, #fbf073 99%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbf073), color-stop(10%,#f9e94d), color-stop(50%,#f5dd11), color-stop(90%,#f9e94d), color-stop(99%,#fbf073));
  background: -webkit-linear-gradient(top, #fbf073 0%,#f9e94d 10%,#f5dd11 50%,#f9e94d 90%,#fbf073 99%);
  background: -o-linear-gradient(top, #fbf073 0%,#f9e94d 10%,#f5dd11 50%,#f9e94d 90%,#fbf073 99%);
  background: -ms-linear-gradient(top, #fbf073 0%,#f9e94d 10%,#f5dd11 50%,#f9e94d 90%,#fbf073 99%);
  background: linear-gradient(to bottom, #fbf073 0%,#f9e94d 10%,#f5dd11 50%,#f9e94d 90%,#fbf073 99%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbf073', endColorstr='#fbf073',GradientType=0 );
}
.srt_type.silver {
    background: #cfcfcf;
    background: -moz-linear-gradient(left,  #cfcfcf 0%, #dfdfdf 51%, #ececec 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#cfcfcf), color-stop(51%,#dfdfdf), color-stop(100%,#ececec));
    background: -webkit-linear-gradient(left,  #cfcfcf 0%,#dfdfdf 51%,#ececec 100%);
    background: -o-linear-gradient(left,  #cfcfcf 0%,#dfdfdf 51%,#ececec 100%);
    background: -ms-linear-gradient(left,  #cfcfcf 0%,#dfdfdf 51%,#ececec 100%);
    background: linear-gradient(to right,  #cfcfcf 0%,#dfdfdf 51%,#ececec 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(...

JavaScript

$(document).ready(function() {
 
  $(".srt_slide_holder").owlCarousel({
      slideSpeed : 300,
      paginationSpeed : 400,
      singleItem:true
 
      // "singleItem:true" is a shortcut for:
      // items : 1, 
      // itemsDesktop : false,
      // itemsDesktopSmall : false,
      // itemsTablet: false,
      // itemsMobile : false
 
  });
 
});