JSFiddle - React, Tailwind, and code Playground

by gregbabula

HTML

<div class="example-element block brdr br10 island topspc shdw-inset">

    <p contenteditable="true" id="editable">Testing the testing</p>

</div><!--end .example-element-->

<a href="#" class="block topspc" id="clear">Clear Changes</a>

CSS

.example-element { background: purple; height: 300px; width: 300px; }
.example-element p { color: #fff; position: relative; text-shadow: -1px -1px rgba(0, 0, 0, 0.8); }

/* 

    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%         { opacity: 100%; } 
    100%     { opacity: 0; } 
}

@-webkit-keyframes grow { 
    0%         { -webkit-transform: scale(1.0); transform: scale(1.0); } 
    100%     { -webkit-transform: scale(1.5); transform: scale(1.5); } 
}

/* Global Classes // Animation Classes */ 
.fade-in-1s {...

JavaScript

var editable = document.getElementById('editable');

addEvent(editable, 'blur', function () {
  // lame that we're hooking the blur event
  localStorage.setItem('contenteditable', this.innerHTML);
  document.designMode = 'off';
});

addEvent(editable, 'focus', function () {
  document.designMode = 'on';
});

addEvent(document.getElementById('clear'), 'click', function () {
  localStorage.clear();
  window.location = window.location; // refresh
});

if (localStorage.getItem('contenteditable')) {
  editable.innerHTML = localStorage.getItem('contenteditable');
}