JSFiddle - React, Tailwind, and code Playground

by dying_sakura

JavaScript

const data = [
    { id: "1", fighter1: "V", fighter2: "DD", fightNumber: 1 },
    { id: "2", fighter1: "R", fighter2: "V", fightNumber: 2 },
    { id: "3", fighter1: "J", fighter2: "X", fightNumber: 3 },
    { id: "4", fighter1: "H", fighter2: "KK", fightNumber: 4 },
    { id: "5", fighter1: "DD", fighter2: "MM", fightNumber: 5 },
    { id: "6", fighter1: "V", fighter2: "Z", fightNumber: 6 },
    { id: "7", fighter1: "V", fighter2: "SS", fightNumber: 7 },
    { id: "8", fighter1: "C", fighter2: "V", fightNumber: 8 },
    { id: "9", fighter1: "P", fighter2: "joker", fightNumber: 9 },
    { id: "10", fighter1: "P", fighter2: "LL", fightNumber: 10 },
    { id: "11", fighter1: "Y", fighter2: "QQ", fightNumber: 11 },
    { id: "12", fighter1: "R", fighter2: "OO", fightNumber: 12 },
    { id: "13", fighter1: "D", fighter2: "R", fightNumber: 13 },
    { id: "14", fighter1: "X", fighter2: "DD", fightNumber: 14 },
    { id: "15", fighter1: "P", fighter2: "W", fightNumber: 15 },
    { id: "16", fighter1: "Y", fighter2: "BB", fightNumber: 16 },
    { id: "17", fighter1: "D", fighter2: "O", fightNumber: 17 },
    { id: "18", fighter1: "W", fighter2: "CC", fightNumber: 18 },
    { id: "19", fighter1: "JJ", fighter2: "KK", fightNumber: 19 },
    { id: "20", fighter1: "I", fighter2: "T", fightNumber: 20 },
    { id: "21", fighter1: "T", fighter2: "MM", fightNumber: 21 },
    { id: "22", fighter1: "R", fighter2: "RR", fightNumber: 22 },
    { id: "23", fighter1: "T", fighter2: "FF", fightNumber: 23 },
    { id: "24", fighter1: "G", fighter2: "DD", fightNumber: 24 },
    { id: "25", fighter1: "L", fighter2: "FF", fightNumber: 25 },
    { id: "26", fighter1: "S", fighter2: "EE", fightNumber: 26 },
    { id: "27", fighter1: "BB", fighter2: "GG", fightNumber: 27 },
    { id: "28", fighter1: "E", fighter2: "MM", fightNumber: 28 },
    { id: "29", fighter1: "J", fighter2: "T", fightNumber: 29 },
    { id: "30", fighter1: "V", fighter2: "X", fightNumber: 30 },
    { id: "31",...