JSFiddle - React, Tailwind, and code Playground

by andys627

HTML

<button id="click">click</button> <button id="reset">reset</button>
<div style="width: 100px; overflow: hidden; height: 100px;">
    <div id="slides" style="width: 12000px; height: 100px;position: relative;">
                <div style="width: 100px; height: 100px;float: left; text-align: center;">heyhheey<br />heyhheey<br />heyhheey<br />heyhheey<br /></div>
                <div style="width: 1000px; height: 100px;float: left; text-align: center;">heyhheey<br />heyhheey<br />heyhheey<br />heyhheey<br /></div>
                <div style="width: 1000px; height: 100px;float: left; text-align: center;">heyhheey<br />heyhheey<br />heyhheey<br />heyhheey<br /></div>
                <div style="width: 1000px; height: 100px;float: left; text-align: center;">heyhheey<br />heyhheey<br />heyhheey<br />heyhheey<br /></div>
        <div style="width: 1000px; height: 100px;float: left; text-align: center;">heyhheey<br />heyhheey<br />heyhheey<br />heyhheey<br /></div>
        <div style="width: 1000px; height: 100px;float: left; text-align: center;">heyhheey<br />heyhheey<br />heyhheey<br />heyhheey<br /></div>
        <div style="width: 500px; height: 100px;float: left; text-align: center;">heyhheey<br />heyhheey<br />heyhheey<br />heyhheey<br /></div>
        <div style="width: 500px; height: 100px;float: left; text-align: center;">heyhheey<br />heyhheey<br />heyhheey<br />heyhheey<br /></div>
        <div style="width: 500px; height: 100px;float: left; text-align: center;">heyhheey<br />heyhheey<br />heyhheey<br />heyhheey<br /></div>
        <div style="width: 500px; height: 100px;float: left; text-align: center;">heyhheey<br />heyhheey<br />heyhheey<br />heyhheey<br /></div>
        <div style="width: 500px; height: 100px;float: left; text-align: center;">heyhheey<br />heyhheey<br />heyhheey<br />heyhheey<br /></div>
        <div style="width: 500px; height: 100px;float: left; text-align: center;">heyhheey<br />heyhheey<br />heyhheey<br />heyhheey<br /></div>
       ...

JavaScript

$('#click').click(function() {
    $('#slides').animate({left: -10650}, 2500, 'swing');
});

$('#reset').click(function() {
    $('#slides').animate({left: 0}, 2500);
});