JSFiddle - React, Tailwind, and code Playground

by ckissi

HTML

<a>
  <div class='with-size'>
    <div class='dropdown'>
      Your recommended size:
      <span class='shoeSizeDisplay'></span>
    </div>
  </div>
  <div class='without-size'>
    <div class='info-text fit-header'>
      Which size fits me?
    </div>
    <div class='dropdown'>
      Do you need size advice?
    </div>
  </div>
</a>
<div class="ShoeSizeMe ShoeSizeMe_button_0">Button</div>

CSS

.ShoeSizeMe {
    letter-spacing: normal;
    text-transform: none;
    line-height: normal;
    font-variant: normal;
    font-family: sans-serif;
    font-family: "Roboto", "Helvetica Condensed", "Helvetica Narrow", "DejaVu Sans Condensed", "Arial", "Helvetica", sans-serif; }
    .ShoeSizeMe .info-text {
      font-size: 0.875em;
      line-height: 1.58em; }
    .ShoeSizeMe a {
      display: inline-block;
      /* this fixes the dropdown being not fully clickable in IE. */
      color: black !important;
      /* CSS conflict workaround */ }
      .ShoeSizeMe a:hover {
        text-decoration: none; }
    .ShoeSizeMe .dropdown {
      display: initial;
      position: initial;
      margin-top: initial;
      cursor: pointer;
      text-decoration: none;
      font-family: sans-serif;
      white-space: nowrap;
      padding: 4px;
      background: #ffffff;
      margin-right: 0 !important;
      /* CSS conflict on FashionHype */
      text-align: center; }
      .ShoeSizeMe .dropdown img {
        display: inline;
        /* Who'd guess? */
        height: 20px;
        margin: 1px 0;
        width: auto; }
      .ShoeSizeMe .dropdown .shoeSizeDisplay {
        display: inline-block;
        font-size: 110%;
        font-weight: bold;
        min-width: 1.58em;
        margin: 0 0.26em;
        padding: 0;
        text-align: center; }
    .ShoeSizeMe .without-size .dropdown {
      border: 1px solid black;
      border-radius: 4px; }
    .ShoeSizeMe a:hover .without-size .dropdown, .ShoeSizeMe a:active .without-size .dropdown {
      background: #dedede; }
    .ShoeSizeMe a:hover .with-size, .ShoeSizeMe a:active .with-size {
      color: #333 !important; }

JavaScript

!function(e){"use strict";if("undefined"==typeof self)throw new Error("This environment was not anticipated by Q. Please file a bug.");self.Q=e()}(function(){"use strict";function e(e){return function(){return X.apply(e,arguments)}}function t(e){return e===Object(e)}function n(e){return"[object StopIteration]"===ee(e)||e instanceof J}function o(e,t){if(B&&t.stack&&"object"==typeof e&&null!==e&&e.stack&&-1===e.stack.indexOf(te)){for(var n=[],o=t;o;o=o.source)o.stack&&n.unshift(o.stack);n.unshift(e.stack);var r=n.join("\n"+te+"\n");e.stack=i(r)}}function i(e){for(var t=e.split("\n"),n=[],o=0;o<t.length;++o){var i=t[o];a(i)||r(i)||!i||n.push(i)}return n.join("\n")}function r(e){return-1!==e.indexOf("(module.js:")||-1!==e.indexOf("(node.js:")}function s(e){var t=/at .+ \((.+):(\d+):(?:\d+)\)$/.exec(e);if(t)return[t[1],Number(t[2])];var n=/at ([^ ]+):(\d+):(?:\d+)$/.exec(e);if(n)return[n[1],Number(n[2])];var o=/.*@(.+):(\d+)$/.exec(e);return o?[o[1],Number(o[2])]:void 0}function a(e){var t=s(e);if(!t)return!1;var n=t[0],o=t[1];return n===H&&o>=U&&o<=re}function c(){if(B)try{throw new Error}catch(o){var e=o.stack.split("\n"),t=e[0].indexOf("@")>0?e[1]:e[2],n=s(t);if(!n)return;return H=n[0],n[1]}}function u(e,t,n){return function(){return"undefined"!=typeof console&&"function"==typeof console.warn&&console.warn(t+" is deprecated, use "+n+" instead.",new Error("").stack),e.apply(e,arguments)}}function l(e){return e instanceof h?e:y(e)?T(e):M(e)}function d(){function e(e){t=e,r.source=e,Q(n,function(t,n){l.nextTick(function(){e.promiseDispatch.apply(e,n)})},void 0),n=void 0,o=void 0}var t,n=[],o=[],i=Z(d.prototype),r=Z(h.prototype);if(r.promiseDispatch=function(e,i,r){var s=G(arguments);n?(n.push(s),"when"===i&&r[1]&&o.push(r[1])):l.nextTick(function(){t.promiseDispatch.apply(t,s)})},r.valueOf=function(){if(n)return r;var e=g(t);return v(e)&&(t=e),e},r.inspect=function(){return t?t.inspect():{state:"pending"}},l.longStackSupport&&B)try{throw new...