JSFiddle - React, Tailwind, and code Playground

by sas_sam

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<div id="main" data-bind="witg: languages">

  <p class="info" data-bind="text: foo()">hello</p>

  <div class="languages" data-bind="foreach: selectedLanguages">
    <div class="name" data-bind="text: language"></div>
  </div>
</div>

JavaScript

var options = {
	languages: [{"Language":25,"Fluency":3,"Name":"Hungarian","FluencyName":"Fluent"}],
  allLanguages: [{"Id":78,"Name":"Afrikaans"},{"Id":85,"Name":"Albanian"},{"Id":1,"Name":"Amharic"},{"Id":2,"Name":"Arabic"},{"Id":3,"Name":"Armenian"},{"Id":86,"Name":"Azerbaijani"},{"Id":87,"Name":"Basque"},{"Id":88,"Name":"Belarusian"},{"Id":4,"Name":"Bengali"},{"Id":100,"Name":"Bosnian"},{"Id":79,"Name":"Bulgarian"},{"Id":5,"Name":"Burmese"},{"Id":6,"Name":"Cambodian"},{"Id":7,"Name":"Cantonese"},{"Id":89,"Name":"Catalan"},{"Id":8,"Name":"Cebuano"},{"Id":9,"Name":"Cham"},{"Id":10,"Name":"Chamorro"},{"Id":90,"Name":"Chechen"},{"Id":99,"Name":"Croatian"},{"Id":11,"Name":"Czech"},{"Id":12,"Name":"Danish"},{"Id":13,"Name":"Dutch"},{"Id":91,"Name":"Estonian"},{"Id":14,"Name":"Farsi"},{"Id":15,"Name":"Fijian"},{"Id":16,"Name":"Finnish"},{"Id":74,"Name":"Flemish"},{"Id":17,"Name":"French"},{"Id":97,"Name":"Galician"},{"Id":92,"Name":"Georgian"},{"Id":18,"Name":"German"},{"Id":19,"Name":"Greek"},{"Id":20,"Name":"Gujarati"},{"Id":21,"Name":"Hakka"},{"Id":22,"Name":"Hebrew"},{"Id":23,"Name":"Hindi"},{"Id":24,"Name":"Hmong"},{"Id":25,"Name":"Hungarian"},{"Id":26,"Name":"Ibo"},{"Id":93,"Name":"Icelandic"},{"Id":27,"Name":"Ilocano"},{"Id":28,"Name":"Ilongo"},{"Id":29,"Name":"Indonesian"},{"Id":77,"Name":"Irish...