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>

<h1 class="hOne">Infragistics 自動車販売代理店</h1>
    <h3>自動車メーカーを選択して参照します</h3>
    <div id="car-tabs">
        <ul>
            <li><a href="#magarcedes">Magarcedes</a></li>
            <li><a href="#hoida">Hoida</a></li>
            <li><a href="#paushe">Paushe</a></li>
        </ul>
        <div id="magarcedes" class="dashboard">
            <div>
                <figure>
                    <figcaption>2013 LSL AMG</figcaption>
                    <img src="https://jp.igniteui.com/images/samples/tile-manager/car-dealership/shutterstock_139519967.jpg" alt="error"></img>
                </figure>
                <ul>
                    <li>価格: $199,500 &ndash; $206,000</li>
                    <li>0-100 - 3.8 秒</li>
                    <li>最大スピード: 317 km/h</li>
                </ul>
            </div>
            <div>
                <figure>
                    <figcaption>2013 363 AMG</figcaption>
                    <img src="https://jp.igniteui.com/images/samples/tile-manager/car-dealership/shutterstock_38284540.jpg" alt="error"></img>
                </figure>
                <ul>
                    <li>価格: $57,130 &ndash; $61,430</li>
                    <li>0-60 - 4.4 秒</li>
                    <li>最大スピード: 250...

CSS

body {
            font-family: 'Segoe UI', 'Arial', 'Helvetica', 'sans-serif';
        }

        ul {
            text-decoration: none;
            padding: 0;
            margin: 0;
            list-style: none;
        }
        
        .ui-igtile-maximized .ui-igtile-inner-container {overflow: hidden;}


        #car-tabs {
            margin: auto;
        }

        .dashboard {
            font-size: 0.85em!important;
            position: relative;
            height: 660px;
        }

            .dashboard img {
                width: 100%;
            }

            .dashboard figure {
                margin:0;
            }

            .dashboard figcaption {
                font-size: 1.1em;
                background-color: #454545;
                color: #fff;
                padding: 10px 0 10px 10px;
            }

            .dashboard .ui-igtile-maximized  figcaption {
                background-color: #2cbdf9;
                -webkit-transition:0.5s;
            }

                .dashboard div ul {
                    border: 1px solid #ececec;
                    padding: 5px 5px 10px 5px;
                    -webkit-transition:0.5s;
                }

                    .dashboard div ul li:nth-child(n+2):before {
                        content: "• ";
                        color: #2cbdf9; 
                    }

                    .dashboard div ul li:first-child {
                        color: #2cbdf9;
                    }
        
        #car-tabs.ui-tabs .ui-tabs-panel, #car-tabs.ui-tabs-nav, #car-tabs.ui-tabs .ui-tabs-nav li.ui-state-default {
            border: none;
            padding: 0;
        }

        #car-tabs.ui-tabs .ui-tabs-nav li.ui-state-active a {
            background-color: #2cbdf9!important;

        }

        #car-tabs.ui-tabs .ui-tabs-nav li.ui-state-default a {
            background-color: #95defc;
        }

        #car-tabs.ui-tabs .ui-tabs-nav li.ui-state-hover a {
           ...

JavaScript

$(function () {
var activated = [false, false, false, false],
            optionsWide = {
                columnWidth: 210,
                columnHeight: 210,
                marginLeft: 10,
                marginTop: 10,
                items: [
                    { rowIndex: 0, colIndex: 0, rowSpan: 2, colSpan: 2 },
                    { rowIndex: 0, colIndex: 2, rowSpan: 1, colSpan: 1 },
                    { rowIndex: 1, colIndex: 2, rowSpan: 1, colSpan: 1 },
                    { rowIndex: 2, colIndex: 0, rowSpan: 1, colSpan: 1 },
                    { rowIndex: 2, colIndex: 1, rowSpan: 1, colSpan: 1 },
                    { rowIndex: 2, colIndex: 2, rowSpan: 1, colSpan: 1 }
                ],
                maximizedTileIndex: 0,
                minimizedState: ':not(ul)'
            },
            optionsPhone = {
                columnWidth: 125,
                columnHeight: 160,
                marginLeft: 5,
                marginTop: 5,
                items: [
                    { rowIndex: 0, colIndex: 0, rowSpan: 2, colSpan: 2 },
                    { rowIndex: 0, colIndex: 2, rowSpan: 1, colSpan: 1 },
                    { rowIndex: 1, colIndex: 2, rowSpan: 1, colSpan: 1 },
                    { rowIndex: 2, colIndex: 0, rowSpan: 1, colSpan: 1 },
                    { rowIndex: 2, colIndex: 1, rowSpan: 1, colSpan: 1 },
                    { rowIndex: 2, colIndex: 2, rowSpan: 1, colSpan: 1 }
                ],
                maximizedTileIndex: 0,
                minimizedState: ':not(ul)'
            },
            options;
        $(function () {
            $('#car-tabs').tabs({
                activate: function (event, ui) {
                    var index = ui.newTab.index();
                    if (!activated[index]) {
                        ui.newPanel.igTileManager(options);
                        activated[index] = true;
                    } else {
                        ui.newPanel.igTileManager('reflow');
                    }
   ...