JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://testetabela.esy.es/css/bootstrap.css">
<link rel="stylesheet" href="http://testetabela.esy.es/style.css">
<link rel="stylesheet" href="http://testetabela.esy.es/css/bootstrap-responsive.css">
<link rel="stylesheet" href="http://testetabela.esy.es/css/responsive.css">
<link rel="stylesheet" href="http://testetabela.esy.es/css/HWIPTGDS2.css">
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<link rel="stylesheet" href="http://testetabela.esy.es/heapbox/themes/dark/css/dark.css">
<script src="http://testetabela.esy.es/heapbox/src/jquery.heapbox-0.9.4.min.js"></script>
<!--end:theme-option-->
<div class="flx-wrapper">
<div class="wrapper clearfix">
<br>
<br>
<section class="table-3col clearfix">
<div class="pricing-column">
<div class="pricing-header">
<div class="pricing-title pt-azul1">Plano 1</div>
<div class="price azul1"><div class="trans"><sup>R$</sup><span>9,99</span>/mês</div></div>
</div>
<!--end:pricing-header -->
<ul class="features ">
<li>
<p class="p-icone-tabela">
Exemplo com <a href="http://www.bartos.me/heapbox/#examples" target="_blank">HeapBox</a>
<div class="clear"></div>
<select class="basic-example select-ciclos" name="select">
<option value="<sup>R$</sup><span>9,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>5GB de...
JavaScript
$('select.select-ciclos').on('change', function () {
var mostrador = $(this).closest('.pricing-column').find('.trans');
var val = this.value;
mostrador.animate({
opacity: 0
}, 100, function () {
mostrador.html(val);
mostrador.animate({
opacity: 1
}, 100)
})
});
$(document).ready(function() {
$(".basic-example").heapbox();
});