JSFiddle - React, Tailwind, and code Playground

by syjsdev

HTML

<script src="https://unpkg.com/[email protected]/dist/react.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
<script src="https://unpkg.com/[email protected]/prop-types.js"></script>
<script src="https://unpkg.com/[email protected]/index.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-input-autosize.js"></script>
<script src="https://unpkg.com/react-select/dist/react-select.js"></script>
<link rel="stylesheet" href="https://unpkg.com/react-select/dist/react-select.css">
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

.root-div {
  text-align: center;
}

.select-wrapper {
  display: inline-block;
  text-align: center;
}

.select-custom-class .Select-multi-value-wrapper {
  padding-right: 20px;
}

.select-custom-class .Select-menu-outer {
  text-align: left;
}

.Select-placeholder, .Select--single > .Select-control .Select-value {
  position: relative;
  padding-left: 0;
}

.Select-control, .Select-clear-zone, .Select-arrow-zone {
  display: inherit;
}

.select-custom-class .Select-multi-value-wrapper {
  display: flex;
  flex-direction: row-reverse;
}

.Select-clear-zone {
  position: absolute;
  top: 8px;
  right: 20px;
}

.Select-arrow-zone {
  position: absolute;
  top: 8px;
  right: 0px;
}

Babel + JSX

import Select from 'react-select';

var options = [
  { value: 'AND', label: 'AND' },
  { value: 'OR', label: 'OR' }
];

var options2 = [
  { value: 'SECONDONE', label: 'SECONDONE' },
  { value: 'SECONDONE2', label: 'SECONDONE2' }
];

var options3 = [
  { value: 'A Little Larger one here', label: 'A Little Larger one here' },
  { value: 'A Little Narrower', label: 'A Little Narrower' }
];

class Hello extends React.Component {
  constructor() {
    super();
    
    this.state = { 
    	selectedOption: 'AND',
      selectedOption3: 'A Little Narrower',
      };
  }
  render() {
    return (
      <div className="root-div">
        <div className="select-wrapper">
          <Select
            className="select-custom-class"
            name="form-field-name"
            value={this.state.selectedOption}
            options={options}
            onChange={(value) => { this.setState({ selectedOption: value.value }); }}
          />
        </div>
        <div className="select-wrapper">
          <Select
          className="select-custom-class"
            name="form-field-name"
            value={this.state.selectedOption2}
            options={options2}
            onChange={(value) => { this.setState({ selectedOption2: value.value }); }}
          />
        </div>
        <div className="select-wrapper">
          <Select
            className="select-custom-class"
            name="form-field-name"
            value={this.state.selectedOption3}
            options={options3}
            onChange={(value) => { this.setState({ selectedOption3: value.value }); }}
          />
        </div>
      </div>
    );
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);