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://cdn-na.infragistics.com/igniteui/latest/js/infragistics.excel-bundled.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.spreadsheet-bundled.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 class="actions spreadsheet-sample" id="tabs">
		<ul>
			<li><a href="#tabs-1">表示</a></li>
			<li><a href="#tabs-2">ズーム レベル</a></li>
			<li><a href="#tabs-3">シート</a></li>
			<li><a href="#tabs-4">書式設定</a></li>
			<li><a href="#tabs-5">削除</a></li>
		</ul>

		<div class="show clearfix" id="tabs-1">
			<div class="show-row">
                <span for="gridlines" class="show-row-text">
                    <div id="gridlines" class="show-row-checkbox"></div>
                    グリッド線
                </span>
            </div>
            <div class="show-row">
                <span for="headings" class="show-row-text">
                    <div id="headings" class="show-row-checkbox"></div>
                    見出し
                </span>
            </div>
            <div class="show-row">
                <span for="formulabar" class="show-row-text">
                    <div id="formulabar" class="show-row-checkbox"></div>
                    数式バー
                </span>
            </div>
        </div>

		<div...

CSS

.ui-igspreadsheet .ui-menu-item {
            white-space:nowrap;
        }

		.sampleContainer .ui-tabs .ui-tabs-panel {
            background:#efefef;
            border-radius:0;
            border-color:#ddd;
            border-bottom:none;
		}


        .sampleContainer .ui-tabs {
            padding: 0;
            border-radius:0;
            border:none;
        }

        .sampleContainer .ui-tabs .ui-tabs-nav {
            padding:0;
            background:transparent;
            border:none;
        }

        .clearfix:after {
          content: "";
          display: table;
          clear: both;
        }

        .sampleContainer .ui-tabs .ui-tabs-nav li.ui-state-default {
            background:transparent;
        }

        .sampleContainer .ui-tabs .ui-tabs-nav li.ui-state-default,
        .sampleContainer .ui-tabs .ui-tabs-nav li.ui-state-active {
            border:none;
        }

        .sampleContainer .ui-tabs .ui-tabs-nav li.ui-state-default:hover {
            background:#efefef;
        }

        .sampleContainer .ui-tabs .ui-tabs-nav li.ui-state-active {
            background:#efefef;
            color:#333;
            border: 1px solid #ddd;
            border-bottom: none;
        }

        .sampleContainer .ui-tabs .ui-tabs-nav li.ui-state-active a {
            color:#333;
            font-weight:bold;
        }

        .sampleContainer .ui-tabs .ui-tabs-nav li.ui-state-active:hover {
            background:#efefef;
            color:#333;
            border: 1px solid #ddd;
            border-bottom: none;
        }

        #freeze {
            margin-right: 10px;
        }

        #zoomSlider {
            max-width: 30%;
            min-width: 100px;
            float: left;
            margin: 9px 9px 9px 0px;
        }

        .spreadsheet-sample-btn,
        #freeze,
        #zoomSlider,
        .f-left {
            float: left;
        }

        .spreadsheet-sample-btn
        {
            max-width: 200px;
 ...

JavaScript

$( function () {
			if ($("#spreadsheet2").length !== 0) {
				$("#tabs").tabs();
				$("#spreadsheet2").igSpreadsheet({
					height: "600",
					width: "100%"
				});

				var workbook = null;
				var xhr = new XMLHttpRequest();
				xhr.open('GET', 'https://jp.igniteui.com/data-files/FormattingData.xlsx', true);
				xhr.responseType = 'arraybuffer';

				xhr.onload = function (e) {
					// response is unsigned 8 bit integer
					var responseArray = new Uint8Array(this.response);
					$.ig.excel.Workbook.load(responseArray, function () {
						workbook = arguments[0];
						$("#spreadsheet2").igSpreadsheet("option", "workbook", workbook);
					}, function () {
						console.log("fail");
					})
				};

				xhr.send();

				$("#zoomSlider").slider({
					change: function (event, ui) {
						$("#spreadsheet2").igSpreadsheet("option", "zoomLevel", ui.value);
					},
					min: 10,
					max: 400,
					value: 100,
					step: 1
				});

				$("#zoomIn").click(function () {
					$('#spreadsheet2').igSpreadsheet('executeAction', "zoomIn");
					var zoomInLevel = $('#spreadsheet2').igSpreadsheet('option', "zoomLevel");
					$("#zoomSlider").slider("value", zoomInLevel);
				});
				$("#zoomOut").click(function () {
					$('#spreadsheet2').igSpreadsheet('executeAction', "zoomOut");
					var zoomOutLevel = $('#spreadsheet2').igSpreadsheet('option', "zoomLevel");
					$("#zoomSlider").slider("value", zoomOutLevel);
				});
				$("#zoom").click(function () {
					$('#spreadsheet2').igSpreadsheet('executeAction', "zoomTo100");
					var zoomLevel = $('#spreadsheet2').igSpreadsheet('option', "zoomLevel");
					$("#zoomSlider").slider("value", zoomLevel);
				});
				$("#zoomSelection").click(function () {
					$('#spreadsheet2').igSpreadsheet('executeAction', "zoomToSelection");
					var zoomSelectionLevel = $('#spreadsheet2').igSpreadsheet('option', "zoomLevel");
					$("#zoomSlider").slider("value", zoomSelectionLevel);
				});

				$("#split").click(function ()...