JSFiddle - React, Tailwind, and code Playground

by silverlight

HTML

<div class="metro">
  <div class="rail">

    <div class="track">

      <a href="#" class="tile">
        <div class="contents"><span class="name">Name</span></div>
      </a>

      <a href="#" class="tile">
        <div class="contents"></div>
      </a>

      <a href="#" class="tile _2x1">
        <div class="contents"></div>
      </a>

      <a href="#" class="tile">
        <div class="contents"></div>
      </a>

      <a href="#" class="tile">
        <div class="contents"></div>
      </a>

      <a href="#" class="tile">
        <div class="contents"></div>
      </a>

      <a href="#" class="tile">
        <div class="contents"></div>
      </a>

    </div>

    <div class="track">

      <a href="#" class="tile _2x2">
        <div class="contents"></div>
      </a>

      <a href="#" class="tile">
        <div class="contents"></div>
      </a>

      <a href="#" class="tile">
        <div class="contents"></div>
      </a>

      <a href="#" class="tile _2x1">
        <div class="contents"></div>
      </a>

    </div>

    <div class="track">

      <a href="#" class="tile">
        <div class="contents"></div>
      </a>

      <a href="#" class="tile">
        <div class="contents n-blue" style="background-image:url('http://www.omidgfx.xzn.ir/f/upload/tv.png');">
          <span class="name">Productivity</span>
        </div>

      </a>

      <a href="#" class="tile _2x3">
        <div class="contents n-red h-red" style="background-image:url('http://www.omidgfx.xzn.ir/f/upload/tv.png');">
          <span class="name">Video</span>
          <ul class="subcats">
            <li>Arcade</li>
            <li>Puzzel</li>
            <li>Race</li>
            <li>Cards</li>
            <li>Sport Games</li>
          </ul>
        </div>
      </a>

    </div>

    <div class="track">
      <a href="#" class="tile _2x4">
        <div class="contents" style="background-image:url('http://www.omidgfx.xzn.ir/f/upload/blur.jpg');">
          <ul...

CSS

img{
  border :none;
  }

*{
  outline :none;
  }

a{
  text-decoration :none;
  }
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, label, form, fieldset, legend, input, textarea, p, blockquote, th, td, select, img{
  margin      :0;
  padding     :0;
  direction   :ltr;
  font-family :tahoma;
  color       :#919194;
  list-style  :none;
  }
body{background:black}
a{text-decoration:none;}
.metro{
  margin-top     :20px;
  position       :relative;
  /*background     :rgba(0, 255, 255, .03);*/
  width          :940px;
  height         :512px;
  overflow       :hidden;
  padding-bottom :28px;
  }
.metro .rail{
  font-size      :0;
  padding-bottom :28px;
  white-space    :nowrap;
  position       :relative;
  /*background     :rgba(255, 0, 0, .1);*/
  height         :512px;
  overflow-y     :hidden;
  overflow-x     :scroll;

  }
.metro .rail .track{
  overflow  :hidden;
  position  :relative;
  font-size :0;
  display   :inline-block;
  width     :256px;
  height    :512px;
  /*background :rgba(255, 105, 255, .03);*/
  }
.metro .rail .track .tile{
  float  :left;
  margin :1px;
  width  :126px;
  height :126px;
  }
.metro .rail .track .tile:active,
.metro .rail .track .tile:hover{
  background :url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWP4//+/FAAJFgMYX7M3+gAAAABJRU5ErkJggg==");
  }
.metro .rail .track .tile:focus{
  background :url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWP4//+/MQAJLwMxYdrlDAAAAABJRU5ErkJggg==");

  }
.metro .rail .track .tile .contents{
  position            :relative;
  width               :120px;
  color               :#fff;
  height              :120px;
  margin              :3px;
  -moz-box-sizing     :border-box;
  -webkit-box-sizing  :border-box;
  box-sizing          :border-box;
  overflow            :hidden;
  background-position :center -1px;
  background-repeat   :no-repeat;
  border              :1px solid rgba(255, 255, 255, .2);
 ...