JSFiddle - React, Tailwind, and code Playground

by cjblomqvist

HTML

<!-- Component #1 -->
<actual_nav:>
    <div class="navbar">
      <div class="navbar-inner">
        <div class="container">
          {{{content}}}
        </div>
      </div>
    </div>
    

<!-- Component #2 -->
<nav_links:>
    <ul class="nav">
      {{{content}}}
    </ul>

<!-- Component #3 -->
<nav_link:>
    <li class="{{{#if active}}}active{{{/}}}"><a href="{{{href}}}">{{{content}}}</a></li>

    
    
    
    
<!-- Your actual implementation/page -->
<Body:>
    <app:actual_nav>
        <app:nav_links>
            <app:nav_link active="true" href="/href-to-my-page/">My Page</app:nav_link>
            <app:nav_link href="/href-to-my-2nd-page/">My 2nd Page</app:nav_link>
            <app:nav_link href="/href-to-my-3rd-page/">My 3rd Page</app:nav_link>
        </app:nav_links>        
    </app:actual_nav>