JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<main>

<input placeholder="Search, or say Google" x-webkit-speech autocomplete="off" />

<header></header>

<section class="card">
  <h1><strong>32 minutes</strong> to Consol Energy Center</h1>
  <h2>McKnight Road</h2>
     <h2>McKnight Road</h2>
     <h2>McKnight Road</h2>
     <h2>McKnight Road</h2>
  <div class="map"></div>
  
</section>
  
<section class="card">
  <h1>View nearby events</h1>
  <h2>Justin Bieber - Nicki Minaj - other crappy singers...</h2>
</section>
  
</main>

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,700,500italic,900,700italic,900italic);

* { font-family: 'Roboto', sans-serif; line-height:1.2; vertical-align:middle; }

body { background:#222;  }


main {
  display:block;
  position:relative;
  width:30rem;
  margin:3vh auto;
  padding:1.5rem 0 0;
  background:#d5d5d5;
  outline
  border-radius:.25rem;
  overflow:hidden;
  -webkit-transform:scale(.75);
  -webkit-transform-origin:center 3rem;
  -webkit-transition:transform .3s;
}
body:hover main {
  -webkit-transform:scale(1);
    -webkit-transition:all 300ms ease-in-out;

}

header {
  position:absolute;
  z-index:0;
  top:0; left:0; right:0;
  height:10rem;
   -webkit-transition:all 300ms ease-in-out;

  -webkit-transition:transform .5s, opacity .3s;
  background:url(http://www.droid-life.com/wp-content/uploads/2013/01/googlenownewyork.png)  center center;
  background-size:cover;
}

input, .card {
  position:relative;
  z-index:2;
}
input {
  display:block;
  width:26rem;
  margin:4.5rem 1rem 2rem;
  border:0;
  font-size:1.2rem;
  padding:.75rem 1rem;
  border-radius:3px;
  box-shadow:0 1px 2px #aaa;
  -webkit-transition:.5s, margin-bottom .15s;
}

input:focus {
  margin:0 1rem 1rem;
  outline:0;
}

input:focus + header {
  -webkit-transform:translate3d(0,-10rem,0);
  opacity:0;
}

.card {
  padding:1.5rem;
  -webkit-box-shadow:0 1px 2px #aaa;
  background:white;
  margin:0 1rem 1rem;
    -webkit-transition:all 300ms ease-in-out;
  border-radius:3px;
  -webkit-user-select:none;
  -webkit-animation:fly-in-from-left .5s 1s ease both;
  -webkit-transform-origin:top left;
}
.card:nth-child(even){
  -webkit-animation-name:fly-in-from-right;
  -webkit-animation-delay:1.1s;
 -webkit-transform-origin:top right;
}

@-webkit-keyframes fly-in-from-left {
  from {
    -webkit-transform:translateY(15rem) rotate(15deg);
    opacity:0;
  }
}

@-webkit-keyframes fly-in-from-right {
  from {
   ...

JavaScript

$('h2').click( function() {
      $(".card").fadeOut();
    });