JSFiddle - React, Tailwind, and code Playground

by DeadByElpy

HTML

<script src="https://use.fontawesome.com/7e1e2deff0.js"></script>

CSS

table {
  height: 272px;
  width: 100%;
}

td {
  background-color: #383838;
  color: #fff;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  width: 72px;
  height: 54px;
  line-height: 54px;
}

.fa {
  display: table-cell !important;
}

td:before {
  width: 72px;
  height: 54px;
  line-height: 54px;
}

.blue {
  color: #0094f0;
}

.green {
  color: #05b305;
}

.backspace {
  color: red;
  padding: 0;
  width: 123px;
}

.backspace:before {
  font-size: 60px;
}

.yellow {
  color: #fab300
}

.fa-globe:before {
  font-size: 32px;
  display: inline-block;
}

.fa-reply:before {
  font-size: 16px;
  line-height: 24px;
  display: block;
  height: 21px;
  width: 100%;
}


.focus {
  background-color: #0094f0;
  color: #fff;
}

JavaScript

var keyboards = {
  ru: [
    [{
      icon: "fa fa-cog",
      text: ""
    }, {
      icon: "",
      text: "1"
    }, {
      icon: "",
      text: "2"
    }, {
      icon: "",
      text: "3"
    }, {
      icon: "",
      text: "4"
    }, {
      icon: "",
      text: "5"
    }, {
      icon: "",
      text: "6"
    }, {
      icon: "",
      text: "7"
    }, {
      icon: "",
      text: "8"
    }, {
      icon: "",
      text: "9"
    }, {
      icon: "",
      text: "0"
    }, {
      icon: "",
      text: "-"
    }, {
      icon: "backspace fa fa-long-arrow-left",
      text: ""
    }],
    [{
      icon: "",
      text: "#&$"
    }, {
      icon: "",
      text: "й"
    }, {
      icon: "",
      text: "ц"
    }, {
      icon: "",
      text: "у"
    }, {
      icon: "",
      text: "к"
    }, {
      icon: "",
      text: "е"
    }, {
      icon: "",
      text: "н"
    }, {
      icon: "",
      text: "г"
    }, {
      icon: "",
      text: "ш"
    }, {
      icon: "",
      text: "щ"
    }, {
      icon: "",
      text: "з"
    }, {
      icon: "",
      text: "х"
    }, {
      icon: "",
      text: "Очистка"
    }],
    [{
      icon: "",
      text: "^"
    }, {
      icon: "",
      text: "ф"
    }, {
      icon: "",
      text: "ы"
    }, {
      icon: "",
      text: "в"
    }, {
      icon: "",
      text: "а"
    }, {
      icon: "",
      text: "п"
    }, {
      icon: "",
      text: "р"
    }, {
      icon: "",
      text: "о"
    }, {
      icon: "",
      text: "л"
    }, {
      icon: "",
      text: "д"
    }, {
      icon: "",
      text: "ж"
    }, {
      icon: "",
      text: "э"
    }, {
      icon: "",
      text: "Готово",
      className: 'yellow'
    }],
    [{
      icon: "fa fa-globe",
      text: "Rus",
      rowSpan: 2,
      className: "green"
    }, {
      icon: "",
      text: "я"
    }, {
      icon: "",
      text: "ч"
    }, {
      icon: "",
      text: "с"
    }, {
      icon: "",
      text: "м"
    }, {
     ...