JSFiddle - React, Tailwind, and code Playground

by jeremenichelli

HTML

<!-- THIS IS EXAMPLE HAS NO POLYFILLS, PLEASE TEST IN CHROME -->
<link rel="import" href="https://raw.githubusercontent.com/Polymer/polymer/master/polymer.html">

<dom-module is="github-link">
  <template>
    <a href="https://github.com/[[ user ]]" hidden$="[[ !user ]]">
      [[ fullName ]] on GitHub
    </a>
  </template>

  <script>
    Polymer({
      is: 'github-link',
      properties: {
        user: {
          type: String,
          value: ''
        },
        firstName: String,
        lastName: String,
        fullName: {
          type: String,
          computed: '_computeFullName(first, last)'
        }
      },
      _computeFullName: function(first, last) {
        return first + ' ' + last;
      }
    });
  </script>
</dom-module>

<!-- using the element -->
<github-link user="jeremenichelli" first="Jeremias" last="Menichelli"></github-link>

SCSS

body {
  font-family: sans-serif;
}

a {
  color: #212121;
  text-decoration: none;
  
  &:hover {
    text-decoration: underline;
  }
}