JSFiddle - React, Tailwind, and code Playground

HTML

<script>Polymer = {dom: 'shadow'};</script>
<base href="https://polygit.org/*+:master/components/">
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-button/paper-button.html">
<link rel="import" href="paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="paper-item/paper-item.html">
<link rel="import" href="paper-listbox/paper-listbox.html">
<link rel="import" href="paper-menu/paper-menu.html">

<dom-module id="x-foo">
  <template>
    <style>
      :host {
        display: flex;
        flex-direction: column;
      }
    </style>
    <paper-button>Button 1</paper-button>
    <paper-dropdown-menu label="paper-dropdown-menu paper-menu">
      <paper-menu class="dropdown-content">
        <paper-item>Foo</paper-item>
        <paper-item>Foo</paper-item>
        <paper-item>Foo</paper-item>
      </paper-menu>
    </paper-dropdown-menu>
    <paper-button>Button 2</paper-button>
    <paper-dropdown-menu label="paper-dropdown-menu paper-listbox">
      <paper-listbox class="dropdown-content">
        <paper-item>Foo</paper-item>
        <paper-item>Foo</paper-item>
        <paper-item>Foo</paper-item>
      </paper-listbox>
    </paper-dropdown-menu>
    <paper-button>Button 3</paper-button>
  </template>
</dom-module>

<x-foo></x-foo>

JavaScript

Polymer({
  is: 'x-foo',
});