JSFiddle - React, Tailwind, and code Playground

by Mahmoud Kandeel

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.3.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<link rel="stylesheet" href="http://cdn3.devexpress.com/jslib/15.1.3/css/dx.common.css">
<link rel="stylesheet" href="http://cdn3.devexpress.com/jslib/15.1.3/css/dx.light.css">
<script src="http://cdn3.devexpress.com/jslib/15.1.7/js/dx.all.js"></script>
<div id="container"></div>

JavaScript

var employees = [{
  "ID": 1,
  "FirstName": "John",
  "LastName": "Heart",
  "Prefix": "Mr.",
  "Position": "CEO",
  "Picture": "images/employees/01.png",
  "BirthDate": "1964/03/16",
  "HireDate": "1995/01/15",
  "Notes": "John has been in the Audio/Video industry since 1990. He has led DevAv as its CEO since 2003.\r\n\r\nWhen not working hard as the CEO, John loves to golf and bowl. He once bowled a perfect game of 300.",
  "Address": "351 S Hill St.",
  "StateID": 5
}, {
  "ID": 2,
  "FirstName": "Olivia",
  "LastName": "Peyton",
  "Prefix": "Mrs.",
  "Position": "Sales Assistant",
  "Picture": "images/employees/09.png",
  "BirthDate": "1981/06/03",
  "HireDate": "2012/05/14",
  "Notes": "Olivia loves to sell. She has been selling DevAV products since 2012. \r\n\r\nOlivia was homecoming queen in high school. She is expecting her first child in 6 months. Good Luck Olivia.",
  "Address": "807 W Paseo Del Mar",
  "StateID": 5
}, {
  "ID": 3,
  "FirstName": "Robert",
  "LastName": "Reagan",
  "Prefix": "Mr.",
  "Position": "CMO",
  "Picture": "images/employees/03.png",
  "BirthDate": "1974/09/07",
  "HireDate": "2002/11/08",
  "Notes": "Robert was recently voted the CMO of the year by CMO Magazine. He is a proud member of the DevAV Management Team.\r\n\r\nRobert is a championship BBQ chef, so when you get the chance ask him for his secret recipe.",
  "Address": "4 Westmoreland Pl.",
  "StateID": 4
}, {
  "ID": 4,
  "FirstName": "Greta",
  "LastName": "Sims",
  "Prefix": "Ms.",
  "Position": "HR Manager",
  "Picture": "images/employees/04.png",
  "BirthDate": "1977/11/22",
  "HireDate": "1998/04/23",
  "Notes": "Greta has been DevAV's HR Manager since 2003. She joined DevAV from Sonee Corp.\r\n\r\nGreta is currently training for the NYC marathon. Her best marathon time is 4 hours. Go Greta.",
  "Address": "1700 S Grandview Dr.",
  "StateID": 11
}, {
  "ID": 5,
  "FirstName": "Brett",
  "LastName": "Wade",
  "Prefix": "Mr.",
  "Position": "IT Manager",
  "Picture":...