JSFiddle - React, Tailwind, and code Playground

code reviews: listing google products (using bootgrid library)

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.fa.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<table id="grid-basic" class="table table-hover table-striped">
    <thead>
        <tr>
            <th data-column-id="id" data-type="numeric" data-identifier="true">id</th>
            <th data-column-id="name">name</th>
            <th data-column-id="url" data-formatter="link">url</th>
            <th data-column-id="desc">description</th>
            <th data-column-id="tags">tags</th>
        </tr>
    </thead>
    <tbody>
      <!-- data via javascript -->
    </tbody>
</table>

JavaScript

populateTable();
styleTable();

function populateTable() {

	// exercise: externalize this
	var products = [
  	{
  		name: "google",
      url: "http://google.com",
      desc: "search engine",
      tags: "search"
  	},
    {
    	name: "drive",
      url: "http://drive.google.com",
      desc: "free-mium file storage",
      tags: "business, personal"
    },
    {
    	name: "docs",
      url: "http://docs.google.com",
      desc: "free and collaborative office suite (word processor + spreadsheet + presentations)",
      tags: "business, personal, writing, accounting, presentations, management"
      
    },
    {
    	name: "maps",
      url: "http://maps.google.com",
      desc: "free-to-use world atlas",
      tags: "mapping, maps, data visualization, transit, traffic, cycling"
    },
    { 
    	name: "gmail",
      url: "http://gmail.com",
      desc: "free unlimited email",
      tags: "business, personal, communication, email"
    },
    { 
    	name: "inbox",
      url: "http://inbox.google.com",
      desc: "same as gmail email (but with snooze button!)",
      tags: "business, personal, communication, email"
      
    },
    {
    	name: "calendar",
      url: "http://calendar.google.com", 
      desc: "private and group timekeeping",
      tags: "business, personal, time, management"
    },
    {
    	name: "youtube",
      url: "http://youtube.com",
      desc: "the world's video library",
      tags: "social networking, video, music, entertainment"
    },
    {
    	name: "keep",
      url: "http://keep.google.com",
      desc: "paperless to-do lists",
      tags: "business, personal, management, tasks"
    },
    {
    	name: "hangouts",
      url: "http://hangouts.google.com",
      desc: "private and group messaging",
      tags: "business, personal, communication"
    },
    { 
    	name: "finance",
      url: "http://finance.google.com",
      desc: "stocks with charts and news",
      tags: "business, charts, stocks, money, management, data...