JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jlmrealty.com/bookshelf/js/jquery.easing.1.3.js"></script>
<script src="http://jlmrealty.com/bookshelf/js/jquery.bookshelfslider.min.js"></script>
<link rel="stylesheet" href="http://jlmrealty.com/bookshelf/css/bookshelf_slider.css">
<link rel="stylesheet" href="http://jlmrealty.com/bookshelf/css/skin01.css">

<div id="bookshelf_slider">

    <div class="panel_title">
        <div class="selected_title_box"><div class="selected_title">Selected Title</div></div>
        
        <div class="menu_top">
            <ul>
                <li class="show_hide_titles"><a href="#">Titles</a></li>
                <li class="show_hide_icons"><a href="#">Icons</a></li>
            </ul>
        </div>
    </div><!-- .panel_title -->
    
    <div class="panel_slider">
    	<div class="panel_items">
        
            <div class="slide_animate">
            	<div class="products_box" id="products_box_1">
                    <div class="product" data-type="" data-popup="true" data-url="../../flip-data/atest/t1/index.html" title="$459"><img src="images/phone.png" alt="" width="47" height="89" /></div>
                    <div class="product" data-type="" data-popup="true" data-url="images/phone_large.jpg" title="$789"><img src="images/phone.png" alt="" width="47" height="89" /></div>
					<div class="product" data-type="" data-popup="true" data-url="images/phone_large.jpg" title="$343"><img src="images/phone2.png" alt="" width="43" height="84" /></div>
                    <div class="product" data-type="book" data-popup="true" data-url="http://vimeo.com/25348908" title="Vimeo Video"><img src="images/book.png" alt="" width="81" height="107" /></div>
                    <div class="product" data-type="book" data-popup="true" data-url="images/book_large.png" title="Book"><img src="images/book2.png" alt="" width="100" height="107" /></div>
                    <div class="product" data-type="magazine" data-popup="true" data-url="images/magazine_large.png"...

JavaScript

//define custom parameters
	$.bookshelfSlider('#bookshelf_slider', {
		'item_width': 605,
		'item_height': 720,
		'products_box_margin_left': 30,
		'product_title_textcolor': '#ffffff',
		'product_title_bgcolor': '#c33b4e',
		'product_margin': 30,
		'product_show_title': true,
		'show_title_in_popup': true,
		'show_selected_title': true,
		'show_icons': true,
		'buttons_margin': 15,
		'buttons_align': 'center', // left, center, right
		'slide_duration': 800,
		'slide_easing': 'easeInOutExpo',
		'arrow_duration': 800,
		'arrow_easing': 'easeInOutExpo',
		'video_width_height': [600,600],
		'iframe_width_height': [600,600]
		}
	);