JSFiddle - React, Tailwind, and code Playground

by vaibhav saxena

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="blind" class="box" style="display: block;">&nbsp;</div>

CSS

.box {
  background-color: #666;
  margin: 0.5em;
  width: 100px;
  height: 100px;
}

JavaScript

$('#but-blind').toggle(
    function() {
        $('#blind').hide('blind', { direction: 'vertical' }, 1000);
    },
    function() {
        $('#blind').show('blind', { direction: 'horizontal' }, 500);
    }
);/*
$('#but-clip').toggle(
    function() {
        $('#clip').hide('clip', { direction: 'vertical' }, 1000);
    },
    function() {
        $('#clip').show('clip', { direction: 'horizontal' }, 500);
    }
);
$('#but-drop').toggle(
    function() {
        $('#drop').hide('drop', { direction: 'right' }, 1000);
    },
    function() {
        $('#drop').show('drop', { direction: 'down' }, 500);
    }
);
$('#but-explode').toggle(
    function() {
        $('#explode').hide('explode', {}, 1000);
    },
    function() {
        $('#explode').show('explode', { pieces: 30 }, 500);
    }
);
$('#but-fold').toggle(
    function() {
        $('#fold').hide('fold', {}, 1000);
    },
    function() {
        $('#fold').show('fold', {}, 500);
    }
);
$('#but-puff').toggle(
    function() {
        $('#puff').hide('puff', {}, 1000);
    },
    function() {
        $('#puff').show('puff', {}, 500);
    }
);
$('#but-slide').toggle(
    function() {
        $('#slide').hide('slide', { direction: 'right' }, 1000);
    },
    function() {
        $('#slide').show('slide',  direction: 'down' {}, 500);
    }
);
$('#but-scale').toggle(
    function() {
        $('#scale').effect('scale', { percent: 50 }, 1000);
    },
    function() {
        $('#scale').effect('scale', { percent: 200 }, 500);
    }
);
$('#but-scale2').toggle(
    function() {
        $('#scale2').hide('scale', {}, 1000);
    },
    function() {
        $('#scale2').show('scale', { percent: 100 }, 500);
    }
);
$('#but-scale3').toggle(
    function() {
        $('#scale3').effect('scale', { percent: 200, direction: 'horizontal' }, 1000);
    },
    function() {
        $('#scale3').effect('scale', { percent: 50, direction: 'horizontal'  }, 500);
    }
);
 
$('#but-pulsate').toggle(
    function() {
       ...