JSFiddle - React, Tailwind, and code Playground

by gregbabula

HTML

<section class="content">
    
    <div class="block example-element shdw-inset transform-one"></div>
    <div class="block example-element shdw-inset transform-two"></div>
    <div class="block example-element shdw-inset transform-three"></div>
        
</section><!--end .content-->

CSS

.content { margin: 5% auto; width: 60% }
.example-element { background: purple; height: 300px; position: relative; width: 300px; }

.transform-one { -webkit-transform: rotate(45deg) scale(1) skew(-10deg) translate(60px); z-index: 3; }
.transform-two { -webkit-transform: rotate(45deg) scale(1) skew(19deg) translate(-98px); z-index: 2; }
.transform-three { margin-left: 190px; -webkit-transform: rotate(45deg) scale(1) skew(-6deg) translate(-284px); z-index: 1; }

/* 

    G5Framework

    The Automator

    =======================================

    Table of Contents
    
    =======================================

    00         HTML & Body
    01         Box Model & iPad Basics

    02         Global Classes // Animation
    03         Global Classes // Spacing
    04         Global Classes // View
    05         Global Classes // Copy
    06         Global Classes // User Interface

    07         Global Classes // Presentation // Border Radius
    08         Global Classes // Presentation // Box Shadow
    09         Global Classes // Presentation // Opacity
    10         Global Classes // Presentation // Transition
    11         Global Classes // Presentation // Gradient
    12         Global Classes // Presentation // Scale
    13         Global Classes // Presentation // Rotate
    14         Global Classes // Presentation // Transform

*/

/* HTML && Body */
html, body { margin: 0; padding: 0; height: 100%; }
body { background: #fff; color: #000; font: normal normal 13px/1.5em arial, sans-serif; }

/* Natural Box Model //Position inline blocks properly // iPad Basics */
* { -webkit-box-sizing: border-box; box-sizing: border-box; vertical-align: text-top; -webkit-touch-callout: none; -webkit-text-size-adjust: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none; }

/* Global Classes // Animation */ 
@-webkit-keyframes fadein  { 
    0%         { opacity: 0; } 
    100%     { opacity: 1; } 
}

@-webkit-keyframes fadeout { 
    0%...