JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<div id="box"></div>

CSS

@-webkit-keyframes curl {
    0%   { 
        width:100%;
        border-top-left-radius: 40px 10px;
        border-bottom-left-radius: 40px 10px;
        border-top-right-radius: 200px 10px;
        border-bottom-right-radius: 200px 10px; 
    }
    10%  {
        border-top-left-radius: 100px 60px;
        border-bottom-left-radius: 100px 60px;
        border-top-right-radius: 200px 10px;
        border-bottom-right-radius: 200px 10px;
    }
    100% { width: 0%; }
}
@-moz-keyframes curl {
    0%   { 
        width:100%;
        border-top-left-radius: 40px 10px;
        border-bottom-left-radius: 40px 10px;
        border-top-right-radius: 200px 10px;
        border-bottom-right-radius: 200px 10px; 
    }
    10%  {
        border-top-left-radius: 100px 60px;
        border-bottom-left-radius: 100px 60px;
        border-top-right-radius: 200px 10px;
        border-bottom-right-radius: 200px 10px;
    }
    100% { width: 0%; }
}
@-o-keyframes curl {
    0%   { 
        width:100%;
        border-top-left-radius: 40px 10px;
        border-bottom-left-radius: 40px 10px;
        border-top-right-radius: 200px 10px;
        border-bottom-right-radius: 200px 10px; 
    }
    10%  {
        border-top-left-radius: 100px 60px;
        border-bottom-left-radius: 100px 60px;
        border-top-right-radius: 200px 10px;
        border-bottom-right-radius: 200px 10px;
    }
    100% { width: 0%; }
}
@keyframes curl {
    0%   { 
        width:100%;
        border-top-left-radius: 40px 10px;
        border-bottom-left-radius: 40px 10px;
        border-top-right-radius: 200px 10px;
        border-bottom-right-radius: 200px 10px; 
    }
    10%  {
        border-top-left-radius: 100px 60px;
        border-bottom-left-radius: 100px 60px;
        border-top-right-radius: 200px 10px;
        border-bottom-right-radius: 200px 10px;
    }
    100% { width: 0%; }
}



#box{
    
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
   ...

JavaScript

$(document).on('click', '#box', function(){
    $(this).toggleClass('peel');
});