JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jtcraddock.ie/boards/swipe.js"></script>
<body>
    <div id="logo-and-slider">
        <div id="logo">
            <img src="http://testjd.net46.net/title.png" alt="title" name="title" id="title">
                <h3> link 1 </h3>

         <h3> link 2 </h3>

         <h3> link 3 </h3>
            </div>
        <div class="controller" id="prev" onClick="slider.prev()">&lt;</div>
        <div id='slider' class='swipe'>
            <div class='swipe-wrap'>
                <div>
                    <img src="http://testjd.net46.net/1.jpg" alt="1" />
                </div>
                <div>
                    <img src="http://testjd.net46.net/2.jpg" alt="1" />
                </div>
                <div>
                    <img src="http://testjd.net46.net/3.jpg" alt="1" />
                </div>
            </div>
        </div>
        <div class="controller" id="next" onClick="slider.next()">&gt;</div>
         

    </div>
    <!-- /#logo-and-slider -->
</body>
<script src="swipe.js"></script>
<script>
    var slider = new Swipe(document.getElementById('slider'), {
        auto: 3000,
        continuous: true,
        speed: 300
    });
</script>

CSS

#logo-and-slider {
    max-width:990px;
    margin:auto;
}
#logo{
    float:left;
    width:40%;
}
#title {
    display: block;
    width:100%;
    height:initial;
}
#logo h3{
    clear:none;
    float:left;
    display:block;
    width:33%;
    text-align:center;
}
.controller {
    width:10%;
    padding-top:20%;
    float:left;
    text-align:center;
}
#slider {
    width:40%;
    float:left;
    border: 2px solid red;
    box-shadow: 0px 0px 4px 4px #000;
}
#slider img {
    width:100%;
    height:initial;
}
.swipe {
    overflow: hidden;
    visibility: hidden;
    position: relative;
}
.swipe-wrap {
    overflow: hidden;
    position: relative;
}
.swipe-wrap > div {
    float:left;
    width:100%;
    position: relative;
}
h3 {
    clear: left;
    color: red;
}
/* CSS Document */

#slider img {
    display: block;
}

JavaScript

#logo-and-slider{
  max-width:990px;
  margin:auto;

}

#title {
  display: block;
  width:40%;
  height:initial;
  float:left;
}
.controller{
 width:10%;
 padding-top:20%;
 float:left;
 text-align:center;

}
#slider{
  width:40%;
  float:left;
}
#slider img{
  width:100%;
  height:initial;
}

.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap > div {
  float:left;
  width:100%;
  position: relative;
}/* CSS Document */