JSFiddle - React, Tailwind, and code Playground

by blue1086

HTML

<center style="overflow: auto;">
<div id="main_content">
<div id="wrapper">
<table>
 <tbody>
<tr><td><div class="current_tier_division">
<div class="current_tier_img" id="cti" style="background-image: url(http://s9.postimg.org/t65jquvb3/gold_4.png); height: 192px; width: 192px;">
</div>
</div>
</td>


<td><div class="desired_tier_division">
<div class="desired_tier_img" id="dti" style="background-image: url(http://s9.postimg.org/5k9xif2f3/platinum_1.png); height: 192px; width: 192px;">
</div>
</div>
</td></tr>
<tr><td><div class="current_tier">
<select id="ct">
            <option value="b">Bronze
            </option><option value="s">Prata
            </option><option value="g">Ouro
            </option><option value="p">Platina
            </option><option value="d">Diamante
          </option></select>
<select id="cd">
            <option selected="">5
            </option><option>4
            </option><option>3
            </option><option>2
            </option><option>1
          </option></select>
        </div>
</td>

<td><div class="desired_tier">
<select id="dt">
            <option value="b">Bronze
            </option><option value="s">Prata
            </option><option value="g">Ouro
            </option><option value="p">Platina
            </option><option value="d">Diamante
          </option></select>
      <select id="dd">
            <option selected="">5
            </option><option>4
            </option><option>3
            </option><option>2
            </option><option>1
          </option></select>
        </div>
</td></tr>
</tbody></table>
</div>
</div>
<table><tbody>
<tr><form action="https://payment.com.br/security/webpagamentos/webpagto.aspx" method="post" target="payment">

<td><div class="howmuch" id="green" style="padding: 7px; width: auto;">
<span class="btn">VALOR</span>
            <span class="btn btn-warning" id="price"></span></div>
</td>

<td><input name="email_cobranca" type="hidden" value="[email protected]" />
       ...

JavaScript

function EloEvolution(attrs) {
   this._products = {
    b5: {
      id: 0,
      price: 20,
      image: 'http://s27.postimg.org/y1k8o34gz/bronze_5.png'
    },
    b4: {
      id: 971,
      price: 20,
      image: 'http://s27.postimg.org/4l017x8pv/bronze_4.png'
    },
    b3: {
      id: 972,
      price: 20,
      image: 'http://s27.postimg.org/h653p2yqr/bronze_3.png'
    },
    b2: {
      id: 973,
      price: 20,
      image: 'http://s27.postimg.org/a0dcmmpnn/bronze_2.png'
    },
    b1: {
      id: 974,
      price: 20,
      image: 'http://s27.postimg.org/vy9tgf4o3/bronze_1.png'
    },
    s5: {
      id: 975,
      price: 20,
      image: 'http://s16.postimg.org/68f5dxh1h/silver_5.png'
    },
    s4: {
      id: 976,
      price: 25,
      image: 'http://s16.postimg.org/65v9r3ddx/silver_4.png'
    },
    s3: {
      id: 977,
      price: 25,
      image: 'http://s16.postimg.org/6mghdj151/silver_3.png'
    },
    s2: {
      id: 978,
      price: 25,
      image: 'http://s16.postimg.org/58oui81vp/silver_2.png'
    },
    s1: {
      id: 979,
      price: 25,
      image: 'http://s16.postimg.org/6757kif7p/silver_1.png'
    },
    g5: {
      id: 980,
      price: 25,
      image: 'http://s16.postimg.org/5nvixhyf9/gold_5.png'
    },
    g4: {
      id: 981,
      price: 30,
      image: 'http://s16.postimg.org/hsfds80p1/gold_4.png'
    },
    g3: {
      id: 982,
      price: 30,
      image: 'http://s16.postimg.org/fp4ykk0w5/gold_3.png'
    },
    g2: {
      id: 983,
      price: 30,
      image: 'http://s16.postimg.org/ptz0wdu2t/gold_2.png'
    },
    g1: {
      id: 984,
      price: 30,
      image: 'http://s16.postimg.org/hr5fysyv9/gold_1.png'
    },
    p5: {
      id: 985,
      price: 30,
      image: 'http://s27.postimg.org/sstt3ybfn/platinum_5.png'
    },
    p4: {
      id: 986,
      price: 50,
      image: 'http://s27.postimg.org/w0yagzxpf/platinum_4.png'
    },
    p3: {
      id: 987,
      price: 50,
      image:...