JSFiddle - React, Tailwind, and code Playground
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;
}
Babel + JSX
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', label: 'A Little Larger one' },
{ value: 'A Little Larger two', label: 'A Little Larger two' }
];
class Hello extends React.Component {
constructor() {
super();
this.state = {
selectedOption: 'AND',
selectedOption2: 'SECONDONE',
selectedOption3: 'A Little Larger two',
};
}
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 }); }}
/>
</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 }); }}
/>
</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 }); }}
/>
</div>
</div>
);
}
}
ReactDOM.render(
<Hello name="World" />,
document.getElementById('container')
);