Zurb Foundation 5 - Zurb Foundation Tabs broken after styling

Demo for: http://stackoverflow.com/questions/25688337/zurb-foundation-tabs-broken-after-styling

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.5/css/normalize.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.5/css/foundation.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.5/js/foundation.min.js"></script>
<div class="row">
    <div class="large-12 columns">
        <div class="tabs-content">
            <div class="content active" id="panel1">
                 <h2>Day 2</h2>
                <p>Welcome back!!</p>
            </div>
            <div class="content" id="panel2">
                <p>A <strong>commitment</strong> is when you promise to do something!</p>
            </div>
            <div class="content" id="panel3">
                <p>You have to verify you kept your commitment! You can verifiy by checking in to a location or having a friend act as your referee.</p>
            </div>
            <div class="content" id="panel4">
                <p>Be sure to fulfill your commitment!</p>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="large-12 columns large-centered text-center">
        <dl class="tabs" data-tab>
                <dd class="active"><a href="#panel1"> </a>
                </dd>
                <dd><a href="#panel2"> </a>
                </dd>
                <dd><a href="#panel3"> </a>
                </dd>
                <dd><a href="#panel4"> </a>
                </dd>
        </dl>
    </div>
</div>

CSS

body {
    padding: 30px;
}
.row { border: 1px solid #DDD; }
.tabs dd > a {
    border-radius: 50%;
    padding: 5px;
}

.tabs dd{
    margin: 5px;
    border-radius:50%;
    float: none;
    display: inline-block;
}

dl.tabs {
    margin: 0px !important;
    width: 100%;
}

JavaScript

$(document).foundation();