JSFiddle - React, Tailwind, and code Playground

by Mike Pol

HTML

<div id="wrapper">
<input id="octoURL" type="url"   title="Your URL"                value="http://github.com/Username/Repo" />
<input id="octoBG"  type="color" title="Corner Background Color" value="#151515" />
<input id="octoCat" type="color" title="Corner Octo-Cat Color"   value="#FFFFFF" />
<input id="pageBG"  type="color" title="Page Background Color"   value="#FFFFFF" /><br />
<textarea id="octoCode"></textarea><br />
<span class="left-right">
    <input name="leftright" type="radio" id="left"> Left
    <input name="leftright" type="radio" id="right" checked="checked"> Right
</span>
<button>Copy</button>
</div>

CSS

body {
    background: #FFF;
    margin: 10px 0px 0px 0px;
    font-family: sans-serif;
}

#wrapper {
    text-align: center;
}

#octoURL {
    width: 215px;
    font-size: 13px;
}

input {
    width: 50px;
    height: 30px;
    border-width: 1px;
    border-style: solid;
    border-color: #AAA;
    margin: 0px 0px 5px 0px;
    padding: 0px 2px;
    vertical-align: top;
}

textarea {
    border: 2px solid #CCC;
    outline: 0px;
    height: 220px;
    width: 400px;
    font-family: monospace;
    font-size: 10px;
    color: #000;
}

input[type="radio"] {
    height: auto;
    width: auto;
    vertical-align: middle;
}

.left-right {
    display: inline-block;
    width: 346px;
    padding: 0px 0px 0px 5px;
    text-align: left;
}

button {
    background: #CCC;
    width: 50px;
    height: 30px;
    border: 1px solid #AAA;
    margin: 0px;
    padding: 0px;
    color: #444;
}

JavaScript

function updateOcto() {
	$('.github-corner').remove();
    var octoURL = $("#octoURL").val() || 'http://your-url';
    var octoBG = $("#octoBG").val() || '#000';
    var octoCat = $("#octoCat").val() || '#FFF';
    var pageBG = $("#pageBG").val() || '#FFF';
    var right = 'right:0';
    var left = 'left:0;transform:scale(-1, 1)';
    var leftRight = '';
    if ($("#left").prop("checked")) {
        leftRight = left;
    } else {
        leftRight = right;
    }
    var octoCode =
        '<a href="' + octoURL + '" class="github-corner">' +
            '<svg width="80" height="80" viewBox="0 0 250 250" style="position:absolute;top:0;border:0;' + leftRight + '" fill="' + octoBG + '" color="' + octoCat + '">' +
                '<path d="M0 0l115 115h15l12 27 108 108v-250z"/>' +
                '<path d="M128.3 109c-14.5-9.3-9.3-19.4-9.3-19.4 3-6.9 1.5-11 1.5-11-1.3-6.6 2.9-2.3 2.9-2.3 3.9 4.6 2.1 11 2.1 11-2.6 10.3 5.1 14.6 8.9 15.9" fill="' + octoCat + '" style="transform-origin:130px 106px" class="octo-arm"/>' +
                '<path d="M115 115c-.1.1 3.7 1.5 4.8.4l13.9-13.8c3.2-2.4 6.2-3.2 8.5-3-8.4-10.6-14.7-24.2 1.6-40.6 4.7-4.6 10.2-6.8 15.9-7 .6-1.6 3.5-7.4 11.7-10.9 0 0 4.7 2.4 7.4 16.1 4.3 2.4 8.4 5.6 12.1 9.2 3.6 3.6 6.8 7.8 9.2 12.2 13.7 2.6 16.2 7.3 16.2 7.3-3.6 8.2-9.4 11.1-10.9 11.7-.3 5.8-2.4 11.2-7.1 15.9-16.4 16.4-30 10-40.6 1.6.2 2.8-1 6.8-5 10.8l-11.7 11.6c-1.2 1.2.6 5.4.8 5.3z" fill="' + octoCat + '" class="octo-body"/>' +
            '</svg>' +
        '</a>' +
        '<style>' +
            '.github-corner:hover .octo-arm{' +
                'animation:octocat-wave 560ms ease-in-out' +
            '}' +
            '@keyframes octocat-wave{' +
                '0%,100%{' +
                    'transform:rotate(0)' +
                '}' +
                '20%,60%{' +
                    'transform:rotate(-25deg)' +
                '}' +
                '40%,80%{' +
                    'transform:rotate(10deg)' +
                '}' +
         ...