<div id="root">
  
</div>
* {
  list-style: none;
  outline: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial;
}

.tabbed-pane {
  margin: 50px;
  width: 500px;
  height: 300px;
  border: 2px solid gray;

  .content {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 80%;
  }

  .navigation {
    width: 100%;
    height: 20%;
    background: rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;

    ul {
      height: 100%;
      li {
        float: left;
        display: flex;
        width: 75px;
        height: 100%;
        cursor: pointer;
        align-items:center;
        justify-content:center;

        &:hover, &.active {
          background: rgba(0, 0, 0, 0.05);
        }
        
      }
    }
  }
}
class App extends React.Component {
  render() {
    const tabs = [
      {
        label: "Willy",
        component: <DummyComponent content="Willy the whale" />
      },
      {
        label: "Sean",
        component: <DummyComponent content="Sean the snake" />
      },
      {
        label: "Ben",
        component: <DummyComponent content="Ben the bird" />
      }
    ];

    return <TabbedPane tabs={tabs} />;
  }
}

class TabbedPane extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      activeTab: 0
    };

    this.showTab = this.showTab.bind(this);
  }

  showTab(i) {
    this.setState({
      activeTab: i
    });
  }

  render() {
    const active = this.state.activeTab;

    const tabs = this.props.tabs;
    const currentTab = tabs[active];

    return (
      <div className="tabbed-pane">
        <div className="content">{currentTab.component}</div>
        <div className="navigation">
          <ul>
            {tabs.map((tab, i) => (
              <li
                key={i}
                className={i === active ? "active" : ""}
                onClick={() => this.showTab(i)}
              >
                {tab.label}
              </li>
            ))}
          </ul>
        </div>
      </div>
    );
  }
}

class DummyComponent extends React.Component {
  render() {
    return <h1>I am {this.props.content}</h1>;
  }
}

ReactDOM.render(<App />, document.getElementById("root"));
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.development.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.development.js