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/modules/infragistics.ui.layout.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="layout-wrapper">
        <div id="layout">
            <div class="item">
                <div class="item-inner-container first-cat">
                </div>
            </div>
            <div class="item">
                <div class="item-inner-container second-cat">
                </div>
            </div>
            <div class="item">
                <div class="item-inner-container third-cat">
                </div>
            </div>
            <div class="item yellow">
                <div class="item-inner-container fourth-cat">
                </div>
            </div>
        </div>
    </div>

CSS

#layout {
            position: relative;
        }

        .item {
            background-color: #F5F5F5;
            border: 1px solid #BDBDBD;
        }

        .item-inner-container {
            width: 100%;
            height: 100%;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
        }

        .first-cat {
            background-image: url(https://jp.igniteui.com/images/samples/layout-manager/koen-eijkelenboom-353679.jpg);
        }

        .second-cat {
            background-image: url(https://jp.igniteui.com/images/samples/layout-manager/mikhail-vasilyev-253977.jpg);
        }

        .third-cat {
            background-image: url(https://jp.igniteui.com/images/samples/layout-manager/cel-lisboa-73965.jpg);
        }

        .fourth-cat {
            background-image: url(https://jp.igniteui.com/images/samples/layout-manager/anthony-de-kroon-377702.jpg);
        }

JavaScript

$(function () {
            $('#layout').igLayoutManager({
                layoutMode: "grid",
                width: "100%",
                height: "500px",
                gridLayout: {
                    columnHeight: ["20%", "200px", "*"],
                    columnWidth: ["20%", "*", "*"],
                    marginLeft: 5,
                    marginTop: 5
                },
                items: [
                    {
                        rowSpan: 2,
                        colSpan: 2,
                        colIndex: 0,
                        rowIndex: 0
                    },
                    {
                        rowSpan: 1,
                        colSpan: 1,
                        rowIndex: 0,
                        colIndex: 2
                    },
                    {
                        rowSpan: 1,
                        colSpan: 1,
                        rowIndex: 1,
                        colIndex: 2
                    },
                    {
                        rowSpan: 1,
                        colSpan: 3,
                        colIndex: 0,
                        rowIndex: 2
                    }
                ]
            });
        });