JSFiddle - React, Tailwind, and code Playground

by mgiuffrida

HTML

<base href="https://polygit.org/polymer+:master/*+:master/components/">
<link rel="import" href="polymer/polymer.html">

<dom-module id="my-3col">
  <template>
    <style>
      :host {
        display: flex;
        flex-direction: column;
        min-height: 400px;
      }
      :host section {
        flex: 1;
        display: flex;
        flex-direction: row;
      }
      :host section div.middle {
        flex: 1;
      }
      :host * {
        border: 1px solid red;
      }
    </style>
    <header>Header element</header>
    <section>
      <div>Left div</div>
      <div class="middle">Middle div</div>
      <div>Right div</div>
    </section>
    <footer>Footer element</footer>
  </template>
</dom-module>

<h2>Normal my-3col:</h2>
<my-3col></my-3col>

<h2>Styled as block:</h2>
<my-3col class="block"></my-3col>

CSS

my-3col.block {
  display: block; /* Oops! */
}

JavaScript

Polymer({
  is: 'my-3col'
});