JSFiddle - React, Tailwind, and code Playground

by Daedalus

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div class="panel panel-primary">
  <div class="hidden">
    <span data-type="currency" data-name="Crowns">
      <span data-type="converts-to" data-name="Zollar" data-from="40" data-to="3"></span>
      <span data-type="converts-to" data-name="Gil" data-from="20" data-to="3"></span>
    </span>
    <span data-type="currency" data-name="Gil">
      <span data-type="converts-to" data-name="Zollar" data-from="8" data-to="3"></span>
      <span data-type="converts-to" data-name="Crowns" data-from="4" data-to="15"></span>
    </span>
    <span data-type="currency" data-name="Zollar">
      <span data-type="converts-to" data-name="Gil" data-from="2" data-to="3"></span>
      <span data-type="converts-to" data-name="Crowns" data-from="2" data-to="15"></span>
    </span>
  </div>
  <div class="panel-heading">
    Currency Converter
  </div>
  <div class="panel-body currency-converter">
    <div class="row">
      <div class="form-group">
        <label class="col-sm-2">From:</label>
        <div class="col-sm-4">
          <input type="text" class="form-control" v-model="from" placeholder="From" />
        </div>
        <div class="col-sm-4">
          <select class="form-control" v-model="fromCurrency"><option v-for="opt in fromSel">{{opt}}</option></select>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="form-group">
        <label class="col-sm-2">To:</label>
        <div class="col-sm-4">
          <input...

CSS

[data-type="currency"] {
  display: none;
}

.panel {
  width: 600px;
}