JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tabs">
    <ul style="cursor:pointer">    
        <li>
            <a href="#tabs-1">
                <div style="float: left; margin-right: 20px;">Tab One</div>
                <div style="float: right; text-align:right;">
                    <div id="editTab-1">edit</div>
                    <div id="delTab-1">X</div>
                </div>  
            </a>
        </li>   
        <li>
            <a href="#tabs-2">
                <div style="float: left; margin-right: 20px;">Tab Two</div>
                <div style="float: right; text-align:right;">
                    <div id="editTab-2">edit</div>
                    <div id="delTab-2">X</div>
                </div>  
            </a>
        </li>   
    </ul>        

    <div id="tabs-1" class="tabPane">Tab One Content</div>  
    <div id="tabs-2" class="tabPane">Tab Two Content</div>    
</div>

CSS

/*
 * jQuery UI CSS Framework 1.8.18
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Theming/API
 */

/* Layout helpers
----------------------------------*/
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:before, .ui-helper-clearfix:after { content: ""; display: table; }
.ui-helper-clearfix:after { clear: both; }
.ui-helper-clearfix { zoom: 1; }
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }


/* Interaction Cues
----------------------------------*/
.ui-state-disabled { cursor: default !important; }


/* Icons
----------------------------------*/

/* states and images */
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }


/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/*
 * jQuery UI Accordion 1.8.18
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Accordion#theming
 */
/* IE/Win - Fix animation bug - #4615 */
.ui-accordion { width: 100%; }
.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; }
.ui-accordion .ui-accordion-li-fix { display: inline; }
.ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; }
.ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em .7em; }
.ui-accordion-icons...

JavaScript

var $tabs = $("#tabs").tabs();

$tabs.find("a div[id]").on("click", function() {
    
    var id = $(this).attr("id"),
        idTab = parseInt(id.substring(id.length - 1)),            
        isEdit = id.indexOf("edit") > -1,
        isDelete = id.indexOf("del") > -1,        
        index = $tabs.tabs('option', 'selected');
    
    if (index + 1 === idTab) {
        if (isEdit) { 
            console.log("Edit Tab " + (index+1)); 
            //however you want to edit here
        }
        
        if (isDelete) { 
            console.log("Delete Tab " + (index+1)); 
            $tabs.tabs("remove", index);
        }
    }

}).css("cursor", "pointer");