JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <base href="//polygit.org/components/">
  
  <link rel="import" href="polymer/polymer.html">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  
  <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">  

</head>
    <body unresolved>
        <dom-module id='base-page'>
            <template>
                      <paper-dropdown-menu id="mydropdown" class="custom" label="City?">
        <paper-listbox class="dropdown-content custom" horizontalAlign='left'>
          <paper-item>Inbox</paper-item>
          <paper-item>Starred</paper-item>
          <paper-item>Sent mail</paper-item>
          <paper-item>Drafts</paper-item>
        </paper-listbox>
      </paper-dropdown-menu>
      <br>
                      <paper-dropdown-menu id="mydropdown" class="custom2" label="City?">
        <paper-listbox class="dropdown-content custom2" horizontalAlign='left'>
          <paper-item>Inbox</paper-item>
          <paper-item>Starred</paper-item>
          <paper-item>Sent mail</paper-item>
          <paper-item>Drafts</paper-item>
        </paper-listbox>
      </paper-dropdown-menu>
            </template>
        </dom-module>
        <script>
            HTMLImports.whenReady(function() {Polymer({ 
                is: 'base-page',
                properties: {
                }
            });});
        </script>
        <base-page></base-page>
    </body>
</html>

CSS

.custom {
  width: 190px;
}

.custom2 {
  width: 400px;
}