JSFiddle - React, Tailwind, and code Playground

by Thiago Diniz

HTML

<div id="optin">
    <div class="middleContainer">
        <div id="optin-banner">
            <a href="#" title="Clique aqui para pegar seu cumpom de R$ 15 para usar na primeira compra." class="optin-link">Pegue aqui seu cupom</a>
            
            <a href="#" id="optin-close" title="Clique aqui para fechar." class="optin-link">Não quero, obrigado</a>
        </div>
    </div>
</div>

CSS

*{margin:0px auto; padding:0px;
    
}

body{height:1500px;}

.middleContainer{
    width: 990px;
}

#optin {
	height: auto;
    bottom: 0;
	width: 100%;
    z-index: 1;
	position: fixed;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

#optin-banner{
    height:320px;
    width:990px;
    float:left;
    background:url(http://www.rs1.com.br/arquivos/banner-optin.png) no-repeat;
    position: relative;
}

.optin-link{
    font-size:24px;
    padding:8px;
    color:#FFF;
    text-decoration:none;
    background-color:#008f3b;
    position:absolute;
    bottom:10px;
    right:10px;
}

.optin-link:first-child{right:256px;}
.optin-link:hover{background-color:#00732f;}
.optin-hide{display:none !important;}

JavaScript

$(function () {
    $(document).scroll(function () {
        var y = $(this).scrollTop();
        /*HEADER*/
        if (y > 250) {
            $('#float-header').fadeIn();
        } else {
            $('#float-header').fadeOut();
            
        }
        
        /*OPTIN*/
        var y = $(this).scrollTop();
        if (y > 1200) {
            $('#optin').fadeIn();
        } else {
            $('#optin').fadeOut();
        }
    
        /*CLOSE BUTTON OPTIN*/
        $("#optin-close").on("click",function () {
            $('#optin').toggleClass('optin-hide');
    });


    /*YOURVIEWS*/
    window.yv = window.yv || {};
        yv.storeKey = '98453820-3e3b-4b3e-9cb3-f63d58227431';
        
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = "http://service.yourviews.com.br/static/yv-api-2.js";
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    
	/*SKYPE*/
    Skype.ui({
      "name": "chat",
      "element": "SkypeButton_Call_atendimento.rs1_1",
      "participants": ["atendimento.rs1"],
      "imageSize": 32
    });
});