JSFiddle - React, Tailwind, and code Playground

by Kriem

HTML

<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css">
<div id="panel">
    <h1>Quis minima suscipit assumenda fugit itaque?</h1>
    <p>Lorem ipsum dolor sit amet, consectetur <em>adipisicing</em> elit.</p>
</div>

CSS

body
{
    margin: 20px;
}

h1
{
    font-size: 40px;
    transition: all 300ms;
    overflow: hidden;
    -webkit-animation: fadeIn 300ms;
}

#panel
{
    position: relative;
    border: 2px solid #333;
    width: 400px;
    margin: 0 auto;
    padding: 10px 20px;
    border-radius: 10px;
    -webkit-backface-visibility: hidden;
    
    transition: all 300ms;
}
#panel.clicked
{
    border: 5px dotted #333;
    width: 200px;
    padding: 5px 20px;
    border-radius: 5px;
    -webkit-transform:rotateZ(10deg);
}
#panel.clicked h1
{
    font-size: 20px;
    -webkit-animation: fadeIn 600ms;
}
#panel.clicked em
{
    display: none;
}

@-webkit-keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

JavaScript

$('#panel').click(function(e){
    
    $(this).toggleClass('clicked');
});