JSFiddle - React, Tailwind, and code Playground

by kryo

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.js"></script>
<link rel="stylesheet" href="//yui.yahooapis.com/3.14.1/build/cssreset/cssreset-min.css">
<body ng-app="myModule">
  <div class="breadcrumbs" breadcrumb></div>
  <ul>
    <li><a ng-href="/">Home</a></li>
    <li><a ng-href="/link-1">Link 1</a></li>
    <li><a ng-href="/link-2">Link 2</a></li>
    <li><a ng-href="/link-3">Link 3</a></li>
  </ul>

  <div class="content" ng-view=""></div>

  <script type="text/ng-template" id="home.html">
    <div class="view">Content for Home.html</div>
  </script>
  <script type="text/ng-template" id="link-1.html">
    <div class="view">
      <p>Content for Link-1.html</p>
      <ul>
        <li><a ng-href="/link-1/child-1">Child 1 link 1</a></li>
        <li><a ng-href="/link-1/child-2">Child 2 link 1</a></li>
        <li><a ng-href="/link-1/child-3">Child 3 link 1</a></li>
      </ul>
    </div>
  </script>
  <script type="text/ng-template" id="link-1-a.html">
    <div class="view">
      <p>Content for child 1 of Link-1.html</p>
    </div>
  </script>
  <script type="text/ng-template" id="link-1-b.html">
    <div class="view">
      <p>Content for child 2 of Link-1.html</p>
    </div>
  </script>
  <script type="text/ng-template" id="link-1-c.html">
    <div class="view">
      <p>Content for child 3 of Link-1.html</p>
    </div>
  </script>
  <script type="text/ng-template" id="link-2.html">
    <div class="view">
      <p>Content for Link-2.html</p>
      <ul>
        <li><a ng-href="/link-2/child-1">Child 1 link 2</a></li>
        <li><a ng-href="/link-2/child-2">Child 2 link 2</a></li>
        <li><a ng-href="/link-2/child-3">Child 3 link 2</a></li>
      </ul>
    </div>
  </script>
  <script type="text/ng-template" id="link-2-a.html">
    <div class="view">
      <p>Content for child 1 of Link-2.html</p>
    </div>
  </script>
  <script type="text/ng-template" id="link-2-b.html">
    <div class="view">
      <p>Content for child 2 of...

SCSS

ul {
  background-color: silver;
  padding: 0.5em;

  li {
    display: inline-block;
    margin: 0 0.5em 0 0;
  }
  a {
    color: blue;
    text-decoration: none;

    &:hover {
      color: red;
    }
  }
}

.content {
  padding: 1em;
  ul {
    background-color: transparent;

    li {
      display: block;
    }
  }
}

JavaScript

'use strict';

angular.module("myModule", ['ngRoute'])
.config(function ($routeProvider, $locationProvider) {
  $routeProvider
    .when('/', {
      templateUrl: "home.html",
      controller: 'LinkCtrl'
    })
    .when('/link-1', {
      templateUrl: "link-1.html",
      controller: 'LinkCtrl'
    })
    .when('/link-1/child-1', {
      templateUrl: "link-1-a.html",
      controller: 'LinkCtrl'
    })
    .when('/link-1/child-2', {
      templateUrl: "link-1-b.html",
      controller: 'LinkCtrl'
    })
    .when('/link-1/child-3', {
      templateUrl: "link-1-c.html",
      controller: 'LinkCtrl'
    })
    .when('/link-2', {
      templateUrl: "link-2.html",
      controller: 'LinkCtrl'
    })
    .when('/link-2/child-1', {
      templateUrl: "link-2-a.html",
      controller: 'LinkCtrl'
    })
    .when('/link-2/child-2', {
      templateUrl: "link-2-b.html",
      controller: 'LinkCtrl'
    })
    .when('/link-2/child-3', {
      templateUrl: "link-2-c.html",
      controller: 'LinkCtrl'
    })
    .when('/link-3', {
      templateUrl: "link-3.html",
      controller: 'LinkCtrl'
    })
    .when('/link-3/child-1', {
      templateUrl: "link-3-a.html",
      controller: 'LinkCtrl'
    })
    .when('/link-3/child-2', {
      templateUrl: "link-3-b.html",
      controller: 'LinkCtrl'
    })
    .when('/link-3/child-3', {
      templateUrl: "link-3-c.html",
      controller: 'LinkCtrl'
    })
    .otherwise({
      redirectTo: '/'
    });
  $locationProvider.html5Mode(true);
})
.controller('LinkCtrl', function($scope){
});