JSFiddle - React, Tailwind, and code Playground

by Hassan Siddiqui

HTML

<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.3/dist/js/foundation.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.3/dist/css/foundation.min.css">
<label>- Option 1 You can add <strong>medium-text-right text-center</strong> classes on individual li</label>

<ul class="vertical menu">
    <li class="medium-text-right text-center"><a title="My God, It's Full of Stars">Link 1</a></li>
    <li class="medium-text-right text-center"><a title="They're moving in herds. They do move in herds">Link 2</a></li>
    <li class="medium-text-right text-center"><a title="Klaatu barada nikto">Link 3</a></li>
</ul>

<label>- Option 2 You just add <strong>medium-text-right text-center</strong> classes on parent ul</label>

<ul class="vertical menu medium-text-right text-center">
    <li><a title="My God, It's Full of Stars">Link 1</a></li>
    <li><a title="They're moving in herds. They do move in herds">Link 2</a></li>
    <li><a title="Klaatu barada nikto">Link 3</a></li>
</ul>

JavaScript

$(document).foundation();