JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui-react/0.81.2/semantic-ui-react.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.2/semantic.min.css"/>
<div id="app"></app>
React
const {
Button
} = semanticUIReact
class App extends React.Component {
state = {
loading: null
}
handleClick = (e) => {
this.setState({
loading: 'loading'
})
}
render() {
return (
<div>
<Button className={'btn ' + this.state.loading} onClick={this.handleClick}>Button 1</Button>
<Button className={'btn ' + this.state.loading} onClick={this.handleClick}>Button 2</Button>
<Button className={'btn ' + this.state.loading} onClick={this.handleClick}>Button 3</Button>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));