JSFiddle - React, Tailwind, and code Playground

by mwgamera

HTML

<div id="login">
    <label><div>Login:</div><div><input type="text" name="user"></div></label>
    <label><div>Password:</div><div><input type="password" name="pass"></div></label>
    <input type="submit" value="Login">
</div>
<!-- 
<div><input type="text"><input type="text"><input type="text">abc</div>
<div><input type="text"><input type="text"><input type="text">abc</div>
<div><input type="password"><input type="text"><input type="password">abc</div>
<div><input type="text"><input type="text"><input type="password" class="nopwinput">abc</div>
-->

SCSS

#login {
    padding: 1em;
    width: 50ex;
    margin: 2em auto;
    border: 1px solid gray;
    label {
        display: table-row;
        & > div {
            display: table-cell;
            padding: 0 1ex;
        }
        & > div:first-child {
            text-align: right;
        }
        & > div:last-child {
            width: 100%;
            input {
                width: 100%;
            }
        }
    }
    input[type=submit] {
        display: block;
        margin: 1.3ex auto 0 auto;
        padding: 0 2ex;
    }
}

JavaScript

jQuery(function($) {
    "use strict";

    var COLORS = ["#777", "#444", "#aaa", "#111", "#ddd"];
    var BORDER = [2, "outset", "inset"];
    var BLOCK_SIZE = 8;
    
    $("input[type=password]:not(.nopwinput)").each(function() {
        var box, self = $(this);

        // Replace GUI
        var offset = self.offset();
        self.replaceWith(box = $("<div>"));
        box.append(self);
        box.css({
            display: "inline-block",
            width: self.outerWidth(),
            height: self.innerHeight()
        });
        box.append(box = $("<div>"));
        box.css({
            display: "block",
            border: BORDER[0]+"px "+BORDER[1],
            float: "right",
            width: self.outerWidth() - 2*BORDER[0],
            height: self.outerHeight() - 2*BORDER[0],
            overflow: "hidden"
        });

        // Pattern display
        var pattern = (function() {
            var W = 0 | box.width() / BLOCK_SIZE + 1,
                H = 0 | box.height() / BLOCK_SIZE + 1;
            var tbl = box.append("<div>").children().last().empty();
            for (var i = 0; i < H; i++) {
                tbl.append("<div>");
            }
            tbl.children().each(function() {
                $(this).css("display", "table-row");
                for (var i = 0; i < W; i++) {
                    $(this).append("<div>").children().last().css({
                        display: "table-cell",
                        width: BLOCK_SIZE,
                        height: BLOCK_SIZE
                    });
                }
            });
            return {
                length: W * H,
                show: function(pat) {
                    var i = 0;
                    tbl.children().children().each(function() {
                        $(this).css("background-color", COLORS[0 | pat[i++]]);
                    });
                }
            };
        })();

        // Fix offsets
        self.css({
            position:...