import { Tabs } from 'choerodon-ui';

const TabPane = Tabs.TabPane;

ReactDOM.render(
  <div className="card-container">
    <Tabs type="card">
      <TabPane tab="Tab Title 1" key="1">
        <p>Content of Tab Pane 1</p>
        <p>Content of Tab Pane 1</p>
        <p>Content of Tab Pane 1</p>
      </TabPane>
      <TabPane tab="Tab Title 2" key="2">
        <p>Content of Tab Pane 2</p>
        <p>Content of Tab Pane 2</p>
        <p>Content of Tab Pane 2</p>
      </TabPane>
      <TabPane tab="Tab Title 3" key="3">
        <p>Content of Tab Pane 3</p>
        <p>Content of Tab Pane 3</p>
        <p>Content of Tab Pane 3</p>
      </TabPane>
    </Tabs>
  </div>,
  mountNode,
);

.card-container > .c7n-tabs-card > .c7n-tabs-content {
  height: 120px;
  margin-top: -16px;
}

.card-container > .c7n-tabs-card > .c7n-tabs-content > .c7n-tabs-tabpane {
  background: #fff;
  padding: 16px;
}

.card-container > .c7n-tabs-card > .c7n-tabs-bar {
  border-color: #fff;
}

.card-container > .c7n-tabs-card > .c7n-tabs-bar .c7n-tabs-tab {
  border-color: transparent;
  background: transparent;
}

.card-container > .c7n-tabs-card > .c7n-tabs-bar .c7n-tabs-tab-active {
  border-color: #fff;
  background: #fff;
}