Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="root"></div>
              
            
!

CSS

              
                html {
  box-sizing: border-box;
  font-size: 100%;
  font-family: Helvetica, Arial, sans-serif;
}

body {
  background: #eee;
  padding-top: 4rem;
  color: #fff;
  -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

p {
  line-height: 1.5;
}

.TabContainer {
  background-color: #fff;
  max-width: 768px;
  margin: 0 auto 4rem auto;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  &:hover {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  }
}

.Tabs {
  display: flex;
  flex-flow: row nowrap;
  text-align: center;
  color: #fff;
  background-color: #9c4dcc;
}

.Tab {
  flex: 1 0 auto;
  padding: 1rem 1.5rem calc(1rem - 4px);
  border-bottom: 4px solid transparent;
  &:hover {
    cursor: pointer;
    border-bottom: 4px solid #fbc2eb;
  }
  &.is-selected {
    border-bottom: 4px solid #fbc2eb;
  }
}

.TabPanel {
  color: #000;
  padding: 1rem;
}
              
            
!

JS

              
                // Dummy data
const tabData = [
  [
    {
      name: 'Apple',
      content: `Apple Inc. is an American multinational technology company headquartered in Cupertino, California that designs, develops, and sells consumer electronics, computer software, and online services. The company's hardware products include the iPhone smartphone, the iPad tablet computer, the Mac personal computer, the iPod portable media player, the Apple Watch smartwatch, and the Apple TV digital media player. Apple's consumer software includes the macOS and iOS operating systems, the iTunes media player, the Safari web browser, and the iLife and iWork creativity and productivity suites. Its online services include the iTunes Store, the iOS App Store and Mac App Store, Apple Music, and iCloud.`,
    },
    {
      name: 'Google',
      content: `Google is an American multinational technology company specializing in Internet-related services and products. These include online advertising technologies, search, cloud computing, software, and hardware. Google was founded in 1998 by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University, in California. Together, they own about 14 percent of its shares, and control 56 percent of the stockholder voting power through supervoting stock. They incorporated Google as a privately held company on September 4, 1998. An initial public offering (IPO) took place on August 19, 2004, and Google moved to its new headquarters in Mountain View, California, nicknamed the Googleplex. In August 2015, Google announced plans to reorganize its various interests as a conglomerate called Alphabet Inc. Google, Alphabet's leading subsidiary, will continue to be the umbrella company for Alphabet's Internet interests. Upon completion of the restructure, Sundar Pichai became CEO of Google, replacing Larry Page, who became CEO of Alphabet.`,
    },
    {
      name: 'Facebook',
      content: `Facebook is an American for-profit corporation and an online social media and social networking service based in Menlo Park, California. The Facebook website was launched on February 4, 2004, by Mark Zuckerberg, along with fellow Harvard College students and roommates, Eduardo Saverin, Andrew McCollum, Dustin Moskovitz, and Chris Hughes`,
    },
  ],
  [
    {
      name: 'Sony',
      content: `Sony Corporation is a Japanese multinational conglomerate corporation headquartered in Kōnan, Minato, Tokyo. Its diversified business includes consumer and professional electronics, gaming, entertainment, and financial services. The company is one of the leading manufacturers of electronic products for the consumer and professional markets. Sony was ranked 113th on the 2016 list of Fortune Global 500.`,
    },
    {
      name: 'Microsoft',
      content: `Microsoft Corporation is an American multinational technology company headquartered in Redmond, Washington. It develops, manufactures, licenses, supports and sells computer software, consumer electronics, personal computers, and services. Its best known software products are the Microsoft Windows line of operating systems, the Microsoft Office suite, and the Internet Explorer and Edge web browsers. Its flagship hardware products are the Xbox video game consoles and the Microsoft Surface tablet lineup. As of 2016, it is the world's largest software maker by revenue, and one of the world's most valuable companies.`,
    },
    {
      name: 'Nintendo',
      content: `Nintendo Co., Ltd. is a Japanese multinational consumer electronics and video game company headquartered in Kyoto, Japan. Nintendo is one of the world's largest video game companies by market capitalization. Founded on 23 September 1889 by Fusajiro Yamauchi, it originally produced handmade hanafuda playing cards. By 1963, the company had tried several small niche businesses, such as cab services and love hotels. The word Nintendo can be roughly translated from Japanese to English as "leave luck to heaven".`,
    },
  ]
];

/*
*
* App wrapper
*
*/
const App = () =>
  <div class="App">
    <TabContainer defaultTab={0} tabData={tabData[0]}/>
    <TabContainer defaultTab={2} tabData={tabData[1]}/>
  </div>;

/*
*
* TabPanel component. 
* Displays content data passed down by TabContainer.
*
*/
const TabPanel = ({ content }) => 
  <div className="TabPanel">
    <p>{content}</p>
  </div>;

/*
*
* Tab component.
*
*/
class Tab extends React.Component {
  _handleClick(e) {
    const { setCurrentTab, index } = this.props;
    setCurrentTab(index);
  }

  render() {
    const { text, isSelected } = this.props;
    return (
      <li 
        className={`Tab${isSelected ? ' is-selected' : ''}`} 
        onClick={this._handleClick.bind(this)}>
        {text}
      </li>
    );
  }
}

/*
*
* TabContainer component.
*
*/
class TabContainer extends React.Component {
  constructor(props) {
    super(props);

    // Set initial state
    this.state = {
      currentTab: this.props.defaultTab,
    };
    
    // Dummy data
    this._tabData = this.props.tabData;
  }

  _setCurrentTab(currentTab) {
    // Don't re-render if current tab is clicked again
    if (this.state.currentTab === currentTab) {
      return;
    }
    this.setState({ currentTab });
  }

  _renderTabs() {
    // Map data to Tab component. 
    // Pass index down so we can send it up to this.state later.
    return (
      <ul className="Tabs">
        {
          this._tabData.map((tab, index) => {
            return (
              <Tab
                index={index}
                text={tab.name}
                isSelected={this.state.currentTab === index}
                setCurrentTab={this._setCurrentTab.bind(this)}
              />
            )
          })
        }
      </ul>
    );
  }

  _renderTabPanel() {
    // Map data to TabPanel component
    return this._tabData.map((tab, index) => {
      if (this.state.currentTab === index) {
        return (
          <TabPanel 
            content={tab.content} />
        );
      }
    });
  }

  render() {
    const Tabs = this._renderTabs();
    const TabPanel = this._renderTabPanel();
    return (
      <div className="TabContainer">
        {Tabs}
        {TabPanel}
      </div>
    );
  }
}

/*
*
* Render App
*
*/
ReactDOM.render(<App />, document.querySelector('#root'))

              
            
!
999px

Console