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" data-link="linkBasic" data-produto="1">
                        <option value="<sup>R$</sup><span>6,99</span>/mês" selected="selected" data-opt="M">Mensal</option>
                        <option value="<sup>R$</sup><span>28,77</span>" data-opt="T">Trimestral -4%</option>
                        <option value="<sup>R$</sup><span>54,14</span>" data-opt="S">Semestral -8%</option>
                        <option value="<sup>R$</sup><span>99,99</span>/ano" data-opt="A">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...

CSS

body {
    font-family:Tahoma
}

JavaScript

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

        var mostrador = $(src).closest('.pricing-column').find('.trans');
        var val = value;
        var opt = $(src).find("option:selected").attr("data-opt");
        var idLink = $(src).attr("data-link");
        var idProduto = $(src).attr("data-produto");
        var link = "http://meusite.com/carrinho.php?produto="+idProduto+"&periodo=";
        switch (opt) {
            case "M":
                link += "mensal";
                break;
            case "T":
                link += "trimestral";
                break;
            case "S":
                link += "semestral";
                break;
            case "A":
                link += "anual";
                break;
        }
        $("#" + idLink).attr("href", link);
        mostrador.animate({
            opacity: 0
        }, 250, function () {
            mostrador.html(val);
            mostrador.animate({
                opacity: 1
            }, 250)
        })
    }
});


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