<div id="app"></div>

const Button = ({ className = '', ...props }) => {
  const cx =
    'bn f6 dim br2 pv3 ph4 white bg-purple ' + className;

  return <button className={cx} {...props} />;
};

const App = () => (
  <div className="vh-100 flex items-center justify-center">
    <div>
      <Button>Button Text</Button>
      <p className="f7 tc mt2 mb0 code gray">regular button</p>
    </div>
    <div>
      <Button className="f7 ml3">Button Text</Button>
      <p className="f7 tc mt2 mb0 code gray">with .f7</p>
    </div>
    <div>
      <Button className="f1 ml3">Button Text</Button>
      <p className="f7 tc mt2 mb0 code gray">with .f1</p>
    </div>
  </div>
);

ReactDOM.render(<App />, document.querySelector('#app'));