JSFiddle - React, Tailwind, and code Playground

by johnmu

HTML

<div class="foo">
    <h2>Want to change a webpage for a screenshot?</h2>
    <p>Drag this link to your bookmarks: <a href="javascript:document.body.contentEditable='true'; document.designMode='on'; void 0;">edit page</a> 
    </p>
    <p>It will let you edit web-pages in your browser, so that you can take screenshots with sample data. Just click the bookmarked link when you want to change something, then click into the page and start typing :-). It can be useful to add / replace data for examples in screenshots, without having to work with an image-editor.</p>
    <p>The code is simple (view-source), it essentially just enables your browser's <a href="https://www.google.com/search?q=dom+contentEditable">editing mode</a>.</p>
    <p>Feedback? <a href="https://plus.google.com/113006028898915385825/posts/2CSUZ13uzA4">thread</a>
    </p>
</div>

CSS

.foo {
    color: #445;
    text-align: center;
    padding: 1em 4em;
    background: #efe;
    box-shadow: 0 0 0.5em #999;
  }