JSFiddle - React, Tailwind, and code Playground

by Hugo Lopez

HTML

<div id="root" dir="ltr">
  <div id="main" class="languages">
  Filter: <input type="text" v-model="search"/>   

    <div class="language-sections">
      <section class="launched">
              <p>Section introduction.</p>
        
        <!--     component languageGallery -->
        <ul v-for="language in filteredLanguages">
        
        
          <!-- Component languageCard -->
          <li v-if="Number(language.records) > 100" class="language">
          <div>
            <div class="info">
              <h2><span>{{language.languageLabel}}</span></h2>
              <br><span>{{ meaningfulNumber(language.population,'short',zero='Unkown number of') }} speakers worldwide</span>
              <div class="numbers">
                <div><span>Voices</span><b class="value">{{ meaningfulNumber(language.speakers) }}</b></div>
                <hr class="hr">
                <div><span>gender split</span><span class="value"><b>{{ meaningfulNumber(language.speakersOthers) }}</b> | <b>{{ meaningfulNumber(language.speakersMales) }}</b></span></div>
                <hr class="hr">
                <div><span>Words</span><b class="value">{{ meaningfulNumber(language.words) }}</b></div>
                <hr class="hr">
                <div><span>Records</span><b class="value">{{ meaningfulNumber(language.records) }}</b></div>
                <hr class="hr">
                <div><span>gender split</span><span class="value"><b>{{ meaningfulNumber(language.femalesRecords) }}</b> | <b>{{ meaningfulNumber(language.malesRecords) }}</b></span></div>
                <div class="progress-bar">
                  <div class="progress blue" :style="{ width: percent(language.femalesRecords,language.records)+'%'}"></div>
                </div>
              </div>
            </div>
            <div>
                <a href="https://lingualibre.org/wiki/Specia:RecordWizard"
             style="display:inline-block;width:50%;"><button><span>Share your voice</span></button></a><!--
...

CSS

/* ***************************************************** */
/* AUTHORSHIP ****************************************** * /
/* Author: Mozilla Common Voice, MPL 2.0   */
/* Scope: Languages gallery  */
/* License: https://github.com/common-voice/common-voice/blob/main/LICENSE */
/* ***************************************************** */
/* VARIABLES ******************************************* */
:root {
    --white: #fff;
    --black: #000;
    --red: #ff4f5e;
    --light-red: #fdc6c8;
    --green: #b7d43f;
    --valid-green: #59cbb7;
    --near-black: #4a4a4a;
    --grey: #e7e5e2;
    --darker-grey: #e6e5e3;
    --light-grey: #f3f2f0;
    --lighter-grey: #f9f9f9;
    --desert-storm: #f3f2f1;
    --warm-grey: #959595;
    --blue: #629ff4;
    --gradient-pink: #f89096;
    --gradient-purple: #b1b4e5;
    --link-color: var(--blue);
    --override-z-index: 4;
    --header-z-index: 3;
    --top-z-index: 2;
    --middle-z-index: 1;
    --bottom-z-index: 0;
    --base-font-family: "Open Sans", sans-serif;
    --strong-font-family: "Zilla Slab", Georgia, Utopia, Charter, serif;
    --font-size: 16px;
    --font-size-xs: 12px;
    --font-size-lg: 24px;
    --font-size-xl: 32px;
    --font-size-xxl: 34px;
    --font-size-max: 48px;
    --standard-margin: 0.3rem;
    --wide-desktop-width: 1400px;
    --desktop-width: 76rem;
    --old-desktop-width: 55rem;
    --page-margin: 1rem;
    --input-height: 2.5rem;
    --spinner-height: 10rem;
    --card-shadow: rgba(0, 0, 0, 0.09) 0px 1px 6px, rgba(0, 0, 0, 0.09) 0px 1px 4px;
    --transition-duration: 0.2s;
    --transition-duration-slow: 0.5s;
    --easing: cubic-bezier(0.4, 0, 0.2, 1);
    --header-height: 4rem;
    --nav-shadow-overhang: 0px 2px 4px rgba(0, 0, 0, 0.03);
    --dataset-item-margin: 0.7rem;
    --profile-column-margin: 30px
  }
  
  :root {
    --toggle-padding: 10px
  }
  
  
  :root {
    --language-box-margin: 1.6rem
  }
  
  /* ***************************************************** */
  /* ANIMATIONS...

JavaScript

// https://codepen.io/jcesar020/pen/wpbKoK?editors=1111
// https://cdnjs.cloudflare.com/ajax/libs/axios/0.17.1/axios.min.js
// https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js

/* ************************************************** */
/* DATA ********************************************* */
var data = [
{ "itemLabel": "French", "wikidata": "Q150", "population": "208157220", "populationQualifier": "10-100M", "languageLabel": "French", "iso": "fra", "speakers": "297", "speakersMales": "189", "speakersOthers": "108", "malesCount": "189", "malesRecords": "225972", "femalesCount": "95", "femalesRecords": "17398", "percent": "7.1", "language": "https://lingualibre.org/entity/Q21", "records": "247371", "words": "161504"},
  { "itemLabel": "Polish", "wikidata": "Q809", "population": "39700000", "populationQualifier": "10-100M", "languageLabel": "Polish", "iso": "pol", "speakers": "15", "speakersMales": "11", "speakersOthers": "4", "malesCount": "11", "malesRecords": "70634", "femalesCount": "3", "femalesRecords": "13699", "percent": "16.2", "language": "https://lingualibre.org/entity/Q298", "records": "84334", "words": "82828"},
  { "itemLabel": "Bengali", "wikidata": "Q9610", "population": "300000000", "populationQualifier": ">100M", "languageLabel": "Bengali", "iso": "ben", "speakers": "9", "speakersMales": "9", "speakersOthers": "0", "language": "https://lingualibre.org/entity/Q307", "records": "61030", "words": "58481"},
  { "itemLabel": "Odia", "wikidata": "Q33810", "population": "34500000", "populationQualifier": "10-100M", "languageLabel": "Odia", "iso": "ori", "speakers": "5", "speakersMales": "4", "speakersOthers": "1", "malesCount": "4", "malesRecords": "52709", "femalesCount": "1", "femalesRecords": "2", "percent": "0", "language": "https://lingualibre.org/entity/Q336", "records": "52712", "words": "52283"},
  { "itemLabel": "Esperanto", "wikidata": "Q143", "population": "2000000", "populationQualifier": "1-10M", "languageLabel": "Esperanto", "iso":...