JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

<header id="header" role="banner">
    <h1 id="name" class="vcard"><a id="main-link" href="http://forrst.me/FriendlyPie" rel="author fn initials nickname">FP</a></h1>
</header>

CSS

body { width: 600px; margin: 0 auto; background: #fff; }

#header { 
    text-align: center; 
    margin: 100px auto;
    -webkit-perspective: 1000;
}

h1 { 
    background: #000; 
    position: relative;
    width: 400px;
    height: 400px;
    -webkit-transform: rotateY(45deg);    
    border-radius: 10px;
    border: 5px solid #fff;
    -webkit-perspective: 1000;
}

h1::before { 
    content:"";
    position: absolute; 
    top: -65px;
    right: 0;
    width: 0;
    height: 0;
    border-top: 60px solid transparent;
    border-right: 200px solid black;
    border-bottom: 0px solid transparent;
    border-radius: 3px;
}
h1::after { 
    content:"";
    position: absolute; 
    bottom: -65px;
    right: 0;
    width: 0;
    height: 0;
    border-top: 0px solid transparent;
    border-right: 200px solid black;
    border-bottom: 60px solid transparent;
    border-radius: 3px;
}


a { 
    text-decoration: none; 
    color: white; 
    display: block; 
    font: 350px 'Raleway', sans-serif;
    font-weight: 100;
    -webkit-transform: rotateY(-35deg);    
    margin-left: -95px;
    padding-left: 65px;
    line-height: 475px;
    -webkit-transition: .25s linear all; 
}

a:hover, a:active, a:focus { color: red }

JavaScript

WebFontConfig = {
    google: { families: [ 'Raleway:100:latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();