JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="champagne">
                <li><input type="checkbox" name="example" value="東京都" checked>東京都</li>
                <li>鳥取県</li>
                <li>和歌山県</li>
                <li>大阪府</li>
                <li>三重県</li>
                <li>奈良県</li>
                <li>富山県</li>
                <li>神奈川県</li>
                <li>岐阜県</li>
                <li>兵庫県</li>
                <li>山梨県</li>
                <li>愛媛県</li>
                <li>石川県</li>
                <li>千葉県</li>
                <li>愛知県</li>
                <li>新潟県</li>
                <li>埼玉県</li>
                <li>静岡県</li>
                <li>滋賀県</li>
                <li>京都府</li>
                <li>福井県</li>
                <li>長野県</li>
                <li>宮城県</li>
                <li>山形県</li>
            </ul>

CSS

ul.champagne {
  clear: both;
  font-size: 20px;
  font-weight: bold;
  height: auto;
  list-style: none;
  margin: 30px auto;
  padding: 0;
  position: relative;
  width: 95%;
}

ul.champagne li {
  background: #fff;
  border: 1px solid #ddd;
  height: 30px;
  color:#aaa;
  float: left;
  padding: 20px;
  text-align: center;
  width: 100px;
}
ul.champagne div.hidden {
  display: none;
}

JavaScript

// Champagne.js, a jQuery plugin to randomize the display of objects in a grid
// by Sarah Canieso for Fresh Tilled Soil, http://freshtilledsoil.com
//
// Version 0.0.6
// Full source at https://github.com/freshtilledsoil/champagne
// Copyright (c) 2012 Fresh Tilled Soil http://freshtilledsoil.com

// MIT License, http://www.opensource.org/licenses/mit-license.php
(function($) {
    $.fn.champagne = function(options) {
        var settings = $.extend({
            beginning_delay: 300,
            delay_between: 50,
            duration: 500,
            onFinish: function() {}
        }, options);

        return this.each(function() {
            // Wrap each li's contents in a <div class="hidden"></div>
            $(this).children().each(function() {
                $(this).contents().wrap("<div class='hidden'></div>");
            });

            var array = $(this).children().children("div.hidden");

            // Begin animation
            setTimeout(function() {
                showRandom();
            }, settings.beginning_delay);

            function showRandom() {
                var random = Math.floor(Math.random() * array.length);

                // Fade in random element
                $(array[random]).fadeIn(settings.duration);
                array.splice(random, 1);

                if (array.length > 0) {
                    // Continue animating elements until array is empty
                    setTimeout(function() {
                        showRandom();
                    }, settings.delay_between);
                } else {
                    // onFinish callback
                    setTimeout(function() {
                        settings.onFinish.call(this);
                    }, settings.duration);
                }
            }
        });
    };
})(jQuery);
 $("ul.champagne").champagne();