Tabs Component

This example shows how to create a simple tabbed interface.

jsxCopy codeimport React, { useState } from 'react';
import ReactDOM from 'react-dom';

function Tabs() {
  const [activeTab, setActiveTab] = useState('Tab1');

  const renderContent = () => {
switch (activeTab) {
  case 'Tab1':
    return <div>This is content for Tab 1.</div>;
  case 'Tab2':
    return <div>This is content for Tab 2.</div>;
  case 'Tab3':
    return <div>This is content for Tab 3.</div>;
  default:
    return null;
}
  };

  return (
<div>
  <h1>Tabs Example</h1>
  <div>
    <button onClick={() => setActiveTab('Tab1')}>Tab 1</button>
    <button onClick={() => setActiveTab('Tab2')}>Tab 2</button>
    <button onClick={() => setActiveTab('Tab3')}>Tab 3</button>
  </div>
  <div>{renderContent()}</div>
</div>
  );
}

ReactDOM.render(<Tabs />, document.getElementById('root'));