title: Scrolling tabs HTML and CSS only
body: <p>I was wondering if there is anyway to create scrolling tabs without using JavaScript. I've been assigned a task to strictly use HTML and CSS, that's it. The code below is the best solution I could find to create tabs without using anything else besides HTML and CSS. I've found some code for scrolling tabs online, but again it uses JavaScript. So, is it possible to do scrolling tabs with just HTML and CSS? Anything helps, thanks!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.tabs
  {position: relative;   
  min-height: 200px;
  clear: both;
  margin: 25px 0;}
  
  .tab
  {float: left;}
  
  .tab label
  {background: #eee; 
  padding: 10px; 
  border: 1px solid #ccc; 
  margin-left: -1px;
  cursor:pointer;
  position: relative;
  left: 1px; }
  
  .tab [type=radio]
  {display: none;}
  
  .content {position: absolute;
  top: 28px;
  left: 0;
  background: white;
  height:100px;
  right: 0;
  bottom: 0;
  padding: 20px;
  border: 1px solid #ccc;}
  
  [type=radio]:checked ~ label
  {background: white;
  border-bottom: 1px solid white;
  z-index: 2;}
  
  [type=radio]:checked ~ label ~ .content
  {z-index: 1;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="tabs"&gt;
     &lt;div class="tab"&gt;
        &lt;input name="tab-group-1" id="tab-1" type="radio"/&gt;
        &lt;label for="tab-1"&gt;Tab One&lt;/label&gt;
        &lt;div class="content"&gt;
           Content 1
        &lt;/div&gt; 
     &lt;/div&gt;
     &lt;div class="tab"&gt;
        &lt;input name="tab-group-1" id="tab-2" type="radio"/&gt;
        &lt;label for="tab-2"&gt;Tab Two&lt;/label&gt;
        &lt;div class="content"&gt; Content 2 &lt;/div&gt; 
     &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>