JSFiddle - React, Tailwind, and code Playground

by pavloschris

HTML

<script src="https://raw.github.com/sustainablepace/mobipick/master/external/jquery-1.9.1.min.js"></script>
<div class="verticalslider" id="textExample">
    <ul class="verticalslider_tabs right">
        <li><a href="#">Catedra de Limba si Literatura Romana</a>

        </li>
        <li><a href="#">Catedra de Matematica</a>

        </li>
        <li><a href="#">Catedra de Informatica</a>

        </li>
        <li><a href="#">Limba engleza</a>

        </li>
        <li><a href="#">Limba Germana</a>

        </li>
    </ul>
    <ul class="verticalslider_tabs">
        <li><a href="#">Catedra de Limba si Literatura Romana</a>

        </li>
        <li><a href="#">Catedra de Matematica</a>

        </li>
        <li><a href="#">Catedra de Informatica</a>

        </li>
        <li><a href="#">Limba engleza</a>

        </li>
        <li><a href="#">Limba Germana</a>

        </li>
    </ul>
    <ul class="verticalslider_contents">
        <li>
            	<h2>Catedra de Limba si Literatura Romana</h2>

            </br>
            <p id="profesor">Popa Alina</br>Nadia Pascu</br>
            </p>
        </li>
        <li>
            	<h2>Catedra de Matematica</h2>

            </br>
            <p id="profesor">Ciubotariu Boer-Vlad</br>Diaconu Ilie</br>Gorcea Violin</br>
            </p>
        </li>
        <li>
            	<h2>informatica</h2>

            <p id="profesor">Wainblat Gabriela</br>Nistor Ancuta</br>
        </li>
        <li>
            	<h2>Limba Engleza</h2>

            <p id="profesor">Wainblat Gabriela</br>Nistor Ancuta</br>
        </li>
        <li>
            	<h2>Germana</h2>

            <p id="profesor">Wainblat Gabriela</br>Nistor Ancuta</br>
        </li>
        <li>
            	<h2>Germana</h2>

            <p id="profesor">Wainblat Gabriela</br>Nistor Ancuta</br>
        </li>
        <li>
            	<h2>Catedra de Limba si Literatura Romana</h2>

            </br>
            <p id="profesor">Popa Alina</br>Nadia...

CSS

@charset"utf-8";

/* Container */
 .verticalslider {
    overflow: hidden;
    width: 1000px;
    margin: 0 auto;
    margin-top: 25px;
    height: 100%;
    border: 1px solid #666666;
}
/* Tabs */
 .verticalslider_tabs {
    float: left;
    width: 220px;
}
.verticalslider_tabs.right {
    float:right;
}
.verticalslider_tabs, .verticalslider_tabs li {
    margin: 0px;
    padding: 0px;
}
.verticalslider_tabs li {
    list-style-type: none;
}
.verticalslider_tabs a:link, .verticalslider_tabs a:visited {
    display: block;
    width: 200px;
    padding: 14px 10px 6px 10px;
    background: url(../img/tab-activitati/tabBG.jpg) bottom repeat-x;
    background-color: #eeeeee;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 16px;
    font-weight: bold;
    color: #333333;
    border-bottom: 1px solid #666666;
    border-right: 1px solid #666666;
    text-decoration: none;
}
.verticalslider_tabs a:hover, .verticalslider_tabs a:active {
    background: url(../img/tab-activitati/tabHoverBG.jpg) bottom repeat-x;
    background-color: #fcfcfc;
}
.verticalslider_tabs li:first-child a:link, .verticalslider_tabs li:first-child a:visited {
}
.verticalslider_tabs .activeTab a:link, .verticalslider_tabs .activeTab a:visited {
    background: #ffffff;
    border-right: 1px solid #ffffff;
}
.verticalslider_tabs .activeTab a:hover, .verticalslider_tabs .activeTab a:active {
    background: #ffffff;
    border-right: 1px solid #ffffff;
}
.verticalslider .arrow {
    width: 27px;
    height: 60px;
    position: absolute;
    z-index: 100;
    margin-left: 220px;
    margin-top: -55px;
}
/* Contents */
 .verticalslider_contents {
    display: block;
    margin: 0px;
    padding: 0px;
    overflow:hidden;
}
.verticalslider_contents li {
    margin: 0px;
    padding: 0px;
    width: 770px;
    padding: 0px;
    display: none !important;
    position: relative;
    list-style-type: none;
    overflow: auto;
    height: initial !important;
    min-height: 200px...

JavaScript

(function ($) {
	    $.fn.verticaltabs = function (options) {
	        var defaults = {
	            speed: 500,
	            slideShow: true,
	            slideShowSpeed: 1000,
	            activeIndex: 0,
	            playPausePos: "bottomRight",
	            pauseOnHover: true
	        };
	        var options = $.extend(defaults, options);
	        return this.each(function () {
	            var verticaltabs = $(this);
	            var tabs = $(verticaltabs).children(".verticalslider_tabs").children();
	            var contents = $(verticaltabs).children(".verticalslider_contents").children();
	            var sliderInterval;
	            var arrowBlock = "<div class=\"arrow\">&nbsp;</div>";
	            var activeIndex = defaults.activeIndex;
	            var slideShow = options.slideShow;
	            var timeout;
	            var totalHeight;
	            $(contents[defaults.activeIndex]).addClass("activeContent");
	            $(tabs[activeIndex]).addClass("activeTab").append(arrowBlock);
	            totalHeight = $(tabs).length * $(".verticalslider_tabs a").outerHeight();
	            $(".verticalslider_contents li", verticaltabs).css({
	                height: totalHeight + "px"
	            });
	            if (options.slideShow) {
	                $(verticaltabs).children(".verticalslider_contents").append("<div class=\"playPause\"><div class=\"play\"><a href=\"#\"></a></div><div class=\"pause\"><a href=\"#\"></a></div></div>");
	                switch (options.playPausePos) {
	                    case "topRight":
	                        $(".verticalslider .playPause").css({
	                            marginTop: "0px",
	                            marginLeft: $(".verticalslider_contents").width() - $(".verticalslider .playPause a").width()
	                        });
	                        break;
	                    case "topLeft":
	                        $(".verticalslider .playPause").css({
	                            marginTop: "0px",
	   ...