JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://jp.igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="https://jp.igniteui.com/js-data/nw-employees"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/i18n/infragistics-ja.js"></script>

<table id="grid1"></table>

CSS

.right {
            height: 100%;
            padding: 3px;
        }

        .right > span:nth-of-type(odd) {
            font-weight: bold;
        }

        #grid1_responsiveAdaptive > div {
            float: left;
            width: 33%;
        }

JavaScript

$(function () {
            $("#grid1").igGrid({
                dataSource: northwindEmployees,
                primaryKey: "ID",
                width: "100%",
                height: "500px",
                autoGenerateColumns: false,
                columns: [
                    { headerText: "Employee ID", key: "ID", dataType: "number", hidden: true },
                    { headerText: "Image", key: "ImageUrl", dataType: "string", template: "<img width='100' height='90' src='${ImageUrl}'></img>" },
                    { headerText: "Name", key: "Name", dataType: "string" },
                    { headerText: "Title", key: "Title", dataType: "string" },
                    { headerText: "Phone", key: "Phone", dataType: "string" },
                    { headerText: "Hire Date", key: "HireDate", dataType: "date" }
                ],
                features: [
                    {
                        name: "Responsive",
                        enableVerticalRendering: false,
                        singleColumnTemplate: {
                            phone:
                                "<div style='float: left;'>" +
                                    "<img width='100' height='90' src='${ImageUrl}'></img>" +
                                "</div>" +
                                "<div class='right' style='float: left; font-size: 1.1em;'>" +
                                    "<span>Name:&nbsp;</span><span>${Name}</span><br/>" +
                                    "<span>Title:&nbsp;</span><span>${Title}</span><br/>" +
                                    "<span>Phone:&nbsp;</span><span><a href='${PhoneUrl}'>${Phone}</a></span><br/>" +
                                    "<span>HireDate:&nbsp;</span><span>${HireDate}</span><br/>" +
                                "</div>",
                            tablet:
                                "<div style='float: left;'>" +
                                    "<img width='100' height='90'...