JSFiddle - React, Tailwind, and code Playground

by Michael Danilov

HTML

<script src="http://rawgithub.com/ai/autoprefixer-rails/master/vendor/autoprefixer.js"></script>
<div>
    <textarea id="input">/* Enter CSS source code here */</textarea>
    <textarea id="output">/* Autoprefixer generated code */</textarea>
</div>

CSS

* { -moz-box-sizing: border-box; box-sizing: border-box }
html, body { width: 100%; height: 100% }
div { display: flex; height: 100% }
div > * { flex: auto; border: none; padding: 1em; font-family: Consolas, monospace; resize: none }
#input { background-color: pink }
#output { background-color: silver }

JavaScript

var input = document.querySelector('#input');
var output = document.querySelector('#output');

input.addEventListener('keyup', function () {
    var source = this.value;
    var compiled = autoprefixer("last 2 versions", "> 1%", "ie 7", "ie 8", "ff > 10", "Opera > 11").process(source, { safe: true });    
    output.value = compiled.css;
});

// clear input on initial focus
var clear = false;
input.addEventListener('focus', function () {
    if (!clear) {
        input.value = '';
        clear = true;
    }
});