JSFiddle - React, Tailwind, and code Playground

HTML

<body></body>

CSS

body{
    padding: 1em;
}
#menu{
    width: 200px;
    float: left;
}
.shop1{
    background-color: #FFAAAA;
}

.shop2{
    background-color: #AAFFAA;
}
td{
    padding: 0.5em;
    border: 1px solid #999;
}
F

JavaScript

var obj = {
  "83" : {
    "id" : "83",
    "mid" : "5",
    "name" : "ディケイル",
    "shop" : "2",
    "price" : "",
    "mix" : "Y",
    "base" : "374",
    "sacriface" : "286"
  },
  "84" : {
    "id" : "84",
    "mid" : "6",
    "name" : "メルケラス",
    "shop" : "2",
    "price" : "",
    "mix" : "Y",
    "base" : "83",
    "sacriface" : "263"
  },
  "85" : {
    "id" : "85",
    "mid" : "7",
    "name" : "ルン=フィアレス",
    "shop" : "2",
    "price" : "",
    "mix" : "Y",
    "base" : "84",
    "sacriface" : "363"
  },
  "86" : {
    "id" : "86",
    "mid" : "8",
    "name" : "ゼラウラス",
    "shop" : "2",
    "price" : "",
    "mix" : "Y",
    "base" : "85",
    "sacriface" : "353"
  },
  "87" : {
    "id" : "87",
    "mid" : "9",
    "name" : "ペルソアティス",
    "shop" : "2",
    "price" : "",
    "mix" : "Y",
    "base" : "86",
    "sacriface" : "226"
  },
  "217" : {
    "id" : "217",
    "mid" : "",
    "name" : "リムドラ",
    "shop" : "0",
    "price" : "",
    "mix" : "N",
    "base" : "N",
    "sacriface" : "N"
  },
  "218" : {
    "id" : "218",
    "mid" : "",
    "name" : "アースドラゴン",
    "shop" : "0",
    "price" : "",
    "mix" : "N",
    "base" : "N",
    "sacriface" : "N"
  },
  "219" : {
    "id" : "219",
    "mid" : "1",
    "name" : "カミルドラゴン",
    "shop" : "0",
    "price" : "",
    "mix" : "Y",
    "base" : "218",
    "sacriface" : "355"
  },
  "220" : {
    "id" : "220",
    "mid" : "",
    "name" : "シードラゴン",
    "shop" : "0",
    "price" : "",
    "mix" : "N",
    "base" : "N",
    "sacriface" : "N"
  },
  "221" : {
    "id" : "221",
    "mid" : "2",
    "name" : "アクアドラゴン",
    "shop" : "0",
    "price" : "",
    "mix" : "Y",
    "base" : "220",
    "sacriface" : "357"
  },
  "222" : {
    "id" : "222",
    "mid" : "",
    "name" : "ファイアドラゴン",
    "shop" : "0",
    "price" : "",
    "mix" : "N",
    "base" : "N",
    "sacriface" : "N"
  },
  "223" : {
    "id" : "223",
    "mid" : "",
    "name" : "エグザグド",
    "shop" : "0",
    "price" : "",
    "mix" : "N",
   ...