JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.3.min.js"></script>
<link rel="stylesheet" href="https://az564335.vo.msecnd.net/jslib/16.1.6/css/dx.common.css">
<link rel="stylesheet" href="https://az564335.vo.msecnd.net/jslib/16.1.6/css/dx.light.css">
<script src="https://az564335.vo.msecnd.net/jslib/16.1.6/js/dx.all.js"></script>
<div id="options_container">
  <div data-options="dxTemplate : { name: 'Tab 1' } ">
    <div id="tab_inner">
      <div id="dx1-btn" class="button"></div>
      <button id="control-btn">Control 1</button>
    </div>
  </div>
  <div data-options="dxTemplate : { name: 'Tab 2' } ">
    <div id="tab_inner">
      <div id="dx2-btn" class="button"></div>
      <button id="control-btn-2">Control 2</button>
    </div>
  </div>
</div>

CSS

#tab_inner {
  background-color: #efefef;
  margin: 15px;
  padding: 20px;
}

JavaScript

// TAB PANEL
$('#options_container').dxTabPanel({
deferRendering: true,
  dataSource: [
    {title: 'Tab 1', template: 'Tab 1'},
    {title: 'Tab 2', template: 'Tab 2'},
    {title: 'Tab 3', template: 'Tab 3'},
    {title: 'Tab 4', template: 'Tab 4'}
  ],
  height: 250
});

// BUTTONS
$("#dx1-btn").dxButton({
  text: 'DX1 Button',
  onClick: function() {
    alert("The button was clicked");
  }
});

$("#dx2-btn").dxButton({
  text: 'DX2 Button',
  onClick: function() {
    alert("The button was clicked");
  }
});

$( "#control-btn, #control-btn-2" ).click(function() {
  alert( "The button was clicked" );
});