JSFiddle - React, Tailwind, and code Playground

by Michael Lajlev

HTML

<a href="http://trustpilot.co.uk/Jobs" target="_blank" id="corner-banner"> 
    <span>We are hiring!</span> 
</a>

CSS

body {
    background: url(http://cl.ly/132q2K2h2C441D2L0w1m/Screen%20Shot%202011-12-20%20at%2011.24.13%20AM.png) top right no-repeat;
    overflow-x: hidden;
}
#corner-banner {
    opacity: 0.6;
    position: absolute;
    right: -65px;
    top: 25px;
    display: block;
    width: 200px;
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#FFA84C),color-stop(100%,#FF7B0D));
    text-align:center;
    padding:5px 3px 6px 3px;
    -webkit-transform: rotate(45deg);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    text-decoration: none;
    
    
}

#corner-banner:hover {
        opacity: 1;
    }

#corner-banner span {
    font: bold 11px/12px 'Helvetica Neue', Arial, Helvetica, sans-serif;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5);
    color:#fff;
    text-transform:uppercase;
    line-height:12px;
    display:block;
}