JSFiddle - React, Tailwind, and code Playground

by KgomDr

HTML

<header><menu><button>Games</button><button>Channels</Button></menu></header>
<main>
<section id='game-list'></section>
<section id='channel-list'></section>
</main>
<footer>
  <div id='params'></div>
  <div id='console'></div>
  <div id='error-console'></div>
</footer>

CSS

* {
  box-sizing: border-box;
  font-family: sans-serif;
  font-size: 14px;
}

body {
  margin: 0;
}

main {
  height: calc(100vh - 5em);
}

footer {
  bottom: 0;
}

a {
  text-decoration: none;
  color: inherit;
}

a:hover, a:active {
  text-decoration: underline;
}

h4 {
  margin: .2em 0;
  text-overflow: ellipsis;
  white-space: nowrap; 
    overflow: hidden;
  font-size: 1rem;
  height: 1.3em;
}

figure {
  width: 100%;
  margin: 0;
  align-self: center;
  position: relative;
}

figcaption {
  position: absolute;
  color: #FFF;
  top: 0;
  left: 0;
  margin: 0;
  padding: .5em;
  text-shadow: #000 0 0 2em, #000 0 0 .5em, #000 0 0 .1em;
  font-size: 1rem;
}

figcaption:first-child {
  font-weight: 600;
  background: red;
}

figcaption:last-child {
  top: initial;
  bottom: 0;
}

figure > img {
  width: 100%;
}

img.profile-pic {
  float: left;
  width: 4em;
  height: 4em;
  margin-right: .3em;
}

section {
  position: absolute;
  display: grid;
  width: 100%;
  justify-content: space-around;
  overflow-y: scroll;
  background: #fff;
  
}

#game-list {
  grid-template-columns: repeat(auto-fit, minmax(200px, auto));
  
}

#channel-list {
  visibility: hidden;
  grid-template-columns: repeat(auto-fit, minmax(320px, auto));
}

.game-box {
  flex: 1 0 auto;
  width: 100%;
  display: flex;
  padding: 1em;
  flex-direction: column;
}

.game-box > a:hover {
  text-decoration: none;
  color: purple;
}

#channel-list {
  
}

.channel-box {
  flex: 1 0 auto;
  display: flex;
  padding: 1em;
  flex-direction: column;
}

.channel_box > * {
  width: 100%;
}

time {
  color: #f33;
  font-weight: 600;
}

JavaScript

const Langs = {
    "ab":{
        "name":"Abkhaz",
        "nativeName":"аҧсуа"
    },
    "aa":{
        "name":"Afar",
        "nativeName":"Afaraf"
    },
    "af":{
        "name":"Afrikaans",
        "nativeName":"Afrikaans"
    },
    "ak":{
        "name":"Akan",
        "nativeName":"Akan"
    },
    "sq":{
        "name":"Albanian",
        "nativeName":"Shqip"
    },
    "am":{
        "name":"Amharic",
        "nativeName":"አማርኛ"
    },
    "ar":{
        "name":"Arabic",
        "nativeName":"العربية"
    },
    "an":{
        "name":"Aragonese",
        "nativeName":"Aragonés"
    },
    "hy":{
        "name":"Armenian",
        "nativeName":"Հայերեն"
    },
    "as":{
        "name":"Assamese",
        "nativeName":"অসমীয়া"
    },
    "av":{
        "name":"Avaric",
        "nativeName":"авар мацӀ, магӀарул мацӀ"
    },
    "ae":{
        "name":"Avestan",
        "nativeName":"avesta"
    },
    "ay":{
        "name":"Aymara",
        "nativeName":"aymar aru"
    },
    "az":{
        "name":"Azerbaijani",
        "nativeName":"azərbaycan dili"
    },
    "bm":{
        "name":"Bambara",
        "nativeName":"bamanankan"
    },
    "ba":{
        "name":"Bashkir",
        "nativeName":"башҡорт теле"
    },
    "eu":{
        "name":"Basque",
        "nativeName":"euskara, euskera"
    },
    "be":{
        "name":"Belarusian",
        "nativeName":"Беларуская"
    },
    "bn":{
        "name":"Bengali",
        "nativeName":"বাংলা"
    },
    "bh":{
        "name":"Bihari",
        "nativeName":"भोजपुरी"
    },
    "bi":{
        "name":"Bislama",
        "nativeName":"Bislama"
    },
    "bs":{
        "name":"Bosnian",
        "nativeName":"bosanski jezik"
    },
    "br":{
        "name":"Breton",
        "nativeName":"brezhoneg"
    },
    "bg":{
        "name":"Bulgarian",
        "nativeName":"български език"
    },
    "my":{
        "name":"Burmese",
        "nativeName":"ဗမာစာ"
    },
    "ca":{
        "name":"Catalan; Valencian",
     ...