JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.min.css">
<script src="https://code.getmdl.io/1.1.1/material.min.js"></script>
<script src="https://npmcdn.com/preact@latest/dist/preact.js"></script>
<script src="https://npmcdn.com/preact-mdl@latest/dist/preact-mdl.min.js"></script>

Babel + JSX

/** @jsx h */
const { h, render, Component } = preact;
const { Slider } = preactMdl;

class App extends Component {
  constructor() {
    super();
    
    this.state.value = 50
  }

	render(props, state) {
		return (
      <div>
        <h1>Value: {state.value}</h1>
        <Slider name='value'
          min={1}
          max={100}
          value={state.value}
          onChange={this.linkState('value')}
        />
        <input type="number"
          min={1}
          max={100}
          value={state.value}
          onChange={this.linkState('value')}
        />
      </div>
		);
	}
}

render(<App />, document.body);