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 ref="myReference" :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;
}

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() {
      this.$nextTick(function() {
        var octoCodeHTML = this.$refs.myReference.outerHTML
				octoCodeHTML += "\n\n<style type='text/css'>.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 } }...