JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://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>
<script src="https://www.igniteui.com/js/external/FileSaver.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>

<div>
		<ol>
			<li>Download this <a href="https://igniteui.com/HtmlSamples/javascript-excel-library/report.xlsx" download="">sample  Excel file</a></li>
			<li>Click Choose File/Browse button below and pick the sample Excel file or another excel file.</li>
			<li>Edit excel content or disable editing</li>
			<li>Download excel file</li>
		</ol>
        <div class="spreadsheet-sample-btn">
            <input type="file" id="input" accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"></input>
            <span> Choose a file... </span>
        </div>
		<div>
			<input class="spreadsheet-sample-btn" id="saveWorkbookBtn" type="button" value="Save Workbook" onclick="saveWorkbook()">
		</input></div>
		<div class="editing-controls-container">
			<span for="enableEditing" class="show-row-text">
				<div id="enableEditing"></div>
				<span class="label-editing">Enable excel editing</span>
			</span>
		</div>
		<div class="clear"></div>
		
		<div id="result"></div>
		<div id="spreadsheet"></div>
	</div>

CSS

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

		#sampleContainer ol {
			padding: 0px 0px 0px 15px;
			margin: 0;
		}

         #sampleContainer ol li{
			margin-bottom: 10px;
		}

        #sampleContainer ol li:last-of-type {
			margin: 0;
		}

		#result {
			display: none;
			color: red;
		}

        .spreadsheet-sample-btn
        {
			position: relative;
			float: left;
            max-width: 200px;
            padding: 8px;
            background: #fff;
            color:#444;
            text-align: center;
            border-radius: 3px;
            font-size: 12px;
            text-transform: uppercase;
            margin:15px 15px 15px 0;
            border:1px solid #ccc;
            overflow:hidden;
        }

        .spreadsheet-sample-btn:hover {
            border-color:#09f;
        }

        #input {
            top:0;
            left:0;
            width: 100%;
            height: 100%;
            opacity: 0;
            overflow: hidden;
            position: absolute;
            z-index: 1;
        }

		.clear {
			clear: both;
		}

		#saveWorkbookBtn {
			padding: 7px;
		}

		.editing-controls-container {
			position: relative;
			min-width: 200px;
			float: left;
			margin: 15px;
		}

			.editing-controls-container #enableEditing {
				margin-right: 6px;
				border-radius: 3px;
				position: absolute;
				left: 0;
				top: 10px;
			}

		.label-editing {
			display:inline-block;
			position: absolute;
			left: 23px;
			top: 15px;
		}

JavaScript

$(function () {
			var editingEnabled = true;
			$("#spreadsheet").igSpreadsheet({
				height: "600",
				width: "100%",
				isFormulaBarVisible: true,
				editModeEntering: function (e, args) {
					return editingEnabled;
				}
			});

			$("#enableEditing").igCheckboxEditor({
				checked: true,
				valueChanged: function (evt, ui) {
					editingEnabled = ui.newState;
				}
			});

			//Check for Browser's - File API support
			if (window.FileReader) {
				$("#input").on("change", function () {
					var excelFile,
						fileReader = new FileReader();

					$("#result").hide();

					fileReader.onload = function (e) {
						var buffer = new Uint8Array(fileReader.result);

						$.ig.excel.Workbook.load(buffer, function () {
							workbook = arguments[0];
							setWorkbook();

						}, function (error) {
							$("#result").text("The excel file is corrupted.");
							$("#result").show(1000);
						});
					}

					if (this.files.length > 0) {
						excelFile = this.files[0];
						if (excelFile.type === "application/vnd.ms-excel" || excelFile.type === "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" || (excelFile.type === "" && (excelFile.name.endsWith("xls") || excelFile.name.endsWith("xlsx")))) {
							fileReader.readAsArrayBuffer(excelFile);
						} else {
							$("#result").text("The format of the file you have selected is not supported. Please select a valid Excel file ('.xls, *.xlsx').");
							$("#result").show(1000);
						}
					}
				})
			} else {
				$("#result").text("The File APIs are not fully supported in this browser.");
				$("#result").show(1000);
			}
		});

		function setWorkbook() {
			if ($("#spreadsheet").igSpreadsheet !== undefined && workbook != null) {
				//load specific workbook
				$("#spreadsheet").igSpreadsheet("option", "workbook", workbook);
			}
		}

		function saveWorkbook(workbook, name) {
			$("#spreadsheet").igSpreadsheet("option", "workbook")
				.save({ type: 'blob' }, function (data)...