JSFiddle - React, Tailwind, and code Playground

by Avi Algaly

HTML

<div class="task">
  <h2>
	Talks
	</h2>
</div>
<div class="wrap">
  <h1 class="Start">Belong Life</h1>
  <div class="metro-big chat">
    <div class="icon-chat"></div>
    <span class="label bottom">Talks</span>
  </div>
  <div class="metro-big calendar">
    <div class="icon-calendar"></div>
    <span class="label bottom">Medical Binders</span>
  </div>

  <div class="metro-big ie" onclick="msg()">
    <div class="icon-ie"></div>
    <span class="label bottom">Treatments</span>
  </div>
  <div class="metro-small people last">
    <div class="icon-people"></div>
    <span class="label bottom">People</span>
  </div>
  <div class="metro-small chrome">
    <div class="icon-chrome"></div>
    <span class="label bottom">Chrome</span>
  </div>
  <div class="metro-small store">
    <div class="icon-store"></div>
    <span class="label bottom">Store</span>
  </div>

  <div class="metro-small games last">
    <div class="icon-games"></div>
    <span class="label bottom">Games</span>
  </div>
  <div class="metro-small twitter">
    <div class="icon-twitter"></div>
    <span class="label bottom">twitter</span>
  </div>
  <div class="metro-small gp">
    <div class="icon-gp"></div>
    <span class="label bottom">Google+</span>
  </div>
  <div class="metro-small fb">
    <div class="icon-fb"></div>
    <span class="label bottom">Facebook</span>
  </div>
  <div class="metro-small cnn">
    <div class="icon-cnn"></div>
    <span class="label bottom">CNN</span>
  </div>
  <div class="metro-big ps">
    <div class="icon-ps"></div>
    <span class="label bottom">Adobe Photoshop</span>
  </div>
</div>

<div class="wrap2">
  <div class="space"></div>
  <div class="metro-small bt">
    <div class="icon-bt"></div>
    <span class="label bottom">Bluetooth</span>
  </div>
  <div class="metro-small cc">
    <div class="icon-cc"></div>
    <span class="label bottom">CCleaner</span>
  </div>
  <div class="metro-big wmp last">
    <div class="icon-wmp"></div>
    <span class="label...

CSS

@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,200);
* {
  margin: 0;
  padding: 0;
  outline: none;
  border: none;
  box-sizing: border-box;
}

*:before,
*:after {
  box-sizing: border-box;
}

html {
  width: 100%;
  background: #c0c0c0;
}

.wrap,
.wrap2 {
  width: 830px;
  height: auto;
  margin: 70px 100px;
  float: left;
  z-index: 100;
  transition: all .3s ease;
}

.wrap2 {
  width: 410px !important;
}

div[class^="metro"] {
  float: left;
  margin: 0 10px 10px 0;
  height: 95px;
  position: relative;
  cursor: pointer;
  transition: all .4s ease;
  user-drag: element;
  border: solid 2px transparent;
}

div[class^="metro"]:hover {
  border: solid 2px mintcream;
}

div[class^="metro"]:active {
  transform: scale(.98, .98);
}

.metro-big {
  width: 200px;
}

.metro-small {
  width: 95px;
}

.last {
  margin-right: 0 !important;
}

.Start {
  color: white;
  font: normal 50px 'Yanone Kaffeesatz', sans-serif;
  margin-bottom: 50px;
  cursor: pointer;
  user-select: none;
  display: inline-block;
  transition: all .3s ease;
}

.Start:hover {
  text-shadow: 0 0 4px white;
}

.space {
  margin-bottom: 110px;
}

.label {
  position: absolute;
  color: white;
  font: 500 12px sans-serif;
  left: 10px;
  user-select: none;
}

.bottom {
  bottom: 5px;
}

.top {
  top: 5px;
}

.chat {
  background: #df0024;
}

.calendar {
  background: #00a9ec;
}

.store {
  background: #ff9000;
}

.ie {
  background: #00abdc;
}

.people {
  background: #0e5d30;
}

.video {
  background: #8b0189;
}

.chrome {
  background: #ce4e4e;
}

.photo {
  background: url('http://lorempixel.com/200/95/people');
  background-position: -2px -2px;
}

.music {
  background: #5f5f5f;
  animation: flip 6s linear infinite;
  transform: rotateX(0deg);
}

.games {
  background: #00ff00;
}

.twitter {
  background: #19bfe5;
}

.gp {
  background: #d64136;
}

.fb {
  background: #3b5998;
}

.cnn {
  background: #fe0000;
}

.ps {
  background: #0c5fa1;
}

.bt {
  background:...

JavaScript

$(".chat").on("click", function() {
  $(".task").show("linear", function() {});
  $(".wrap,.wrap2").hide("linear", function() {});
})

$(".task").on("click", function() {
  $(".task").hide("linear", function() {})
  $(".wrap").show("linear", function() {})
})