JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.7/css/foundation.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.7/js/foundation.min.js"></script>
<!--offcanvas begin-->
    <div class="off-canvas-wrap" data-offcanvas>
        <div class="inner-wrap">

            <nav class="tab-bar show-for-small">
                <a class="left-off-canvas-toggle menu-icon">
                    <span>Foundation</span>
                </a>  
            </nav>


            <aside class="left-off-canvas-menu">
                <ul class="off-canvas-list">
                    <li><label>Foundation</label></li>
                    <li><a href="#">The Psychohistorians</a></li>
                    <li><a href="#">The test!</a></li>
                </ul>
            </aside>

            <section class="main-section">
            <!--offcanvas begin-page-content-->

                <!--content-->

            <!--offcanvas end-page-content-->
            </section>

            <a class="exit-off-canvas"></a>

        </div><!--inner-wrap-->
    </div><!-- off-canvas-wrap -->
<!--offcanvas end-->

JavaScript

$(document).foundation();