JSFiddle - React, Tailwind, and code Playground

by Alexandre lopes

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>30GB</b> de espaço</p></li>
							<li><p class="p-icone-tabela"><i class="icon-exchange"></i><strong>Tráfego ilimitado</strong></p></li>
                            <li>
                              <p class="p-icone-tabela "><i class="icon-envelope-alt"></i><strong>E-mails ilimitados¹</strong></p></li>
							<li><p class="p-icone-tabela"><i class="icon-globe"></i>Hospede até 3 sites</p></li>
                            <li><p class="p-icone-tabela"><i class="icon-reorder"></i>Bancos de dados ilimitados²</p></li>
                            <li><p class="p-icone-tabela" style="background: #FFF;position: relative;font-size: 16px;">
                            <i class="icon-envelope"></i><b style="border-right:...

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 () {
        mostrador.html(val);
        mostrador.animate({
            opacity: 1
        }, 250)
    })
    }
});


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