JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<h1>Apple Product Navigator</h1>
<div class="internal-navbar">
  <div class="panel-body">
     <ul class="tiles">
       <li class="tile">
         <img src="http://store.storeimages.cdn-apple.com/3710/as-images.apple.com/is/image/AppleInc/dept-shelf-macbook-air?wid=137&hei=56&fmt=png-alpha&qlt=95&.v=1381453600453" />
         <div class="tile-body">MacBook Air</div>
       </li>
       <li class="tile">
         <img src="http://store.storeimages.cdn-apple.com/3710/as-images.apple.com/is/image/AppleInc/dept-shelf-macbook-pro?wid=137&hei=56&fmt=png-alpha&qlt=95&.v=1381453602720" />
         <div class="tile-body">MacBook Pro</div>
       </li>
       <li class="tile">
         <img src="http://store.storeimages.cdn-apple.com/3710/as-images.apple.com/is/image/AppleInc/dept-shelf-mac-mini?wid=137&hei=56&fmt=png-alpha&qlt=95&.v=1381453601591" />
         <div class="tile-body">Mac Mini</div>
       </li>
       <li class="tile">
         <img src="http://store.storeimages.cdn-apple.com/3719/as-images.apple.com/is/image/AppleInc/dept-shelf-imac?wid=137&hei=56&fmt=png-alpha&qlt=95&.v=1381453603699" />
         <div class="tile-body">iMac</div>
       </li>
       <li class="tile">
         <img src="http://store.storeimages.cdn-apple.com/3719/as-images.apple.com/is/image/AppleInc/dept-shelf-mac-pro?wid=137&hei=56&fmt=png-alpha&qlt=95&.v=1381453598807" />
         <div class="tile-body">Mac Pro</div>
       </li>
       <li class="tile">
         <img src="http://store.storeimages.cdn-apple.com/3719/as-images.apple.com/is/image/AppleInc/dept-shelf-mac-acc?wid=137&hei=56&fmt=png-alpha&qlt=95&.v=1364842044112" />
         <div class="tile-body">Mac Accessories</div>
       </li>
       <li class="tile">
         <img src="http://store.storeimages.cdn-apple.com/3719/as-images.apple.com/is/image/AppleInc/dept-shelf-compare-mac?wid=137&hei=56&fmt=png-alpha&qlt=95&.v=1381453597802" />
         <div class="tile-body">Compare Models</div>
       </li>
       <li class="tile">
...

CSS

body {
  background: #f9f9f9;
  font-family: "Lucida Grande", Arial, sans-serif;
  margin-top: 3em;
}

h1 {
  font-size: 24px;
  margin-bottom: 1em;
  text-align: center;
}

.internal-navbar {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 11px;
  height: 87px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  white-space: nowrap;
  width: 978px;
}
.internal-navbar .tiles {
  display: flex;
  margin: 0;
  left: 0;
  list-style-type: none;
  padding: 0;
  position: relative;
}
.internal-navbar .tiles .tile {
  box-shadow: inset 0px 0px 0px 1px #ccc;
  flex: 1;
  height: 78px;
  min-width: 140px;
  padding-bottom: 14px;
  text-align: center;
  width: 140px;
  -webkit-transition: min-width 0.2s ease-in-out;
  -moz-transition: min-width 0.2s ease-in-out;
  -ms-transition: min-width 0.2s ease-in-out;
  transition: min-width 0.2s ease-in-out;
}
.internal-navbar .tiles .tile:hover {
  cursor: pointer;
  background-color: #e8e8e8;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFE8E8E8', endColorstr='#FFFAFAFA');
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U4ZThlOCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZhZmFmYSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e8e8e8), color-stop(100%, #fafafa));
  background-image: -webkit-linear-gradient(top, #e8e8e8 0%, #fafafa 100%);
  background-image: -moz-linear-gradient(top, #e8e8e8 0%, #fafafa 100%);
  background-image:...

JavaScript

// JS in progress...

// DOM elements
var buttonLeft  = document.getElementById('page-left');
var buttonRight = document.getElementById('page-right');

// Calculate offset for paging
var tilesLength = 0;
var panelWidth  = $('.panel-body').width();

$('.tiles .tile').each(function() {
  tilesLength += $(this).width();
});

var panelOffset = (tilesLength - panelWidth) * -1;

// Handle paging left
var pageLeft = function() {
  buttonLeft.className = buttonLeft.className + " hide";
  buttonRight.className = buttonRight.className.replace("hide", "");
  
  $('.tile').addClass('bulge');
    
  $('.tiles').animate({
    'left' : '0'
  }, 500, function() {
    $('.tile').removeClass('bulge');
  });
}

// Handle paging right
var pageRight = function() {
  buttonRight.className = buttonRight.className + " hide";
  buttonLeft.className = buttonLeft.className.replace("hide", "");
  
  $('.tile').addClass('bulge');
  
  $('.tiles').animate({
    'left' : panelOffset
  }, 500, function() {
    $('.tile').removeClass('bulge');
  });
}

// Call pageLeft function
buttonLeft.onclick = function() {
  pageLeft();
}

// Call pageRight function
buttonRight.onclick = function() {
  pageRight();
}