How to convert the inner div elements into tabs?

Step 1: Install react-tabs:

npm install react-tabs

Step 2: Import necessary components and use Tabs and TabList to create tabs:

import React from 'react';
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
import 'react-tabs/style/react-tabs.css';


const EditProfile = () => {
  return (
    <div className='editprofile-left-main-second-div'>
      <Tabs>
        <TabList>
          <Tab>
            <div className='editprofile-profile-information'>
              <Image src={"/header/Vector.svg"} width={22} height={21} alt='noimage' />
              <p className='editprofile-profile-information-heading'>Profile information</p>
            </div>
          </Tab>
          <Tab>
            <div className='editprofile-account-management'>
              <Image src={"/header/Settings.svg"} width={22} height={21} alt='noimage' />
              <p className='editprofile-account-management-heading'>Account management</p>
            </div>
          </Tab>
          <Tab>
            <div className='editprofile-organization-heirarcy'>
              <Image src={"/header/Group.svg"} width={22} height={21} alt='noimage' />
              <p className='editprofile-organization-heirarcy-heading'>Organization hierarchy</p>
            </div>
          </Tab>
        </TabList>


        <TabPanel>
          {/* Content for the 'Profile information' tab */}
          {/* Add your content here */}
        </TabPanel>
        <TabPanel>
          {/* Content for the 'Account management' tab */}
          {/* Add your content here */}
        </TabPanel>
        <TabPanel>
          {/* Content for the 'Organization hierarchy' tab */}
          {/* Add your content here */}
        </TabPanel>
      </Tabs>
    </div>
  );
};


export default EditProfile;

Note: You need to customize the content inside the TabPanel components according to your requirements. The react-tabs library provides additional styling options that you can explore in their documentation if needed.