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'));