JSFiddle - React, Tailwind, and code Playground

by f0084rrrr

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.1.1/cjs/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.1.1/cjs/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-select/2.0.0/react-select.js"></script>
<div id="app"></div>
<div id='hello'></div>

JavaScript 1.7

import React, { Component, Button } from 'react';
import ReactDOM, { render } from 'react-dom';
import Select  from 'react-select';

export default class DynDrop extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'React',
      selectedOption: {value: 'Select Make', label: 'Select Make'},
      selectedOption2: {value: 'Select Model', label: 'Select Model'},
      selectedOption3: {value: 'Select State', label: 'Select State'},
      selectedOption4: {value: 'Select Plate', label: 'Select Plate'},
      selectedOptions: [],
      log: 'make model state plate'
    };
  }
  handleChange1 = (selectedOption) => {
    this.setState({selectedOption});
  };
  handleChange2 = (selectedOption) => {
    this.setState({selectedOption2: selectedOption});
  };
  handleChange3 = (selectedOption3) => {
    this.setState({selectedOption3});
  };
  handleChange4 = (selectedOption3) => {
    this.setState({selectedOption4: selectedOption3});
  };

  selectedOptions = [
    this.selectedOption, this.selectedOption2, this.selectedOption3, this.selectedOption4
  ]

  add2Log = (e,selectedOptions) => {
    e.preventDefault();
    return document.getElementById('log').insertAdjacentText('beforeend', this.selectedOption);
  }

  render() {
    const options1 = [
      {value: 'Subaru', label: 'Subaru'},
      {value: 'Honda', label: 'Honda'},
      {value: 'Ford', label: 'Ford'}
    ];
    const options2 = [
      {value: 'Impreza', label: 'Impreza', link: 'Subaru'},
      {value: 'WRX', label: 'WRX', link: 'Subaru'},
      {value: 'Pilot', label: 'Pilot', link: 'Honda'},
      {value: 'CR-V', label: 'CR-V', link: 'Honda'},
      {value: 'F-150', label: 'F-150', link: 'Ford'},
      {value: 'Fusion', label: 'Fusion', link: 'Ford'}
    ];
    const options3 = [
      {value: 'Vermont', label: 'Vermont'},
      {value: 'Maine', label: 'Maine'},
      {value: 'New York', label: 'New York'}
    ];
    const options4 = [
      {value: 'VT1', label:...