JSFiddle - React, Tailwind, and code Playground

by igalst

HTML

<div ng-controller="Youtube">
  <header>
    <input type="search" placeholder="Search" ng-model="searchQuery" />
    <h1 class="logo"><img src="http://s.ytimg.com/yts/img/logos/youtube_logo_standard_againstwhite-vflKoO81_.png" alt="YouTube" /></h1>
  </header>
  <section class="content">
    <div class="toolbar">
      <ul class="paging">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
      </ul>
      <input type="text" placeholder="Filter" ng-model="filterQuery" />
    </div>
    <ul class="items">
      <li ng-repeat="video in videos | filter: filterQuery">
        <a href="{{video.url}}">
          <img ng-src="{{video.imageUrl}}" alt="Thumb" />
          <h2>{{video.title}}</h2>
        </a>
      </li>
    </ul>
  </section>
</div>

SCSS

$input-width: 120px;

input {
  width: $input-width;
}

header {
  height: 50px;
  background: #FED;
}

.logo img {
  height: 90%;
}

header > * {
   float: left;
}

section {
  border-top: dotted 3px #ccc;
}

.toolbar input {
    top: -17px;
    position: relative;
  }

.paging {
  text-align: center;
  margin: 0 $input-width;
 
  li {
    display: inline-block;
  }
}

.items {
  border-top: solid 1px #DAD;
}

.items li {
  background: #DAD;
  height: 30px;
  
  &:nth-child(2n) {
    background: #DED;
  }
    
  img {
     float: left;
      height: 30px;
  }
}

JavaScript

var app = angular.module("app", []);

app.factory('youtube', function() {
  var shinyNewServiceInstance;
  //factory function body that constructs shinyNewServiceInstance
  return shinyNewServiceInstance;
});