Chrome Tabs - Getting Started

HTML

<script src="https://cdn.rawgit.com/adamschwartz/chrome-tabs/gh-pages/js/chrome-tabs.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/adamschwartz/chrome-tabs/gh-pages/css/chrome-tabs.css">
<script src="https://cdn.rawgit.com/adamschwartz/chrome-tabs/gh-pages/js/deps/draggabilly.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/adamschwartz/chrome-tabs/gh-pages/css/chrome-tabs-dark-theme.css">
<div class="browser">
  <div class="chrome-tabs">
    <div class="chrome-tabs-content"></div>
    <div class="chrome-tabs-bottom-bar"></div>
  </div>
</div>

CSS

html, body {
  margin: 0;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
}

body {
  padding: 50px;
  background: #ccc;
}

.browser {
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
  height: 100%;
  width: 100%;
}

JavaScript

var chromeTabs = new ChromeTabs();
chromeTabs.init(document.querySelector('.chrome-tabs'), {
  tabOverlapDistance: 14,
  minWidth: 45,
  maxWidth: 150
})

setTimeout(function(){
  chromeTabs.addTab({
    title: 'jsFiddle',
    favicon: 'https://jsfiddle.net/favicon.png'
  })
  
  setTimeout(function(){
    chromeTabs.addTab({
      title: 'New Tab'
    })
  }, 250)
}, 250)