JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="kwicks horizontal" >
    <li id="kwick_1"></li>
    <li id="kwick_2"></li>
    <li id="kwick_3"></li>
    <li id="kwick_4"></li>
</ul>

<input id="clickIt" type="checkbox">Click

CSS

/* This css file serves as a template for styling your kwicks.  Feel free to modify, but please make note of the comments - some of them are important. */
body {
    background-color: #1d1e21;
    color: #ddd;
    padding: 50px;
}
.kwicks {
    /* recommended styles for kwicks ul container */
    list-style: none;
    position: relative;
    margin: 0;
    padding: 0;
}
.kwicks li{
    /* these are required, but the values are up to you (must be pixel) */
    width: 125px;
    height: 100px;
    
    /*do not change these */
    display: block;
    overflow: hidden;
    padding: 0;  /* if you need padding, do so with an inner div (or implement your own box-model hack) */
}
.kwicks.horizontal li {
    /* This is optional and will be disregarded by the script.  However, it should be provided for non-JS enabled browsers. */
    margin-right: 5px; /*Set to same as spacing option. */    
    float: left;
}
.kwicks.vertical  li{
    /* This is optional and will be disregarded by the script.  However, it should be provided for non-JS enabled browsers. */
    margin-bottom: 5px; /*Set to same as spacing option. */    
}

#kwick_1 { 
    background-color: #53b388;
}
#kwick_2 {
    background-color: #5a69a9;
}
#kwick_3 {
    background-color: #c26468;
}
#kwick_4 { 
    background-color: #bf7cc7;
}
.kwicks.horizontal #kwick_4 {
    margin-right: none; /* cancel margin on last kiwck (if you set a margin above) */
}
.kwicks.vertical #kwick_4 {
    margin-bottom: none; /* cancel margin on last kiwck (if you set a margin above) */
}

JavaScript

/*
    Kwicks for jQuery (version 1.5.1)
    Copyright (c) 2008 Jeremy Martin
    http://www.jeremymartin.name/projects.php?project=kwicks
    
    Licensed under the MIT license:
        http://www.opensource.org/licenses/mit-license.php

    Any and all use of this script must be accompanied by this copyright/license notice in its present form.
*/
(function($){$.fn.kwicks=function(n){var p={isVertical:false,sticky:false,defaultKwick:0,event:'mouseover',spacing:0,duration:500};var o=$.extend(p,n);var q=(o.isVertical?'height':'width');var r=(o.isVertical?'top':'left');return this.each(function(){container=$(this);var k=container.children('li');var l=k.eq(0).css(q).replace(/px/,'');if(!o.max){o.max=(l*k.size())-(o.min*(k.size()-1))}else{o.min=((l*k.size())-o.max)/(k.size()-1)}if(o.isVertical){container.css({width:k.eq(0).css('width'),height:(l*k.size())+(o.spacing*(k.size()-1))+'px'})}else{container.css({width:(l*k.size())+(o.spacing*(k.size()-1))+'px',height:k.eq(0).css('height')})}var m=[];for(i=0;i<k.size();i++){m[i]=[];for(j=1;j<k.size()-1;j++){if(i==j){m[i][j]=o.isVertical?j*o.min+(j*o.spacing):j*o.min+(j*o.spacing)}else{m[i][j]=(j<=i?(j*o.min):(j-1)*o.min+o.max)+(j*o.spacing)}}}k.each(function(i){var h=$(this);if(i===0){h.css(r,'0px')}else if(i==k.size()-1){h.css(o.isVertical?'bottom':'right','0px')}else{if(o.sticky){h.css(r,m[o.defaultKwick][i])}else{h.css(r,(i*l)+(i*o.spacing))}}if(o.sticky){if(o.defaultKwick==i){h.css(q,o.max+'px');h.addClass('active')}else{h.css(q,o.min+'px')}}h.css({margin:0,position:'absolute'});h.bind(o.event,function(){var c=[];var d=[];k.stop().removeClass('active');for(j=0;j<k.size();j++){c[j]=k.eq(j).css(q).replace(/px/,'');d[j]=k.eq(j).css(r).replace(/px/,'')}var e={};e[q]=o.max;var f=o.max-c[i];var g=c[i]/f;h.addClass('active').animate(e,{step:function(a){var...