Desktop Anchored Horizontal Tab example :

```jsx
                    
var tabData = [
    {
        tabHeader: 'Classic',
        tabkey: '1',
        tabId: 'testmob1',
        contenttitle: 'Classic Rooms',
        contenttype: 'input',
        tabdisabled: false

    },
    {
        tabHeader: 'Luxury',
        tabkey: '2',
        tabId: 'testmob2',
        contenttitle: 'Luxury Rooms',
        contenttypeMob: 'input',
        tabdisabled: false

    },
    {
        tabHeader: 'Junior Suites',
        tabkey: '3',
        tabId: 'testmob3',
        contenttitle: 'Junior Suites',
        contenttype: 'input',
        tabdisabled: false

    },
    {
        tabHeader: 'Prestige Suite',
        tabkey: '4',
        tabId: 'testmob4',
        contenttitle: 'Prestige Suite',
        contenttype: 'input',
        tabdisabled: true

    },
    {
        tabHeader: 'Beach Suite',
        tabkey: '5',
        tabId: 'testmob5',
        contenttitle: 'Beach Suite',
        contenttype: 'input',
        tabdisabled: false

    },
    {
        tabHeader: 'Deluxe Suite',
        tabkey: '6',
        tabId: 'testmob6',
        contenttitle: 'Deluxe Suite',
        contenttype: 'input',
        tabdisabled: false

    },
    {
        tabHeader: 'Opera Suite',
        tabkey: '7',
        tabId: 'testmob7',
        contenttitle: 'Opera Suite',
        contenttype: 'input',
        tabdisabled: false

    },
    {
        tabHeader: 'Classic Rooms',
        tabkey: '8',
        tabId: 'testmob8',
        contenttitle: 'Classic Rooms',
        contenttype: 'input',
        tabdisabled: false

    },
    {
        tabHeader: 'Classic Rooms',
        tabkey: '9',
        tabId: 'testmob9',
        contenttitle: 'Classic Rooms',
        contenttype: 'input',
        tabdisabled: false

    },
    {
        tabHeader: 'Classic Rooms',
        tabkey: '10',
        tabId: 'testmob10',
        contenttitle: 'Classic Rooms',
        contenttype: 'input',
        tabdisabled: false

    },
    {
        tabHeader: 'Classic Rooms',
        tabkey: '11',
        tabId: 'testmob11',
        contenttitle: 'Classic Rooms',
        contenttype: 'input',
        tabdisabled: false

    },
    {
        tabHeader: 'Classic Rooms',
        tabkey: '12',
        tabId: 'testmob12',
        contenttitle: 'Classic Rooms',
        contenttype: 'input',
        tabdisabled: false

    }
]

const PanelContent = ({ children }) => (
    <div className='jp-mobile-anchored-horizontal-tab'>{children}</div>
)


class AnchoredHorizontalTabExample extends React.Component{
    constructor(){
    super()
    this.state = {
          deskval : 0
      }
    }

  handleChangeDesk (event, deskval) {
        this.setState ({ deskval : deskval });
        
        this.onAnchoreHorizontalMobileTabClick({ tabId: "test" + deskval })
    }

onAnchoreHorizontalTabClick(mdata) {
        let MyMobPanel = '';
        switch (mdata.tabId) {
            case 'testmob1':
                MyMobPanel = (<PanelContent id={mdata.tabId}>
                    <input type="text" name="fname" placeholder="First Name" id="fname" />
                </PanelContent>);
                break;
            case 'testmob2':
                MyMobPanel = (<PanelContent id={mdata.tabId}>
                    <input type="text" name="lname" placeholder="Last Name" id="lname" />
                </PanelContent>);
                break;
            case 'testmob3':
                MyMobPanel = (<PanelContent id={mdata.tabId}>
                    Test
            </PanelContent>);
                break;
            case 'testmob4':
                MyMobPanel = (<PanelContent id={mdata.tabId}>
                    <input type="text" name="fname" placeholder="Mobileno" id="fname" />
                </PanelContent>);
                break;
            case 'testmob5':
                MyMobPanel = (<PanelContent id={mdata.tabId}>
                    <input type="text" name="fname" placeholder="Email" id="fname" />
                </PanelContent>);
                break;
            case 'testmob6':
                MyMobPanel = (<PanelContent id={mdata.tabId}>
                    Test
                </PanelContent>);
                break;
            case 'testmob7':
                MyMobPanel = (<PanelContent id={mdata.tabId}>
                    <input type="text" name="lname" placeholder="Last Name" id="lname" />
                </PanelContent>);
                break;
            case 'testmob8':
                MyMobPanel = (<PanelContent id={mdata.tabId}>
                    Test
                </PanelContent>);
                break;
            case 'testmob9':
                MyMobPanel = (<PanelContent id={mdata.tabId}>
                    <input type="text" name="fname" placeholder="Mobileno" id="fname" />
                </PanelContent>);
                break;
            case 'testmob10':
                MyMobPanel = (<PanelContent id={mdata.tabId}>
                    <input type="text" name="fname" placeholder="Email" id="fname" />
                </PanelContent>);
                break;
            case 'testmob11':
                MyMobPanel = (<PanelContent id={mdata.tabId}>
                    Test
                </PanelContent>);
                break;
            default: MyMobPanel = (<PanelContent id={mdata.tabId}>
                Test
            </PanelContent>);
        }
        this.setState({
            tabContent: MyMobPanel,
        });
        return MyMobPanel;
    }


render(){
      return(
        <AnchoredTab
                tabheader={tabData}
                value={this.state.deskval}
                onChange={this.handleChangeDesk.bind(this)}
                tabcontent={this.state.tabContent}
                onTabClick={this.onAnchoreHorizontalTabClick.bind(this)}
         />
       ) 
       }
   };   <AnchoredHorizontalTabExample/>
```