Taabs & Grids - Foundation 5.0.3

Reference: http://stackoverflow.com/questions/21388117/foundation-5-grid-inside-tab

HTML

<link rel="stylesheet" href="http://cdn.jsdelivr.net/foundation/5.0.3/css/foundation.min.css">
<link rel="stylesheet" href="http://cdn.jsdelivr.net/foundation/5.0.3/css/normalize.css">
<script src="http://cdn.jsdelivr.net/foundation/5.0.3/js/foundation.min.js"></script>
<script src="http://cdn.jsdelivr.net/foundation/5.0.3/js/vendor/modernizr.js"></script>
<script src="http://cdn.jsdelivr.net/foundation/5.0.3/js/vendor/jquery.js"></script>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/foundation/5.0.3/css/foundation.css">
<div class="row">
  <dl class="tabs vertical" id="manageTabs" data-tab>
    <dd class="tabs-title active"> <a href="#panelBlock">Select Block</a></dd>
    <dd class="tabs-title"><a href="#panelPerson">Select Person</a></dd>
    <dd class="tabs-title"><a href="#panelUser">Select User</a></dd>
  </dl>

  <div class="tabs-content vertical" data-tabs-content="manageTabs">

    <div class="content active" id="panelBlock">
      <p>Select Block</p>
      <select id="cbBlocks" class="medium" required>
        <option value="">Choose Building</option>
      </select>
      <li id="GoTab2">
        <button class="button round small">Next</button>
      </li>
    </div>

    <div class="content" id="panelPerson">
      <p>select person.</p>
    </div>

    <div class="content" id="panelUser">
      <p>select User.</p>
    </div>
  </div>

CSS

.content {
  background: #ccc;
  width: 100%;
  padding: 10px !important;
}

.tabs dd > a {
  outline: 0;
  background: #2c3e50;
  color: #FFF;
  -moz-box-shadow: inset 0 -7px 5px -7px rgba(0, 0, 0, 0.7);
  -webkit-box-shadow: inset 0 -7px 5px -7px rgba(0, 0, 0, 0.7);
  box-shadow: inset 0 -7px 5px -7px rgba(0, 0, 0, 0.7);
}

.tabs dd > a:hover {
  background: #354b60;
}

.tabs dd.active a {
  background: #ccc;
  color: #2c3e50;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

JavaScript

$('document').ready(function() {
      $(document).foundation();
    }