JSFiddle - React, Tailwind, and code Playground

HTML

<a class="rotate" href="#contact"><a class="rotate" href="#contact">hire us   <span>be lunar</span></a>

CSS

@font-face {
    font-family: 'Museo300';
    src: url('http://jetbookingdirect.com/wp-content/themes/jetbook2012/Museo300Regularwebfont.eot');
    src: url('http://jetbookingdirect.com/wp-content/themes/jetbook2012/Museo300Regularwebfont.eot?iefix') format('eot'),
         url('http://jetbookingdirect.com/wp-content/themes/jetbook2012/Museo300Regularwebfont.woff') format('woff'),
         url('http://jetbookingdirect.com/wp-content/themes/jetbook2012/Museo300Regularwebfont.ttf') format('truetype'),
         url('http://jetbookingdirect.com/wp-content/themes/jetbook2012/Museo300Regularwebfont.svg#webfontBsA9EFUC') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Museo500';
    src: url('http://jetbookingdirect.com/wp-content/themes/jetbook2012/Museo500Regularwebfont.eot');
    src: url('http://jetbookingdirect.com/wp-content/themes/jetbook2012/Museo500Regularwebfont.eot?iefix') format('eot'),
         url('http://jetbookingdirect.com/wp-content/themes/jetbook2012/Museo500Regularwebfont.woff') format('woff'),
         url('http://jetbookingdirect.com/wp-content/themes/jetbook2012/Museo500Regularwebfont.ttf') format('truetype'),
         url('http://jetbookingdirect.com/wp-content/themes/jetbook2012/Museo500Regularwebfont.svg#webfontBsA9EFUC') format('svg');
    font-weight: normal;
    font-style: normal;

}

.rotate {   font-family: 'Museo500';color:#fff;font-size:26px;position:absolute; top:38px; right:10px;background:#0a0923;border-radius:100px;height:65px;width:100px;line-height:18px;text-align:center;text-decoration:none;padding-top:35px;}
.rotate:hover {-webkit-transform: rotate(20deg); -moz-transform: rotate(20deg);}

.rotate span {font-size:12px;width:100px;color:#98c200}