JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/KevinBatdorf/codaslider/master/js/jquery.coda-slider-3.0.js"></script>
<script src="https://raw.github.com/KevinBatdorf/codaslider/master/js/jquery-ui-1.8.20.custom.min.js"></script>
<h2>This is first slider</h2>
<div class='coda-slider' id='slider1'>
        <div>
            <h2 class="title">Panel 1</h2>

            <p>Content</p>
        </div>

        <div>
            <h2 class="title">Panel 2</h2>

            <p>Content</p>
        </div>
    </div>
<h2>I want the below slider in different width, how is this possible?</h2>
    <div class='coda-slider' id='slider2'>
        <div>
            <h2 class="title">Panel 1</h2>

            <p>Content</p>
        </div>

        <div>
            <h2 class="title">Panel 2</h2>

            <p>Content</p>
        </div>
    </div>

CSS

.coda-slider-wrapper {
clear:both;
overflow:auto;
padding:20px 0;
}

.coda-slider-wrapper .coda-slider {
background:#f2f2f2;
width:200px;
float:left;
overflow:hidden;
position:relative;
}

.coda-slider-wrapper .coda-slider .panel {
width:200px;
}

.coda-slider-wrapper .coda-slider .panel .panel-wrapper {
padding:20px;
}

.coda-slider-wrapper .coda-nav .current {
background:#0090FF;
}

.coda-slider-wrapper .coda-nav a {
background:#000;
color:#fff;
margin-right:1px;
padding:3px 6px;
}

.coda-slider-wrapper .coda-nav a:hover {
background:#000;
color:#fff;
text-shadow:none;
}

.coda-slider-wrapper .coda-nav-left a,.coda-slider-wrapper .coda-nav-right a {
background:#000;
color:#fff;
width:100px;
display:block;
text-align:center;
text-decoration:none;
padding:5px;
}

.coda-slider-wrapper .coda-nav-left-arrow {
width:25px;
height:25px;
background:url(../img/arrow.png) no-repeat top left;
margin-top:50px;
}

.coda-slider-wrapper .coda-nav-left-arrow a {
width:0;
height:0;
border:none;
}

.coda-slider-wrapper .coda-nav-left-arrow:hover {
background:url(../img/arrow.png) no-repeat bottom left;
}

.coda-slider-wrapper .coda-nav-right-arrow {
width:25px;
height:25px;
background:url(../img/arrow.png) no-repeat top right;
margin-top:50px;
}

.coda-slider-wrapper .coda-nav-right-arrow a {
width:0;
height:0;
background:none;
margin-top:0;
border:none;
}

.coda-slider-wrapper .coda-nav-right-arrow:hover {
background:url(../img/arrow.png) no-repeat bottom right;
}

.coda-slider-wrapper .coda-nav-left-arrow:active,.coda-slider-wrapper .coda-nav-right-arrow:active {
margin-top:55px;
}

.coda-slider-wrapper .loading {
height:100%;
text-align:center;
padding:20px;
}

.arrows .coda-slider {
margin:0 10px;
}

.coda-slider-wrapper .coda-slider .panel-container {
position:relative;
}

.coda-slider-wrapper .coda-slider .panel-container .panel {
display:block;
float:left;
}

.coda-slider-wrapper .coda-nav ul...

JavaScript

$('#slider1').codaSlider();
$('#slider2').codaSlider();