JSFiddle - React, Tailwind, and code Playground

by hakim

HTML

<h1>
    <div class="box-1"></div>
    <div class="box-2"></div>
<img...

CSS

h1 {
    margin: 50px;
}

h1 img {
    position: absolute;
}

h1 .box-1,
h1 .box-2 {
    position: absolute;
    width: 100px;
    height: 100px;
    -webkit-transition: all 0.5s cubic-bezier(.75,-0.91,.31,2);
}

h1 .box-1 {
    background: #512833;
}

h1 .box-2 {
    background: #934358;
}

h1.open .box-1 {
    -webkit-transform: rotate( 8deg ) translateX(8px);
}

h1.open .box-2 {
    -webkit-transform: rotate( 4deg ) translateX(4px);
}

JavaScript

document.querySelector( 'h1' ).onclick = function() {
    this.classList.toggle( 'open' );
}