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>
<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 id="dashboard" class="dashboard">
        <div class="tile1">
            <h3>Lorem Ipsum の概要</h3>
			<p>Lorem Ipsum は印刷業界で一般的に使用されているダミー テキストです。16 世紀に書籍の見本を作成するために初めて使用されて以来、印刷業で標準のダミー テキストになりました。電子文書に画期的な進歩があった現在も引き続き使用されています。Lorem Ipsum を含む Letraset シートのリリースで大衆文化に入り、最近では Aldus PageMaker などのソフトにも Lorem Ipsum が含まれます。</p>
        </div>
        <div class="tile2">
            <h3>用途</h3>
			<p>閲覧者がレイアウトを確認する際に、その内容が理解できてしまうとレイアウトの確認の妨げになることがあります。Lorem Ipsum は、「コンテンツをここに挿入する」などのテキストを使用する代わりに英字を正規分布させ、判読可能な英語のように表示したものです。デスクトップ パブリッシング パッケージや web ページのエディターの多くは、Lorem Ipsum を既定のモデル テキストとして使用します。「lorem ipsum」を web で検索すると、構築中の web サイトを見つけることができます。時がたつにつれてさまざまなバージョンが出てきました。中にはユーモアのあるコンテンツを含むバージョンもあります。</p>
        </div>
        <div class="tile3">
            <h3>起源</h3>
			<p>Lorem Ipsum はランダムなテキストではありません。45 BC 年の古代ラテン文化で作成された 2000 年前のテキストです。バージニアの Hampden-Sydney 大学のラテン文学の教授であるリチャード・マッククリントック氏は、Lorem Ipsum テキストであまり使用されていないラテン言語「consectetur」を研究し、古典文学の都市を訪れ、その起源を探究しました。Lorem Ipsum は、哲学者キケロによる BC 45 年の著作「de Finibus Bonorum et Malorum」(善と悪の究極について) の 1.10.32 および 1.10.33 から取られている。この本は倫理の理論についての本でルネッサンス期に人気のあった本です。Lorem Ipsum の最初の行、「Lorem ipsum dolor sit amet...」、はセクション 1.10.32 の行にあります。  1500 年から使用される Lorem Ipsum...

CSS

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

.ui-igtile.ui-state-hover {
    border: none;
    background-color: transparent;
    background-image: none;
}

.ui-igtile-inner-container {
    padding:5px;
    height:100%;
    border:none;
    background-color: transparent;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

.ui-igtile {
    background-color: inherit;
    padding:0px;
    border:none;
    z-index:1;
    overflow:hidden
}

.ui-igtile-minimized p:hover {
    opacity: 1.0;
}

.ui-igtile-minimized p:first-line {

}

.ui-igtile-minimized p {
    opacity: 0.0;
}

.ui-igtile h3, .ui-igtile p  {
    margin:10px 0 10px 10px;
    -webkit-transition:0.2s;
    transition:0.2s;
}

.ig-tile-minimize-button {
    padding:10px;
}

.ui-igtile-inner-container {
    color: #fff;
}

.ig-tile-minimize-button .ig-tile-minimize-icon {
    background-position: 0px -240px;
}

.tile4.ui-igtile-inner-container,
.tile8.ui-igtile-inner-container,
.tile10.ui-igtile-inner-container {
    color: rgba(0, 0, 0, 0.75);
}

.tile4 .ig-tile-minimize-icon, 
.tile8 .ig-tile-minimize-icon,
.tile10 .ig-tile-minimize-icon {
    background-position: 0px -209px;
}

.tile1.ui-igtile-inner-container { /*iglightblue*/
    background-color: #44ACD6;
    color: #fff;
}


.tile2.ui-igtile-inner-container { /*igdarkgray*/
    background-color: #494949;
    color: #fff;
}

.tile3.ui-igtile-inner-container { /*iglightgreen*/
    background-color: #A4BA29;
    color: #fff;
}

.tile4.ui-igtile-inner-container { /*iglightyellow*/
    background-color: #FDBD48;
}

.tile5.ui-igtile-inner-container { /*iglightpink*/
    background-color: #FF6A6F;
    color: #fff;
}

.tile7.ui-igtile-inner-container { /*igdarkblue*/
    background-color: #216E99;
    color: #fff;
}

.tile6.ui-igtile-inner-container { /*iglightpurple*/
    background-color: #9E73C1;
    color: #fff;
}

.tile8.ui-igtile-inner-container {...

JavaScript

$(function () {
            $('#dashboard').igTileManager({
                columnWidth: '25%',
                marginLeft: 10,
                marginTop: 10,
                splitterOptions: {
                    enabled: true,
                    collapsible: true
                },
                items: [
                    { rowIndex: 0, colIndex: 0, rowSpan: 2, colSpan: 1 },
                    { rowIndex: 0, colIndex: 1, rowSpan: 1, colSpan: 2 },
                    { rowIndex: 0, colIndex: 3, rowSpan: 1, colSpan: 1 },
                    { rowIndex: 1, colIndex: 1, rowSpan: 1, colSpan: 1 },
                    { rowIndex: 1, colIndex: 2, rowSpan: 1, colSpan: 2 },
                    { rowIndex: 2, colIndex: 0, rowSpan: 1, colSpan: 2 },
                    { rowIndex: 2, colIndex: 2, rowSpan: 2, colSpan: 2 },
                    { rowIndex: 3, colIndex: 0, rowSpan: 1, colSpan: 1 },
                    { rowIndex: 3, colIndex: 1, rowSpan: 2, colSpan: 1 },
                    { rowIndex: 4, colIndex: 2, rowSpan: 1, colSpan: 1 },
                    { rowIndex: 4, colIndex: 3, rowSpan: 1, colSpan: 1 },
                    { rowIndex: 4, colIndex: 0, rowSpan: 1, colSpan: 1 }
                ]
            });
        });