JSFiddle - React, Tailwind, and code Playground

by mariomc

HTML

<link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
<script src="http://codemirror.net/lib/codemirror.js"></script>
<script src="http://codemirror.net/addon/edit/matchbrackets.js"></script>
<script src="http://codemirror.net/addon/edit/continuecomment.js"></script>
<script src="http://codemirror.net/mode/javascript/javascript.js"></script>
<link rel="stylesheet" href="http://codemirror.net/doc/docs.css">
<h2>Drag the red box below to your bookmark bar.</h2>
<h3>Then click on the bookmark created to activate ALL the inputs in the page you're visiting.</h3>
<h3>Don't worry it won't bite.</h3>
<a id="bookmarklet" href="">
    Activate ALL the inputs!
</a>

<form>
    <textarea id="code" name="code" style="display:none;" >//from http://coding.smashingmagazine.com/2010/05/23/make-your-own-bookmarklets-with-jquery/
        
(function(){

	// the minimum version of jQuery we want
	var v = "1.8";

	// check prior inclusion and version
	if (window.jQuery === undefined || window.jQuery.fn.jquery < v) {
		var done = false;
		var script = document.createElement("script");
		script.src = "//ajax.googleapis.com/ajax/libs/jquery/" + v + "/jquery.min.js";
		script.onload = script.onreadystatechange = function(){
			if (!done && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete")) {
				done = true;
				initMyBookmarklet();
			}
		};
		document.getElementsByTagName("head")[0].appendChild(script);
	} else {
		initMyBookmarklet();
	}
	
	function initMyBookmarklet() {
		(window.myBookmarklet = function() {
	        jQuery("select, textarea, input").prop({disabled : false, readonly: false});

		})();
	}

})();
        
    </textarea>
</form>

CSS

.CodeMirror {
    border: 1px solid #eee;
    height: auto;
}
.CodeMirror-scroll {
    overflow-y: hidden;
    overflow-x: auto;
}

a#bookmarklet{
    margin: 20px 0;
    width: auto;
    display: inline-block;
    text-align:center;
    padding: 10px;
    -webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
    border: 2px solid #800004;
    background: transparent;
    color:#800004;
    text-transform: uppercase;
}

JavaScript

$('a#bookmarklet').on('mousedown', function () {
    editor.save();    
    var value = encodeURI($('textarea#code').val());
    $('a#bookmarklet').attr('href', "javascript:" + value)
});