I already know how to add an extra field in user profile. But in my case I have A lot of field to add and It is good practice that your form is not too long. So I decided to implement tab panel in the top level of the form so that form is shorter and easy to use by the user. Anyone has the snippiest for this will be appreciated.

HERE IS MY SAMPLE CODE

add_action( 'show_user_profile', $plugin_admin, 'wp_user_social_tab' );
add_action( 'edit_user_profile', $plugin_admin, 'wp_user_social_tab' );
public function wp_user_social_tab( $user ) {
?>


<ul id="tabs">
    <li class="active">Tab 1</li>
    <li>Tab 2</li>
    <li>Tab 3</li>
</ul>

<?php 

}

What I want is to be like this