JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://github.com/fent/randexp.js/releases/download/v0.4.0/randexp.min.js"></script>
<form onsubmit="generate();return false;">
    <input name="regex" id="regex" type="text" value="\d{3}-\d{3}-\d{4}" placeholder="Regular Expression"/>
    <button type="submit">Generate</button>
    <textarea id="output" rows=12></textarea>
</form>

CSS

@import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono);
button {
    float: right;
}
input, textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 5px;
    margin: 5px 0;
    font-family: 'Ubuntu Mono', 'Courier New', monotype;
    font-size: 16px
}

JavaScript

window.generate = function () {
    try {
        var el = document.getElementById('regex');
        var op = document.getElementById('output');
        var rx = el.value;

        var ra = new RandExp(new RegExp(rx));
        op.innerHTML = '';
        for (var i = 0; i < 10; ++i) {
            op.innerHTML += ra.gen() + '\n';
        }
    } catch (ex) {
        console.log(ex);
    }
}