JSFiddle - React, Tailwind, and code Playground

by Vanss472

HTML

<script src="http://latitude18films.com/js/jquery.kwicks-1.5.1.pack.js"></script>
<ul class="kwicks">
            <li id="kwick_1"></li>
            <li id="kwick_2"></li>
        </ul>

CSS

.kwicks {
                /* recommended styles for kwicks ul container */
                display: block;
                list-style: none;
                position: relative;
                margin: 0;
                padding: 0;
            }
            .kwicks li {
                /* required, but the values are up to you (must be pixels) */
                width: 600px;
                height: 100px;
                /* margin should be same as spacing option */
                margin-right: 5px;

                /* do not change these */
                display: block;
                overflow: hidden;
                padding: 0;
                cursor: pointer;
                float: left;
            }
            #kwick_1 {
                background-color: #53b388;
            }
            #kwick_2 {
                background-color: #5a69a9;
            }
            #kwick_3 {
                background-color: #c26468;
            }
            #kwick_4 {
                background-color: #bf7cc7;
                margin-right: none;
            }

JavaScript

$(function() {
                $('.kwicks').kwicks({
                    max: 721,
                    spacing: 1
                });
            });