JSFiddle - React, Tailwind, and code Playground

by gregbabula

HTML

<img src="http://placehold.it/350x150" alt="palceholder image" class="block topspc lftspc relative come-in-fade-in-2s"   />

<img src="http://placehold.it/350x150" alt="palceholder image" class="block topspc lftspc relative" id="test" />

CSS

img { -webkit-transition: all 2s ease-in-out; }

#test:hover { margin-left: 30em; }

/* 

    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 comein { 
    0%       { left: -99em; } 
    100%     { left: 0; } 
}

@-webkit-keyframes comein-fadein { 
    0%       { left: -29em; opacity: 0; }
    100%     { left: 0; opacity: 1; } 
}

@-webkit-keyframes comeout { 
    0%       { right: 0; } 
    100%     { right: -99em; } 
}

@-webkit-keyframes comeout-fadeout { 
    0%       { opacity: 1; right: 0; } 
    100%     { opacity: 0; right: -99em; } 
}

@-webkit-keyframes fadein { 
    0%       { opacity: 0; } 
    100%     { opacity:...