JSFiddle - React, Tailwind, and code Playground

by BenEllis

HTML

<button>
    Click me
</button>

<div class="container">
    <div class="child"></div>
    <div class="child2"></div>
    <div class="child"></div>
    <div class="child2"></div>
    <div class="child"></div>
    <div class="child2"></div>
    <div class="child"></div>
    <div class="child2"></div>
    <div class="child"></div>
    <div class="child2"></div>
    <div class="child"></div>
    <div class="child2"></div>
    <div class="child"></div>
    <div class="child2"></div>
    <div class="child"></div>
    <div class="child2"></div>
    <div class="child"></div>
    <div class="child2"></div>
    <div class="child"></div>
    <div class="child2"></div>
    <div class="child"></div>
    <div class="child2"></div>
    <div class="child"></div>
    <div class="child2"></div>
    <div class="child"></div>
    <div class="child2"></div>
    <div class="child"></div>
    <div class="child2"></div>
    <div class="child"></div>
    <div class="child2"></div>
    <div class="child"></div>
    <div class="child2"></div>
    <div class="child"></div>
    <div class="child2"></div>
    <div class="child"></div>
    <div class="child2"></div>
    <div class="child"></div>
    <div class="child2"></div>
    <div class="child"></div>
    <div class="child2"></div>
    <div class="child"></div>
    <div class="child2"></div>
    <div class="child"></div>
    <div class="child2"></div>
    <div class="child"></div>
    <div class="child2"></div>
    <div class="child"></div>
    <div class="child2"></div>
    <div class="child"></div>
    <div class="child2"></div>
    <div class="child"></div>
    <div class="child2"></div>
    <div class="child"></div>
    <div class="child2"></div>
    <div class="child"></div>
    <div class="child2"></div>
    <div class="child"></div>
    <div class="child2"></div>
    <div class="child"></div>
    <div class="child2"></div>
    <div class="child"></div>
    <div class="child2"></div>
    <div class="child"></div>
    <div...

CSS

.container {
    height: 300px;
    overflow: auto;
}

.shrinkMe {
   height: 10px;
}

.child {
    height: 5px;
    width: 100px;
    background-color: red;
}

.child2 {
    height: 5px;
    width: 100px;
    background-color: blue;
}

JavaScript

$('button').click(function () {
    $('div.container').addClass('shrinkMe', { duration: 2000, children: true });
});