JSFiddle - React, Tailwind, and code Playground

by johnhunter

HTML

<div>    
    <a href="javascript:(function(){if(!/WebKit/.test(navigator.userAgent))alert(%27Not%20supported%20by%20this%20browser.%27);var%20d%20=%20document,%20s%20=%20d.createElement(%27style%27);s.innerHTML%20=%20%22*%20{-webkit-user-modify:read-write;word-wrap:%20break-word;-webkit-nbsp-mode:space;-webkit-line-break:after-white-space;}a%20{-webkit-user-modify:initial;}%22;d.getElementsByTagName(%27head%27)[0].appendChild(s);})()">[Edit page]</a>
    <p>Allows you to edit the text in the current page. Currently you cannot save your changes (but you can print them). Only works on Safari and Chrome browsers.</p>
</div>

CSS

body {
    background: #eee;
}

div {
    position: relative;
    margin: 20px;
    padding: 20px;
    padding-bottom: 0;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    max-width: 800px;
}
p {
    margin: 0 0 1.5em 170px;
    line-height: 1.4;
    color: #666;
}
a {
    float: left;
    padding: 7px 10px;
    border: 1px solid #888;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    background: #eee;
    min-width: 130px;
    text-align: center;
}
a:hover,
a:active {
    box-shadow: 0 0 5px #fcc;
}
a:hover:after {
    content: ' Drag this to your bookmarks ';
    position: absolute;
    top: 3px;
    left: 180px;
    padding: 10px;
    border-radius: 8px;
    background: #222;
    opacity: 0.7;
    color: #eee;
}

JavaScript

// Based on: http://www.css-101.org/articles/trick-for-rapid-prototyping/
// bookmarklet source:
/*

(function() {
    if (!/WebKit/.test(navigator.userAgent)) alert('Not supported by this browser.');
    var d = document,
        s = d.createElement('style');
    s.innerHTML = "* {-webkit-user-modify:read-write;word-wrap: break-word;-webkit-nbsp-mode:space;-webkit-line-break:after-white-space;}a {-webkit-user-modify:initial;}";
    d.getElementsByTagName('head')[0].appendChild(s);
})()

*/