JSFiddle - React, Tailwind, and code Playground

by HerrSerker

HTML

<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
Click on it
<div class="border"></div>

CSS

.border {
    margin: 50px;
    width: 50px;
    height: 50px;
    border-width: 50px;
    border-style: solid;
    border-top-color: green;
    border-right-color: yellow;
    border-bottom-color: red;
    border-left-color: blue;
    cursor: pointer
}

JavaScript

(function($) {
    var duration = 1000
    $('.border').click(function() {
        $(this)
            .animate({
                'border-top-width': 0,
                'margin-top': 100
            }, duration)
            .animate({
                'border-left-width': 30,
                'margin-left': 70
            }, duration)
            .animate({
                'border-right-width': 30
                
            }, duration)
            .animate({
                'border-bottom-width': 80
                
            }, duration)
            .animate({
                'width': 0
            }, duration)
            .animate({
                'height': 0,
                'margin-top': 150
            }, duration)
            .animate({
                'borderRightColor': 'transparent'
            }, duration)
            .animate({
                'borderLeftColor': 'transparent'
            }, duration)
            
    }).end()
}(jQuery))