JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<script src="http://www.polymer-project.org/components/platform/platform.js"></script>
<link href="http://www.polymer-project.org/components/core-animated-pages/core-animated-pages.html" rel="import">
<style>
body {
font-family: 'Roboto 2', 'Helvetica Neue', Helvetica, Arial, sans-serif;
margin: 0;
background: #f1f1f1;
}
.green {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 350px;
background: #70c26f;
}
</style>
<polymer-element name="music-demo">
<template>
<style>
.chip-container {
position: absolute;
top: 275px;
right: 0;
left: 0;
text-align: center;
}
.chip {
display: inline-block;
position: relative;
border-radius: 3px;
margin: 4px;
overflow: hidden;
text-align: start;
background-color: #fff;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16);
}
.chip-top {
width: 200px;
height: 200px;
}
.chip-bottom {
padding: 8px;
line-height: 1.5;
}
.chip-album-title {
font-weight: bold;
}
#details {
padding: 200px 10% 0;
}
.card {
height: 400px;
border-radius: 3px;
text-align: start;
overflow: hidden;
background: #fff;
box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.card-left {
width: 400px;
}
.card-right {
padding: 24px;
}
.card-icon {
border-radius: 50%;
width: 60px;
height: 60px;
margin-right: 16px;
}
.card-album-title {
font-size: 2em;
}
</style>
<core-animated-pages selected="{{page}}" transitions="hero-transition" on-core-animated-pages-transition-end="{{complete}}">
<section>
<div class="chip-container" hero-p on-tap="{{transition}}">
...