JSFiddle - React, Tailwind, and code Playground

by Brodingo

HTML

<div>
    <div>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <div>
                                <div>
                                    <div>
                                        <div>
                                            <div>
                                                <div>
                                                    <div>
                                                        <div>Happy<br> Birthday<br>Fagit</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

body {
    background-color: #333;
    overflow: hidden;
    font-family: papyrus;
    text-align: center;
}

div {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: #eee;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4);
       -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4);
            box-shadow: 0 1px 2px rgba(0,0,0,.4);
     -moz-transition: all 0.3s ease-out;  
       -o-transition: all 0.3s ease-out;  
  -webkit-transition: all 0.3s ease-out;  
      -ms-transition: all 0.3s ease-out;  
          transition: all 0.3s ease-out;  
}

div div {
     -moz-transform: scale(0.8);  
       -o-transform: scale(0.8);  
  -webkit-transform: scale(0.8);  
      -ms-transform: scale(0.8);  
          transform: scale(0.8);  
}

div:hover > div {
     -moz-transform: scale(1.1) rotate(2deg) translateX(25%) translateY(10%);  
       -o-transform: scale(1.1) rotate(2deg) translateX(25%) translateY(10%);  
  -webkit-transform: scale(1.1) rotate(2deg) translateX(25%) translateY(10%) translateZ(0);  
      -ms-transform: scale(1.1) rotate(2deg) translateX(25%) translateY(10%);  
          transform: scale(1.1) rotate(2deg) translateX(25%) translateY(10%) translateZ(0);
}