JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="cssreset.css">
		<link rel="stylesheet" type="text/css" href="dota_counter.css">
		<link rel="stylesheet" href="jquery-ui.css">
		<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
		<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
		<script src="dota_counter.js"></script>
		<meta charset="UTF-8">
		<title>Dota 2 CounterPick</title>
	</head>
	<body>
		<div id ="wrapper">
			<div id="header">
				<img id="logo" src="pictures/dota_counter.png">
			</div>
			<div id="content">
				<input id="searchBar" type="text" placeholder="Search hero to counter">
					<div id="placeholder">

					</div>
					<div id="placeholder2">
							
					</div>
			</div>
			<div id="footer">
			</div>
		</div>

	</body>
</html>

CSS

body {
	background-color:#666;
	
	
}

#wrapper {
	
}

#header {
	margin-left: 569px;
	margin-top: 50px;
}

#logo {
	width:300px;
	height:50px;
	
}

#searchBar {
	width:350px;
	height:35px;
	margin-left: 545px;
	margin-top:50px;
	border:1px  solid #ccc;
	border-radius: 5px; 
	padding-left: 10px;
	font-size: 15px;
}

JavaScript

$ (function() {

  var heroes = {

    "Abaddon":{
      "counters": "Undying" + "Anti-Mage" + "Outworld Devourer" + "Shadow Demon" + "Techies" + "Ancient Apparition" + "Meepo" + "Riki"
    },
    "Alchemist":{
      "counters": "Riki" + "Ursa" + "Drow" + "Phantom Assassin" + "Troll Warlord" + "Bounty Hunter" + "Slark" + "Lifestealer"
    },
    "Ancient Apparition":{
      "counters": "Anti-Mage" + "Clinkz" + "Riki" + "Juggernaut" + "Zeus" + "Techies" + "Phantom Assassin" + "Spectre"
    },
    "Axe":{
      "counters": "Timbersaw" + "Venomancer" + "Silencer" + "Necrophos" + "Zeus" + "Phoenix" + "Lich" + "Ancient Apparition"
    },
    "Bane":{
      "counters": "Phantom Lancer" + "Chaos Knight" + "Meepo" + "Tidehunter" + "Sand King" + "Razor" + "Naga Siren" + "Undying"
    },
    "Batrider":{
      "counters": "Huskar" + "Viper" + "Juggernaut" + "Sniper" + "Venomancer" + "Undying" + "Weaver" + "Drow Ranger"
    },
    "Beastmaster":{
      "counters": "Axe" + "Bristleback" + "Lich" + "Timbersaw" + "Zeus" + "Meepo" + "Centaur Warrunner" + "Tidehunter"
    },
    "Bloodseeker":{
      "counters": "Wraith King" + "Techies" + "Tiny" + "Troll Warlod" + "Lifestealer" + "Dragon Knight" + "Legion Commander" + "Chaos Knight"
    },
    "Bounty Hunter":{
      "counters": "Phantom Lancer" + "Slardar" + "Meepo" + "Naga Siren" + "Bloodseeker" + "Chaos Knight" + "Huskar" + "Techies"
    },
    "Brewmaster":{
      "counters": "Undying" + "Omniknight" + "Death Prophet" + "Timbersaw" + "Weaver" + "Techies" + "Queen of Pain" + "Anti-Mage"
    },
    "Bristleback":{
      "counters": "Necrophos" + "Venomancer" + "Viper" + "Ancient Apparition" + "Razor" + "Death Prophet" + "Clockwerk" + "Omniknight"
    },
    "Broodmother":{
      "counters": "Axe" + "Slardar" + "Earthshaker" + "Meepo" + "Bristleback" + "Dark Seer" + "Naga Siren" + "Bounty Hunter"
    },
    "Centaur Warrunner":{
      "counters": "Undying" + "Necrophos" + "Juggernaut" + "Witch Doctor" + "Ember Spirit" +...