JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.30.7/react-bootstrap.js"></script>
<body>
<div id="custom"></div>
<div id="regular"></div>
<script>
</script>
</body>
CSS
.custom-button{
color: white;
background-color: green;
border-radius: 8px;
}
Babel + JSX
var Button = React.createClass({
render() {
return <h1>
<ReactBootstrap.Button bsStyle="success">Bootstrap Button</ReactBootstrap.Button>
</h1>;
}
});
var CustomButton = React.createClass({
render() {
return <h1>
<ReactBootstrap.Button bsClass="custom-button">Custom Button</ReactBootstrap.Button>
</h1>;
}
});
ReactDOM.render(<Button/>, document.getElementById('regular'));
ReactDOM.render(<CustomButton/>, document.getElementById('custom'));