Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
  </head>
  <body>
  <div class="tabcontainer">
    <div>
      <a href="#" class="tab active">Tabs</a>
      <a href="#" class="tab"><p>That</p></a>
      <a href="#" class="tab"><p>Should</p></a>
      <a href="#" class="tab"><p><span>Be</span></p></a>
      <a href="#" class="tab"><p>Stabbed</p></a>
    </div>
    <div class="tabpane active">
      <div class="block">
        <div class="grid">
          <div class="cell cell-sm-10">
            Markup is for demo purposes
          </div>
          <div class="cell cell-sm-2">
            Only
          </div>
          <div class="cell cell-sm-12">
            You do not need to use a grid system, use your own CSS
          </div>
        </div>
      </div>
    </div>
    <div class="tabpane">
      <div class="block">
        <div class="grid">
          <div class="cell cell-sm-3">
            Data
          </div>
          <div class="cell cell-sm-3">
            Data
          </div>
          <div class="cell cell-sm-3">
            Data
          </div>
          <div class="cell cell-sm-3">
            Data
          </div>
        </div>
      </div>
    </div>
    <div class="tabpane">
      <div class="block">
        <div class="grid">
          <div class="cell cell-sm-9 cell-md-7 cell-lg-6">
            Data
          </div>
          <div class="cell cell-sm-3 cell-md-5 cell-lg-6">
            Data
          </div>
          <div class="cell cell-sm-5 cell-md-8 cell-lg-8">
            Data
          </div>
          <div class="cell cell-sm-7 cell-md-4 cell-lg-4">
            Data
          </div>
        </div>
      </div>
    </div>
    <div class="tabpane">
      <div class="block">
        <div class="grid">
          <div class="cell cell-sm-6">
            Data
          </div>
          <div class="cell cell-sm-6">
            Data
          </div>
          <div class="cell cell-sm-8">
            Data
          </div>
          <div class="cell cell-sm-4">
            Data
          </div>
          <div class="cell cell-sm-2">
            Data
          </div>
          <div class="cell cell-sm-2">
            Data
          </div>
          <div class="cell cell-sm-2">
            Data
          </div>
          <div class="cell cell-sm-2">
            Data
          </div>
          <div class="cell cell-sm-2">
            Data
          </div>
          <div class="cell cell-sm-2">
            Data
          </div>
          <div class="cell cell-sm-6">
            Data
          </div>
          <div class="cell cell-sm-6">
            Data
          </div>
        </div>
      </div>
    </div>
    <div class="tabpane">
      <div class="block">
        <div class="grid">
          <div class="cell cell-sm-12">
            <div class="tabcontainer">
              <div>
                <a href="#" class="tab active">Tabs</a>
                <a href="#" class="tab">That</a>
                <a href="#" class="tab">Should</a>
                <a href="#" class="tab">Be</a>
                <a href="#" class="tab">Stabbed</a>
              </div>
              <div class="tabpane active">
                <div class="block">
                  <div class="grid">
                    <div class="cell cell-sm-4">
                      Data
                    </div>
                    <div class="cell cell-sm-4">
                      Data
                    </div>
                    <div class="cell cell-sm-4">
                      Data
                    </div>
                  </div>
                </div>
              </div>
              <div class="tabpane">
                <div class="block">
                  <div class="grid">
                    <div class="cell cell-sm-3">
                      Data
                    </div>
                    <div class="cell cell-sm-3">
                      Data
                    </div>
                    <div class="cell cell-sm-3">
                      Data
                    </div>
                    <div class="cell cell-sm-3">
                      Data
                    </div>
                  </div>
                </div>
              </div>
              <div class="tabpane">
                <div class="block">
                  <div class="grid">
                    <div class="cell cell-sm-9 cell-md-7 cell-lg-6">
                      Data
                    </div>
                    <div class="cell cell-sm-3 cell-md-5 cell-lg-6">
                      Data
                    </div>
                    <div class="cell cell-sm-5 cell-md-8 cell-lg-8">
                      Data
                    </div>
                    <div class="cell cell-sm-7 cell-md-4 cell-lg-4">
                      Data
                    </div>
                  </div>
                </div>
              </div>
              <div class="tabpane">
                <div class="block">
                  <div class="grid">
                    <div class="cell cell-sm-2">
                      Data
                    </div>
                    <div class="cell cell-sm-2">
                      Data
                    </div>
                    <div class="cell cell-sm-2">
                      Data
                    </div>
                    <div class="cell cell-sm-2">
                      Data
                    </div>
                    <div class="cell cell-sm-2">
                      Data
                    </div>
                    <div class="cell cell-sm-2">
                      Data
                    </div>
                    <div class="cell cell-sm-2">
                      Data
                    </div>
                    <div class="cell cell-sm-2">
                      Data
                    </div>
                    <div class="cell cell-sm-2">
                      Data
                    </div>
                    <div class="cell cell-sm-2">
                      Data
                    </div>
                    <div class="cell cell-sm-2">
                      Data
                    </div>
                    <div class="cell cell-sm-2">
                      Data
                    </div>
                  </div>
                </div>
              </div>
              <div class="tabpane">
                <div class="block">
                  <div class="grid">
                    <div class="cell cell-sm-2">
                      Data
                    </div>
                    <div class="cell cell-sm-2">
                      Data
                    </div>
                    <div class="cell cell-sm-2">
                      Data
                    </div>
                    <div class="cell cell-sm-2">
                      Data
                    </div>
                    <div class="cell cell-sm-2">
                      Data
                    </div>
                    <div class="cell cell-sm-2">
                      Data
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="cell cell-sm-2">
            Data
          </div>
          <div class="cell cell-sm-2">
            Data
          </div>
          <div class="cell cell-sm-2">
            Data
          </div>
          <div class="cell cell-sm-2">
            Data
          </div>
          <div class="cell cell-sm-2">
            Data
          </div>
          <div class="cell cell-sm-2">
            Data
          </div>
        </div>
      </div>
    </div>
  </div>
  <script defer src="https://rawgit.com/wnda/stabs/master/stabs.js"></script>
  </body>
</html>
​
 
:root,html,body{box-sizing:border-box;font:400 16px/1.3 Roboto,-apple-system,caption;overflow-x:hidden;text-decoration:none;min-height:100%}body{margin:0 auto;padding:8px;padding:.5rem;color:hsl(240,60%,6.9%);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}*,:before,:after{box-sizing:inherit;margin:0;padding:0;border:0;box-shadow:none;outline:0;font:inherit}
details,main,summary{display:block}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-thumb{background-color:hsl(240,60%,6.9%)}
::-webkit-scrollbar-track{background-color:transparent}
a{color:inherit;cursor:pointer;text-decoration:none}
textarea{resize:vertical}
input,textarea{-webkit-border-radius:0}
.block{padding:16px auto}
.cell:after{content:'';display:block;position:absolute;top:8px;left:8px;right:8px;bottom:8px;z-index:-2;background:hsl(240,4%,91%);border:3px solid hsl(240,4%,63%)}
.tabcontainer{display:block;padding:16px}
.tab{display:inline-block;padding:16px;font-weight:700;background:hsl(240,4%,91%);border:3px solid hsl(240,4%,63%)}
.tab.active{background:crimson;color:white;border-color:crimson}
.tabpane .tab.active{background:mediumblue;border-color:mediumblue}
.tabpane{display:none;padding:16px}
.tabpane.active{display:block}
.tab *{display:inline-block}
.container{padding-right:16px;padding-left:16px;margin-right:auto;margin-left:auto}
.grid{display:block;margin:-16px}
.container:before,.container:after,.grid:before,.grid:after{display:table;content:''}.container:after,.grid:after{clear:both}.cell{display:block;float:left;position:relative;overflow:hidden;padding:16px;width:100%;min-height:1rem}
@media only screen{
  .container:before,.container:after,.grid:before,.grid:after{content:none;display:none}.grid{font-size:0}
  .cell{float:none;display:inline-block;vertical-align:top;font-size:16px}
}
@media(min-width:34em){
  .cell-sm-1{width:8.333333%}.cell-sm-2{width:16.666667%}.cell-sm-3{width:25%}.cell-sm-4{width:33.333333%}.cell-sm-5{width:41.666667%}.cell-sm-6{width:50%}.cell-sm-7{width:58.333333%}.cell-sm-8{width:66.666667%}.cell-sm-9{width:75%}.cell-sm-10{width:83.333333%}.cell-sm-11{width:91.666667%}.cell-sm-12{width:100%}
}
.cell .cell:after,.tabpane .tab{z-index:-1;background:#999;border-color:#222}
.tabcontainer>div:first-child{padding:8px}
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
wndapro
0viewers