JSFiddle - React, Tailwind, and code Playground

HTML

<div id="app">
  <input type="url"   title="Your URL" class="octoURL" v-model="url"     />
  <input type="color" title="Corner Background Color"  v-model="octoBG"  />
  <input type="color" title="Corner Octo-Cat Color"    v-model="octoCat" />
  <input type="color" title="Page Background Color"    v-model="pageBG"  /><br />
  <textarea v-model="octoCode" id="copybox"></textarea><br />
  <span class="left-right">
    <label><input name="leftRight" value="left"   v-model="leftRight" type="radio"> Left</label>
    <label><input name="leftRight" value="right"  v-model="leftRight" type="radio"> Right</label>
    <label><input name="topBottom" value="top"    v-model="topBottom" type="radio"> Top</label>
    <label><input name="topBottom" value="bottom" v-model="topBottom" type="radio"> Bottom</label>
  </span>
  <button @click="copy">Copy</button>



<div class="spacer">
    <a :href="url" class="github-corner"><svg width="80" height="80" viewBox="0 0 250 250" :style="inline()" :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>
    </div>
</div>

CSS

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

#app {
    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="color"] {
    border: 0px;
    background: #FFF;
}
input[type="color"]:focus {
    outline: 0px;
}

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

.left-right {
    display: inline-block;
    width: 346px;
    background: #FFF;
    padding: 7px 0px 4px 5px;
    text-align: left;
    vertical-align: middle;
}

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

label {
    margin-right: 8px;
    cursor: pointer;
}
label:nth-of-type(2) {
    margin-right: 40px;
}

.spacer {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 110%;
  z-index: -1;
}


.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)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}

JavaScript

console.clear();

var app = new Vue({
    el: '#app',
    data: {
        url: 'http://github.com/Username/Repo',
        octoBG: '#151515',
        octoCat: '#FFFFFF',
        pageBG: '#FFFFFF',
        octoCode: '',
        leftRight: 'right',
        topBottom: 'top'
    },
    methods: {
        copy: function (evt) {
            document.getElementById('copybox').select();
            document.execCommand('copy');
        },
        transformation: function () {
            var tranform = '';
            if (this.topBottom === 'top' && this.leftRight === 'right') {
                transform = '';
            } else if (this.topBottom === 'bottom' && this.leftRight === 'right') {
                transform = 'transform:scale(1, -1)';
            } else if (this.topBottom === 'bottom' && this.leftRight === 'left') {
                transform = 'transform:scale(-1, -1)';
            } else if (this.topBottom === 'top' && this.leftRight === 'left') {
                transform = 'transform:scale(-1, 1)';
            }
            return transform;
        },
        inline: function () {
            var transformCSS = this.transformation();
            var top = 'top:0;';
            var right = 'right:0;';
            var bottom = 'bottom:0;';
            var left = 'left:0;';
            var leftRightCSS = left;
            if (this.leftRight === 'right') {
                leftRightCSS = right;
            }
            var topBottomCSS = top;
            if (this.topBottom === 'bottom') {
                topBottomCSS = bottom;
            }
            var css = 'position:absolute;border:0;' + topBottomCSS + leftRightCSS + transformCSS;
            return css;
        },
        code: function () {
						var inline = this.inline();
    				var octoCodeHTML =
                '<a href="' + this.url + '" class="github-corner">' +
                    '<svg width="80" height="80" viewBox="0 0 250 250" style="' + inline + '" fill="' + this.octoBG + '" color="' +...