JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://www.polymer-project.org/components/webcomponentsjs/webcomponents.js">
</script>
<link href="https://www.polymer-project.org/components/core-drawer-panel/core-drawer-panel.html" rel="import">
<link href="https://www.polymer-project.org/components/core-icons/core-icons.html" rel="import">
<link href="https://www.polymer-project.org/components/core-icon-button/core-icon-button.html" rel="import">
<link href="https://www.polymer-project.org/components/core-animated-pages/core-animated-pages.html" rel="import">
<link href="https://www.polymer-project.org/components/core-toolbar/core-toolbar.html" rel="import">
<link href="https://www.polymer-project.org/components/core-list/core-list.html" rel="import" >
<style>
html, body {
margin: 0;
-webkit-tap-highlight-color: transparent;
overflow: hidden;
}
remote-app{
display: block;
height: 100%;
margin: 0 auto;
}
</style>
</head>
<body fit>
<remote-app ></remote-app>
<polymer-element name="album-detail" attributes="album" layout vertical>
<template>
<style>
#details {
width: 740px;
margin: auto;
height: 100%;
box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.6);
poosition:relative;
}
.mycard {
height: 540px;
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: 200px;
height: 200px;
background-color:blue;
}
.btn{
background-color:red;
height:63px;
}
.title{
background-color:yellow;
color:black;
}
.info{
height:200px
}
.item{
height:48px;
color:black;
background-color:grey;
}
</style>
<section id="details" class="details" >
<div class="mycard " layout...