JSFiddle - React, Tailwind, and code Playground

HTML

<script>
    $(function () {
      $("#group1, #group2, #group3, #group4").responsiveSlides({
        speed: 1500,
		timeout: 4500
      });
    });
  </script>


  <div id="wrapper">

    <!-- Diashow 1 -->
    <ul class="d_show" id="group1">
      <li><img src="http://fs2.directupload.net/images/150819/fcloijlm.jpg" alt=""></li>
      <li><img src="http://fs2.directupload.net/images/150819/9yyjv43k.jpg" alt=""></li>
      <li><img src="http://fs1.directupload.net/images/150819/rnkm5d7y.jpg" alt=""></li>
	  <li><img src="http://fs1.directupload.net/images/150819/pzql3hs9.jpg" alt=""></li>
    </ul>
    <!-- Diashow 2 -->
    <ul class="d_show" id="group2">
      <li><img src="http://fs1.directupload.net/images/150819/pzql3hs9.jpg" alt=""></li>
      <li><img src="http://fs1.directupload.net/images/150819/rnkm5d7y.jpg" alt=""></li>
    </ul>	
    <!-- Diashow 3 -->
    <ul class="d_show" id="group3">
      <li><img src="http://fs1.directupload.net/images/150819/rnkm5d7y.jpg" alt=""></li>
      <li><img src="http://fs2.directupload.net/images/150819/fcloijlm.jpg" alt=""></li>
      <li><img src="http://fs1.directupload.net/images/150819/pzql3hs9.jpg" alt=""></li>
    </ul>	
    <!-- Diashow 4 -->
    <ul class="d_show" id="group4">
      <li><img src="http://fs2.directupload.net/images/150819/9yyjv43k.jpg" alt=""></li>
      <li><img src="http://fs2.directupload.net/images/150819/fcloijlm.jpg" alt=""></li>
      <li><img src="http://fs1.directupload.net/images/150819/rnkm5d7y.jpg" alt=""></li>
    </ul>

  </div>

CSS

*            {margin:0; padding:0}
body         {background:grey; margin:20px auto 0; max-width:800px}
#wrapper     {padding:20px}
.d_show      {margin:0 auto 40px; position:relative; list-style:none; overflow:hidden; width:100%}
.d_show li   {-webkit-backface-visibility:hidden; position:relative; left:0; top:0px; display:none; width:100%}
.d_show img  {display:block; height:auto; float:left; width:100%}

JavaScript

/* http://responsiveslides.com v1.54 */
(function(c, I, B) {
    c.fn.responsiveSlides = function(l) {
        var a = c.extend({
            auto: !0,
            speed: 500,
            timeout: 4E3,
            pager: !1,
            nav: !1,
            random: !1,
            pause: !1,
           /* pauseControls: !0,
            prevText: "Previous",
            nextText: "Next", */
            maxwidth: "",
            navContainer: "",
            manualControls: "",
            namespace: "rslides",
            before: c.noop,
            after: c.noop 
        }, l);
        return this.each(function() {
            B++;
            var f = c(this),
                s, r, t, m, p, q, n = 0,
                e = f.children(),
                C = e.size(),
                h = parseFloat(a.speed),
                D = parseFloat(a.timeout),
                u = parseFloat(a.maxwidth),
                g = a.namespace,
                d = g + B,
                E = g + "_nav " + d + "_nav",
                v = g + "_here",
                j = d + "_on",
                w = d + "_s",
                k = c("<ul class='" + g + "_tabs " + d + "_tabs' />"),
                x = {
                    "float": "left",
                    position: "relative",
                    opacity: 1,
                    zIndex: 2
                },
                y = {
                    "float": "none",
                    position: "absolute",
                    opacity: 0,
                    zIndex: 1
                },
                F = function() {
                    var b = (document.body || document.documentElement).style,
                        a = "transition";
                    if ("string" === typeof b[a]) return !0;
                    s = ["Moz", "Webkit", "Khtml", "O", "ms"];
                    var a = a.charAt(0).toUpperCase() + a.substr(1),
                        c;
                    for (c = 0; c < s.length; c++)
                        if...