JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.0.5/js/swiper.min.js"></script>
<div role="main" class="ui-content oms-content" style="padding:0px;">
    <!-- Start Menu -->
    <div class="swiper-nav swiper-container">
        <div class="swiper-wrapper" id="swipecontainer"></div>
    </div>
    <div class="swiper-pages swiper-container" style="margin-bottom:100px;">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="swiper-container scroll-container">
                    <!--<div class="swiper-scrollbar"></div>-->
                    <div class="swiper-wrapper" id="datacontainer"></div>
                </div>
            </div>
        </div>
        <!-- End Menu -->
    </div>
</div>

CSS

.pageMidLogo {
    width:100%;
    float:left;
    text-align:center;
}
.createAccountWrap {
    width:100%;
    float:left;
    height:auto;
    /*padding:20px;*/
}
.createAccountWrap .h3_head {
    float: left;
    text-align: center;
    width: 100%;
    margin-bottom: 25px !important;
}
.iLabel {
    font-size: 13px;
    line-height: 16px;
    width: 100%;
    float: left;
}
.insideInput {
    width:100%;
    float:left;
    position:relative;
}
.tooltipIcon {
    width: 27px;
    height: 27px;
    position: absolute;
    right: 8px;
    top: 16px;
    background: #ababab;
    -webkit-border-radius: 25px;
    border-radius: 25px;
}
.tooltipIcon:before {
    font-size: 19px;
    margin-top: 4px;
    color:#fff;
}
.pop_tooltipIcon {
    font-size: 36px;
    text-align: center;
    width: 100%;
    float: left;
    margin-bottom: 10px;
    color:#d03e43;
}
.iconPinReload {
    /*background: url(../images/icon-capthareload.png) 10px 10px no-repeat #f6f6f6;
	border-left: 1px solid #ddd;
	width: 52px;
	height: 41px;*/
    position: absolute;
    top: -20px;
    right: 0px;
    cursor: pointer;
    font-size: 15px;
}
/*.iconPinReload:hover{
	background: url(../images/icon-capthareload.png) 10px 10px no-repeat #f0f0f0;
}*/
 .tpMenuWrap {
    position:absolute;
    top:0px;
    width: 88%;
}
.btMenuWrap {
    position:absolute;
    bottom:0px;
    width: 88%;
}
.ul_menu {
    padding:0px;
    margin:0px;
    width:100%;
    list-style:none;
}
.ul_menu li {
    padding: 10px 0px;
    margin: 0px;
    width: 100%;
    list-style: none;
    font-size: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.ul_menu li a {
    font-weight: 500;
    color:#ddd;
}
.ul_menu li a:hover {
    color:#fff;
}
.panelCloseBtn {
    float: right;
    margin-bottom: 15px;
    width: 100%;
    text-align: right;
    margin-top: 15px;
    font-size: 20px;
    color: #777 !important;
}
.panelCloseBtn:hover {
    color: #999 !important;
}
.homeListMenuWrap {
    padding:0px...

JavaScript

var T1categories = ["ONE", "TWO","THREE"];
    createhorizontaltab(T1categories);

    function createhorizontaltab(categories) {
        var categoryArr = categories;
        var favoriteresultag = '';
        
        
        
        var centervalue = Math.floor(categoryArr.length/2);
        
        
        
        
        for (var i = 0; i < categoryArr.length; i++) {
            if(i!=centervalue) {
                favoriteresultag += '<div class="swiper-slide"><span>' + categoryArr[i] + '</span></div>';
            }
            else {
                favoriteresultag += '<div class="swiper-slide" id="center"><span>' + categoryArr[i] + '</span></div>';
            }
        }
           
        $("#swipecontainer").append(favoriteresultag).trigger("create");
        $("#swipecontainer .swiper-slide").eq(centervalue).trigger("click");
     
    }
    $(document).on("click", ".swiper-slide", function() {
        
        alert('i am called');
       
    });