JSFiddle - React, Tailwind, and code Playground

by baacke

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://andybaacke.com/new/js/respond.min.js"></script>
<body>
   <header class="clear">
      <div id="header-area">
         <a id="logo" href=""><!--<img src="http://andybaacke.com/new/images/logo.png" alt="" title="" />--></a>
         <nav>
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
         </nav>
      </div>
   </header>
   <section ng-app="projects">
      <div class="content-area clear" ng-controller="ProjectController as project">
<!-- -->
<!-- php before -->
<!-- -->

          <h1>AngularJS</h1>
          
          <div id="project-filter">
              <h3 style="display: inline-block">Project Filter:</h3> (show only)
              <form>
                  <ul>
                      <li ng-repeat="tag in project.projectList | uniqueTags">
                          <label><input type="checkbox" checklist-model="project.filterValues" checklist-value="tag" checked />{{tag}}</label>
                      </li>
                  </ul>
              </form>
          </div>
          <div class="clear"></div>
          
          <div id="projects">
              <ul>
                  <li ng-repeat="currentProject in project.projectList | projectFilter:project.filterValues">
                      <ul>
                          <li>
                              <h4>{{currentProject.name}}</h4>
                          </li>
                          <li>
                              <img class="project-thumb" ng-src="{{currentProject.thumb}}" />
                          </li>
                          <li>
                              <h4>URL:</h4> <a target="_blank" href="{{currentProject.url}}" title="{{currentProject.url}}">{{currentProject.url | noHTTP}}</a>
                          </li>
                          <li class="tags">
                              <h4>Tags:</h4>...

CSS

html {height: 100%;
   background-color: #C9C9C9;
   background-repeat: no-repeat;
   background-position: center center;
   overflow-y: hidden;
   font-family: 'jurabook', sans-serif;}

body {height: 100%;
   background-repeat: no-repeat;
   background-size: cover !important;
   background-position: center bottom;
   background-attachment: fixed !important;
   overflow-y: scroll;
   margin: 0;
   transition: opacity 0.3s linear;
   opacity: 0;
   min-width: 320px}

header {width: 100%;
   box-sizing: border-box;
   padding: 5px 10px 0}

   #header-area {margin: 0 auto;
      max-width: 1200px}

      #header-area #logo {float: left;
         margin-bottom: 3px}

         #logo>img {height: 50px;
            width: auto;
            padding: 5px}

      #header-area>nav {float: right;
         margin-top: 10px;
         cursor: default}

         #header-area>nav a {color: #000;
            text-decoration: none;
            font-weight: normal;
            font-style: normal;
            font-family: 'juralight', sans-serif;
            margin: 0 5px;
            padding: 5px 10px;
            font-size: 24px;
            display: inline-block}

section,
footer {margin: 0 auto;
   max-width: 1200px;
   box-sizing: border-box}

section {}

   section>.content-area {margin: 20px 20px 0;
      padding: 20px;
      border-radius: 20px;
      background-image: url(http://andybaacke.com/new/images/nav-bg.png);
      background-repeat: repeat;
      box-shadow: 0 0 1px #666;
      font-size: 20px;
      position: relative}

footer {padding: 20px}

   footer #icons {float: left;
      margin-left: 13px}

      #icons>img {height: 35px;
         width: auto;
         margin: 0 2px}

   footer #copyright {float: right;
      font-size: 14px;
      font-family: 'jurademibold', sans-serif;
      margin-right: 15px}

      #copyright a {color: inherit;
         text-decoration: none}

/* MISC */
.clear:before,
.clear:after {content: " ";
    display: table;}

.clear:after...

JavaScript

$(document).ready(function(){ $('body').css('opacity', '1'); });

//// ANGULAR.JS ////
(function(){
    var website = angular.module('projects', ["checklist-model"]);
    
    website.controller('ProjectController', function(){        
        this.filterValues = [];
        
        this.projectList = [
            {
                name: "web",
                url: "http://zero.url",
                thumb: "http://www.stylishtemplate.com/screenshots/web-template-0650-lrg.jpg",
                tags: [ "Responsive Layout", "HTML5", "CSS3", "PHP", "Design", "Development", "JQuery" ]
            },{
                name: "Cool Project",
                url: "http://none.url",
                thumb: "http://images.all-free-download.com/images/templates_large/premium_series_373.jpg",
                tags: [ "CSS3", "PHP", "Design", "Development", "eCommerce" ]
            },{
                name: "Website 3",
                url: "http://no.url",
                thumb: "http://www.stylishtemplate.com/screenshots/web-template-4452-lrg.jpg",
                tags: [ "Responsive Layout", "HTML5", "CSS3", "Development", "eCommerce" ]
            }
        ];
    });
    
    website.filter('noHTTP', function(){
        return function(url){
            return url.replace(/^http:\/\//,"");
        };
    });
    
    website.filter('uniqueTags', function(){
        return function(tagsList){
            var tags = {};
            angular.forEach(tagsList, function(obj){
                angular.forEach(obj.tags, function(tag){
                    tags[tag] = 1;
                });
            });
            var uniqueTags = [];
            for (var key in tags){
                uniqueTags.push(key);
            }
            return uniqueTags;
        };
    });
    
    website.filter('projectFilter', function(){
        return function(projects, filterValues){            
            var projectResults = [];
            
            angular.forEach(projects,...