JSFiddle - React, Tailwind, and code Playground
HTML
<div class='col-md-12'><h3 style='background-color:#151515;color:white;padding:10px;margin:0px;'>
<i class="far fa-hdd"></i> Internet of Things
<button onClick="$(this).toggleText('Items','Products');toggle_active_iot(this);">Items</button>
</h3></div>
<div class='iot-items active'>
Test Items
</div>
<div class='iot-products'>
Test Products
</div>
CSS
.iot-items, .iot-products {display:none;}
.active {display:block !important;}
JavaScript
$.fn.extend({
toggleText: function(a, b){
return this.text(this.text() == b ? a : b);
}
});
function toggle_active_iot(link){
$('.iot-items').toggleClass('active');
$('.iot-products').toggleClass('active');
}