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://jp.igniteui.com/js/angular.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://cdn-na.infragistics.com/igniteui/latest/js/extensions/igniteui-angularjs.js"></script>
<script src="https://jp.igniteui.com/js-data/candidates"></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>

<div ng-app="sampleApp" ng-controller="tileManagerController">
        <ig-tile-manager id="dashboard" data-source="data" margin-left="10" margin-top="10" width="100%" height="550px" right-panel-tiles-width="200" right-panel-tiles-height="156" class="dashboard" maximized-state='<h3>${name}</h3><img src="${picture}" title="${name}" alt="error" /><p class="text">${text}</p><div style="clear: both"><span class="color">Skills:</span></div><ul class="skills"></ul><div class="linkedIn"><span class="color">LinkedIn:</span> <a href="${linkedin}" target="_blank">http://www.linkedin.com/profile</a></div>' minimized-state='<h4>${name}</h4><img src="${picture}" class="minimized" title="${name}" alt="error" />'>
        </ig-tile-manager>
    </div>

CSS

.dashboard {
            position: relative;
            width: 100%;
            height: 550px;
        }

        #dashboard h4 {
            font-size: 18px;
            text-align: center;
        }

        #dashboard h3 {
            text-align: center;
        }

        #dashboard img {
            width: 150px;
            height: 175px;
            margin-left: -75px;
            margin-top: 15px;
            position: absolute;
            left: 50%;
        }

        #dashboard .ui-igtile-maximized img {
            width: 200px;
            height: 250px;
            position: static;
            float: left;
            margin: 20px 20px 20px 0;
        }

        #dashboard .ui-igtilemanager-right img {
            width: 60px;
            height: 80px;
            margin-left: -30px;
            margin-top: 15px;
        }

        .ui-igtile-maximized .text {
            margin-top: 20px;
            margin-bottom: 20px;
        }

        .ui-igtile-maximized div {
            text-align: left;
        }

        .linkedIn, .skills {
            word-wrap: break-word;
        }

        div.ui-igtile-inner-container h4 {
            margin-bottom: 0.1em;
        }

JavaScript

$(function () {
var sampleApp = angular.module('sampleApp', ['igniteui-directives']);
        sampleApp.controller('tileManagerController', function ($scope) {
            $scope.data = dataSource;
        });
});