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

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
.app {
  border: 5px solid orange;
  height: 100vh; 
  display: flex;
  flex-direction: column;
}
label {
  display: block;
}
body style {
  display: block;
  background: #333;
  color: white;
  white-space: pre;
  padding: 1rem;
  font-family: monospace;
  order: 2;
}
.all-properties {
  font-family: monospace;
  background: #222;
  color: white;
  padding: 1rem;
}
.content {
  flex: 1;
  padding: 1rem;
}
.example-content {
  height: 100%;
  display: grid;
  place-items: center;
}

class Content extends React.Component {
  render() {
    return(
      <div className="example-content">
        <div>
          foo 
          <a href="#0" className="button" role="button">Button</a>
          foo
          <button className="button">Button</button>
          foo
          <input className="button" type="submit" value="Button" />
          foo
        </div>
      </div>
    );
  }
}

class PropertyChoices extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      styles: {
        'border: 0;': false,
        'border-radius: 0.25rem;': false,
        
        'background: #1E88E5;': false,
        'color: white;': false,
        
        'font-family: system-ui, sans-serif;': false,
        'font-size: 1rem;': false,
        'line-height: 1.2;': false,
        'white-space: nowrap;': false,
        'text-decoration: none;': false,
        
        'padding: 0.25rem 0.5rem;': false,
        'margin: 0.25rem;': false,

        'cursor: pointer;': false
      }
    };
  }
  
  toggleCheckbox(e) {
    let property = e.target.parentElement.textContent;
    this.setState({
      styles: {
        ...this.state.styles,
        [property]: !this.state.styles[property]
      }
    });
  }
  
  render() {
    var _this = this;
    
    let allStyles = ``;
    Object.keys(this.state.styles).map(function(key) {
      if (_this.state.styles[key]) {
        if (key === 'hyphens: auto;') {
          allStyles += '  -webkit-hyphens: auto;\n  -moz-hyphens: auto;\n  -ms-hyphens: auto;\n  hyphens: auto;\n';
        } else if (key === 'hyphens: manual;') {
          allStyles += '  -webkit-hyphens: manual;\n  -moz-hyphens: manual;\n  -ms-hyphens: manual;\n  hyphens: manual;\n';
        } else if (key === 'overflow-wrap: break-word;') {
          allStyles += '  word-wrap: break-word;\n  overflow-wrap: break-word;\n';
        } else {
          allStyles += "  " + key + "\n";
        }
        
      }
    });
    
    return(
      <React.Fragment>

        <div className="all-properties">
          {Object.keys(this.state.styles).map(function(key, i) {
            return(
              <label key={i}>
                <input type="checkbox" 
                  checked={_this.state.styles[key]}
                  onChange={_this.toggleCheckbox.bind(_this)}
                />
                {key}
              </label>
            );
          })}
        </div>

        <style id="style" contentEditable dangerouslySetInnerHTML={{
          __html: 
    `.button {
${allStyles}}`
          }} />
        
      </React.Fragment>
    );
  }
}

ReactDOM.render(
  <React.Fragment>
    <PropertyChoices />
    <div className="content">
      <Content />
    </div>
  </React.Fragment>
, document.querySelector("#app"));