JSFiddle - React, Tailwind, and code Playground

by David Nabb

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div id="splash-screen">
<div class="offer-tab">
    <a href="http://www.goodthymegourmet.com.au/catering/get-ready-for-spring/"><span class="offer-tab-text"><i class="fa fa-angle-left"></i> <i class="fa fa-gift"></i></span>
    <div class="offer-text">10<i id="perc">%</i> off<br/>any function<br/>booked before<br/>Dec 2015!</div>
    </a>
</div>
</div>

CSS

#splash-screen {
    height: 100vh;
}
.offer-tab {
    position: fixed;
    z-index: 999;
    top: 60%;
    right: -5px;
    width: 60px;
    height: 60px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    margin-left: 0;
    overflow: hidden;
    background: rgba(122, 0, 41, 1.0);
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.offer-tab-text {
    opacity: 1;
    position: absolute;
    color: #fff;
    padding-left: 0;
    margin-top: 10px;
    line-height: 150%;
    font-family: calibri, sans-serif;
    font-size: 25px;
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.offer-tab-text .fa-angle-left{
    font-size: 30px;
}
.offer-tab-text .fa-gift{
    font-size: 40px;
}
.offer-text {
    opacity: 0;
    color: #fff;
    text-align: right;
    padding-right: 15px;
    padding-top: 10px;
    line-height: 150%;
    overflow: hidden;
    font-family: greenteacookies, calibri, sans-serif;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 2px;
}
.offer-tab a {
    color: #fff;
    text-decoration: none;
}
.offer-tab:hover, 
.offer-tab:focus {
    height: 150px;
    width: 150px;
    margin-left: 0;
    background: rgba(122, 0, 41, 0.8);
    transform: rotate(0deg);
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.offer-tab:hover .offer-tab-text {
    opacity: 0;
    padding-left: 90px;
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.offer-tab:hover .offer-text, 
.offer-tab:hover .offer-text a {
    display: block;
    opacity: 1;
    color: #ccc;
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
#perc {font-family:...