JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://www.bartos.me/heapbox/themes/dark/css/dark.css">
<script src="http://www.bartos.me/heapbox/js/jquery.heapbox-0.9.4.min.js"></script>
<section class="table-3col clearfix">
                <div class="pricing-column">
                <div class="pricing-header">
                    <div class="pricing-title pt-azul1">Basic</div>
                    <div class="price azul1"><div class="trans"><sup>R$</sup><span>6,99</span>/mês</div></div>
                </div>
                <!--end:pricing-header -->
                <ul class="features ">
                    <li>
                        <p class="p-icone-tabela">
                            <select class="select-ciclos" name="select">
                                <option value="<sup>R$</sup><span>6,99</span>/mês" selected="selected">Mensal</option>
    <option value="<sup>R$</sup><span>28,77</span>">Trimestral -4%</option>  
    <option value="<sup>R$</sup><span>54,14</span>">Semestral -8%</option>
    <option value="<sup>R$</sup><span>99,99</span>/ano">Anual -16%</option>  
                            </select>
                            </p>
</li>
                            <li>
                              <p class="p-icone-tabela"><i class="icon-hdd"></i><b>Nome</b> teste</p></li>
							<li><p class="p-icone-tabela"><i class="icon-exchange"></i><strong>Teste nome</strong></p></li>
                            <li>
                              <p class="p-icone-tabela "><i class="icon-envelope-alt"></i><strong>Nome testando</strong></p></li>
							<li><p class="p-icone-tabela"><i class="icon-globe"></i>E teste denovo</p></li>
                            <li><p class="p-icone-tabela"><i class="icon-reorder"></i>Mais um teste</p></li>
                            
						</ul><!--end:features-->						
						<div class="pricing-footer">
                            <a href="http://joobdesign.com/" id="cont"><div class="containeer">
<div class="botao frente" style="opacity:...

CSS

body{font-family:Tahoma}

JavaScript

$(".select-ciclos").heapbox({
'onChange':function(value,src){

    var mostrador = $(src).closest('.pricing-column').find('.trans');
    var val = value;
    mostrador.animate({
        opacity: 0
    }, 250, function () {
        if (val == "<sup>R$</sup><span>6,99</span>/mês")
        {
        $("#cont").attr("href", "http://meusite.com/carrinho.php?produto=1&periodo=mensal");
        }
        else if (val == "<sup>R$</sup><span>28,77</span>")
        {
        $("#cont").attr("href", "http://meusite.com/carrinho.php?periodo=trimestral");
        }
        else if (val == "<sup>R$</sup><span>54,14</span>")
        {
        $("#cont").attr("href", "http://meusite.com/carrinho.php?produto=1&periodo=semestral");
        }
        else if (val == "<sup>R$</sup><span>99,99</span>/ano")
        {
        $("#cont").attr("href", "http://meusite.com/carrinho.php?produto=1&periodo=anual");
        }
        mostrador.html(val);
        mostrador.animate({
            opacity: 1
        }, 250)
    })
    }
});


$(document).ready(function() {
   $(".select-ciclos").heapbox();
 });