JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tabset">
	<div class="tabs">
		<button type="button" class="tabbutton active" data-a="tab1">tab1</button>
		<button type="button" class="tabbutton" data-a="tab2">tab2</button>
	</div>
	<div id="tab1" class="tab active">
		<div class="tab_radio">
			<span class="radio active" data-b="radio1">radio1</span>
			<span class="radio" data-b="radio2">radio2</span>
			<span class="radio" data-b="radio3">radio3</span>
		</div>
		<ul>
			<li>テスト</li>
			<li>テスト2</li>
		</ul>
	</div>
	<div id="tab2" class="tab">
		<div class="tab_radio">
			<span class="radio" data-b="radio1">radio1</span>
			<span class="radio active" data-b="radio2">radio2</span>
			<span class="radio" data-b="radio3">radio3</span>
		</div>
		<ul>
			<li>テスト3</li>
			<li>テスト4</li>
		</ul>
	</div>
</div>
<input type="text" id="tab">
<input type="text" id="radio">

JavaScript

$( '.tabbutton' ).on( 'click', function() {
	var $_ = $( this ), target = $_.data( 'a' ), $t;
	// ボタンのラジオ処理
	$( '.tabbutton' ).removeClass( 'active' );
	$_.addClass( 'active' );
	// タブのラジオ処理
	$t = $( '.tab' ).removeClass( 'active' ).filter( '#' + target ).addClass( 'active' );
	// 値の代入
	$( '#tab' ).val( target );
	$( '#radio' ).val( $t.find( '.active' ).data( 'b' ) );
} );
$( '.radio' ).on( 'click', function() {
	var $_ = $( this ), $parent = $_.parent(), $mytab = $_.parents( '.tab' );
	// タブラジオのラジオ処理
	$parent.find( '.radio' ).removeClass( 'active' );
	$_.addClass( 'active' );
	// タブがアクティブな場合のみ処理
	if ( $mytab.hasClass( 'active' ) ) {
		// 値の代入
		$( '#radio' ).val( $_.data( 'b' ) );
	}
} );
// 初期値を入れる
$( '#tab' ).val( $( '.tab.active' ).attr( 'id' ) );
$( '#radio' ).val( $( '.tab.active .active' ).data( 'b' ) );