JSFiddle - React, Tailwind, and code Playground

by Jader Wagner

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="mensal" selected="selected" data-preco="6,99">Mensal</option>
                        <option value="trimestral" data-preco="28,77">Trimestral -4%</option>
                        <option value="semestral" data-preco="54,14">Semestral -8%</option>
                        <option value="anual" data-preco="99,99">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://meusite.com/carrinho.php?periodo=mensal&produto=1" id="linkBasic"><div class="containeer">
      ...

CSS

body {
    font-family:Tahoma
}

JavaScript

$(".select-ciclos").heapbox({
    'onChange': function (value, src) {
        $(src).closest('.pricing-column').find('.trans').animate({
            opacity: 0
        }, 250, function () {
            $(this).children('span').html($(src).find("option:selected").attr("data-preco"));
            if (value == 'mensal') var ciclo = '/mês';
            if (value == 'anual') var ciclo = '/ano';
            $(this).html( $(this).html().replace(/<\/span>.*/g, '</span>' + (ciclo ? ciclo : '')) );
            $(this).animate({
                opacity: 1
            }, 250)
        })
        var elementolink = $(src).closest('.pricing-column').find('.pricing-footer a');
        var link = elementolink.attr("href");
        elementolink.attr("href", link.replace(/periodo\=(.+?)(&|$)/g, 'periodo=' + value + '&').replace(/&$/g, ''));
    }
});