JSFiddle - React, Tailwind, and code Playground

by basiclaser

HTML

<h1></h1>sources
<p>http://overwatch.gamepedia.com/Genji?version=e4d8892ec45b6e6057846115cff3fc8d</p>
<p>http://overwatch.metabomb.net/gameplay-guides/overwatch-herocharacter-stats-guide-july-2016</p>
var chars = [
{
  name: 'Zenyatta',
  fullName: 'Tekhartha Zenyatta',
  radius: 7,
  type: 'Support',
  country: 'Nepal',
  age: '20',
  latitude: 28,
  longitude: 85
},
{
  name: 'Symmetra',
  fullName: 'Satya Vaswani',
  radius: 7,
  type: 'Support',
  country: 'India',
  age: '28',
  latitude: 18,
  longitude: 78
},
{
  name: 'Mercy',
  fullName: 'Dr. Angela Ziegler',
  radius: 5,
  type: 'Support',
  country: 'Switzerland',
  age: '37',
  latitude: 47,
  longitude: 8.5
},
{
  name: 'Lúcio',
  fullName: 'Lúcio Correia dos Santos',
  radius: 7,
  type: 'Support',
  country: 'Brazil',
  age: '26',
  latitude: -10,
  longitude: -50
},
{
  name: 'Zarya',
  fullName: 'Aleksandra "Zarya" Zaryanova ',
  radius: 7,
  type: 'Tank',
  country: 'Russia',
  age: '28',
  latitude: 60,
  longitude: 85
},
{
  name: 'Winston',
  fullName: 'Winston',
  radius: 7,
  type: 'Tank',
  country: 'Moon',
  age: '20',
  latitude: 0,
  longitude: -150
},
{
  name: 'Roadhog',
  fullName: 'Mako Rutledge',
  radius: 7,
  type: 'Tank',
  country: 'Australia',
  age: '48',
  latitude: -25,
  longitude: 125
},
{
  name: 'Reinhardt',
  fullName: 'Reinhardt Wilhelm',
  radius: 5,
  type: 'Tank',
  country: 'Germany',
  age: '61',
  latitude: 52,
  longitude: 11
},
{
  name: 'D.Va',
  fullName: 'Hana Song',
  radius: 5,
  type: 'Tank',
  country: 'South Korea',
  age: '19',
  latitude: 37,
  longitude: 128
},
{
  name: 'Widowmaker',
  fullName: 'Amélie Lacroix',
  radius: 5,
  type: 'Defense',
  country: 'France',
  age: '33',
  latitude: 47,
  longitude: 3
},
{
  name: 'Bastion',
  fullName: 'SST Laboratories Siege Automaton E54',
  radius: 7,
  type: 'Defense',
  country: 'Unknown',
  age: '30',
  latitude: -15,
  longitude: -150
},
{
  name: 'Hanzo',
  fullName: 'Hanzo Shimada',
  radius: 4,
 ...

CSS

body: {
  background: white;
  font-family: helvetica;
}

JavaScript

var allHeroes = [
  {
    name: 'Zenyatta',
    fullName: 'Tekhartha Zenyatta',
    age: 20,
    health: 50,
    shield: 100,
    armor: false,
    Type: 'support',
    assumedPresentingGender: 'male',
    height: 1.72,
    human: false, 
		entity: "omnic",
    countryOfOrigin: 'Nepal',
    mainAssociatedMap: 'Nepal',
    dialogues: [
      {
        who: "Bastion",
        ifSpecificMap: false
      },
      {
        who: "Hanzo",
        ifSpecificMap: false
      }
    ],
    languagesSpoken: [
      'english',
      'omnic'
    ],
    abilities: [
      {
        type: 'heal',
        selfHeal: false,
        name: 'Orb of Harmony',
        ammo: 1,
        duration: 'infinite', //3s if out of sight
        roundsPerClick: 1,
        heal: '30HP/s',
        range: '40m'
      },
      {
        name: 'Orb of Discord',
      	type: 'debuff',
      	debuff: 50, //percent of damage the receive
        ammo: 1,
        duration: 'infinite', //3s if out of sight
        range: '40m'
      },
      {
        name: 'Orb of Destruction',
        type: 'attack',
        selfDamage: false,
        ammo: 20,
        fireRate: '3 rps',
        duration: '0.3s',
        cooldownReload: '2s',
        roundsPerClick: 1,
        damage: 45,
        range: '15m',
        dropoffRange: '15m'
      },     
      {
        name: 'Orb Volley',
        type: 'attack',
        selfDamage: false,
        ammo: 20,
        fireRate: '2.5 rps',
        duration: '2s',
        cooldownReload: '1s',
        roundsPerClick: '1s',
        damage: 35,
        range: '15m'
      },
      {
        name: 'Transendence',
				type: 'heal',
        selfHeal: true,
        duration: '6s',
        heal: '100HP/s',
        range: '10m'
      }
    ]
  },
  {
    name: 'Bastion',
    fullName: 'SST Laboratories Siege Automaton E54',
    age: 30,
    health: 200,
    armor: 100,
    Type: 'defense',
    assumedPresentingGender: 'male',
    height: '1.2m',
		entity: "omnic",
    countryOfOrigin:...