JSFiddle - React, Tailwind, and code Playground

by jleyva

HTML

<script type="text/template" id="menu_template">
<header>
        <div class="media">
                <div class="img"><%= user.profileimageurl %></div>
                <div class="bd">
                    <h1><%= user.fullname %></h1>
                </div>
            </div>
        </header>

        <ul class="nav nav-v js-accordion">
            <% _.each(coursePlugins, function(plugin) { %>
            <li class="nav-item no-submenu">
                <a href="#notifications" id="notificationsZZ" class="alink">
                    <span data-icon="n" aria-hidden="true"></span>
                    Notifications
                </a>
            </li>
            
            <li class="nav-item">
                <a href="#" class="toogler">
                    <span data-icon="u" aria-hidden="true"></span>
                    Upload
                </a>
                <ul class="nav submenu">
                    
                    <li class="nav-item">
                        <a href="#upload/browse" class="alink">
                            <span data-icon="p" aria-hidden="true"></span>
                            Browse photo albums
                        </a>
                    </li>
                    
                </ul>
            </li>
            <% }); %>
        </ul>

        <h2>My courses</h2>
        <div id="mycourses">
            <ul class="nav nav-v js-accordion">
                <% _.each(courses, function(course) { %>
                <li class="nav-item">
                    <a href="#" class="toogler">
                        <span data-icon="b" aria-hidden="true"></span>
                        <%= course.fullname %>
                    </a>
                    <ul class="nav submenu">
                        <% _.each(coursePlugins, function(plugin) { %>
                        <li class="nav-item">
                            <a href="<%= plugin.url %>/<%= course.id %>">
                                <span data-icon="g"...

JavaScript

values = {
    user: {fullname: "Juanito"}

}

var output = _.template($("#menu_template").html(), values );
$("#result").html(output);