JSFiddle - React, Tailwind, and code Playground

by Alex

HTML

<link rel="stylesheet" href="http://zdmob.ru/wp-content/themes/zdmob/styles/owl.carousel.css?ver=4.5.2">
<div class="owl2"><a class="item" href="http://zdmob.ru/?p=497" style="width: 293px">

                    <img src="http://zdmob.ru/wp-content/uploads/2016/05/LOGO_-CLIENTS-5-e1466588941371.png" class="grayscale grayscale-fade" width="" height="">

                </a><a class="item" href="http://zdmob.ru/?p=495" style="width: 61px">

                    <img src="http://zdmob.ru/wp-content/uploads/2016/05/LOGO_-CLIENTS-6-e1466589042878.png" class="grayscale grayscale-fade" width="" height="">

                </a><a class="item" href="http://zdmob.ru/?p=123" style="width: 266px">

                    <img src="http://zdmob.ru/wp-content/uploads/2016/06/LOGO_-CLIENTS-11-e1466589109880.png" class="grayscale grayscale-fade" width="" height="">

                </a><a class="item" href="http://zdmob.ru/?p=121" style="width: 42px">

                    <img src="http://zdmob.ru/wp-content/uploads/2016/05/LOGO_-CLIENTS-7-e1466589193681.png" class="grayscale grayscale-fade" width="" height="">

                </a><a class="item" href="http://zdmob.ru/?p=119" style="width: 141px">

                    <img src="http://zdmob.ru/wp-content/uploads/2016/05/clients_img1-e1466589230594.png" class="grayscale grayscale-fade" width="" height="">

                </a><a class="item" href="http://zdmob.ru/?p=117" style="width: 45px">

                    <img src="http://zdmob.ru/wp-content/uploads/2016/06/LOGO_-PIK-e1466589286563.png" class="grayscale grayscale-fade" width="" height="">

                </a></div>

CSS

.owl2 {width:400px;}
/* 
 *  Owl Carousel - Animate Plugin
 */
 
.owl-carousel {
	margin-top: 30px;
}
.owl-carousel .animated {
  -webkit-animation-duration: 1000ms;
  animation-duration: 1000ms;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.owl-carousel img {
	display: block;
	margin: 0 auto;
}
.owl-controls {
	display: block !important;
}
.owl-dots {
	display: none !important;
}

.owl-nav .owl-prev {
	left: 0px;
	background: url(images/corusel_left.png) no-repeat;
}

.owl-nav .owl-next {
	right: 0px;
	background: url(images/corusel_right.png) no-repeat;
}

.owl-nav div {
	position: absolute;
	top: 50%;
	outline: 0;
	width: 25px;
	height: 61px;
	text-indent: -9999px;
	z-index: 9999;
	margin-top: -30px;
}


.corusel .owl-carousel {
	margin-top: 0px;
	padding-top: 20px;
}

.corusel .owl-nav .owl-prev {
	left: -30px;
	background: url(images/corusel_left2.jpg) no-repeat;
}

.corusel .owl-nav .owl-next {
	right: -30px;
	background: url(images/corusel_right2.jpg) no-repeat;
}


.corusel .owl-nav div {
	position: absolute;
	top: 50%;
	outline: 0;
	width: 40px;
	height: 100px;
	text-indent: -9999px;
	z-index: 9999;
	margin-top: -40px;
}




.owl-carousel .owl-animated-in {
  z-index: 0;
}
.owl-carousel .owl-animated-out {
  z-index: 1;
}
.owl-carousel .fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* 
 * 	Owl Carousel - Auto Height Plugin
 */
.owl-height {
  -webkit-transition: height 500ms ease-in-out;
  -moz-transition: height 500ms ease-in-out;
  -ms-transition: height 500ms ease-in-out;
  -o-transition: height 500ms ease-in-out;
  transition: height 500ms ease-in-out;
}

/* 
 *  Core Owl Carousel CSS File
 */
.owl-carousel {
  display: none;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  /* position relative and z-index fix webkit...

JavaScript

!function(a,b,c,d){function e(b,c){this.settings=null,this.options=a.extend({},e.Defaults,c),this.$element=a(b),this.drag=a.extend({},m),this.state=a.extend({},n),this.e=a.extend({},o),this._plugins={},this._supress={},this._current=null,this._speed=null,this._coordinates=[],this._breakpoint=null,this._width=null,this._items=[],this._clones=[],this._mergers=[],this._invalidated={},this._pipe=[],a.each(e.Plugins,a.proxy(function(a,b){this._plugins[a[0].toLowerCase()+a.slice(1)]=new b(this)},this)),a.each(e.Pipe,a.proxy(function(b,c){this._pipe.push({filter:c.filter,run:a.proxy(c.run,this)})},this)),this.setup(),this.initialize()}function f(a){if(a.touches!==d)return{x:a.touches[0].pageX,y:a.touches[0].pageY};if(a.touches===d){if(a.pageX!==d)return{x:a.pageX,y:a.pageY};if(a.pageX===d)return{x:a.clientX,y:a.clientY}}}function g(a){var b,d,e=c.createElement("div"),f=a;for(b in f)if(d=f[b],"undefined"!=typeof e.style[d])return e=null,[d,b];return[!1]}function h(){return g(["transition","WebkitTransition","MozTransition","OTransition"])[1]}function i(){return g(["transform","WebkitTransform","MozTransform","OTransform","msTransform"])[0]}function j(){return g(["perspective","webkitPerspective","MozPerspective","OPerspective","MsPerspective"])[0]}function k(){return"ontouchstart"in b||!!navigator.msMaxTouchPoints}function l(){return b.navigator.msPointerEnabled}var...