JSFiddle - React, Tailwind, and code Playground

by Muthuraman B

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="root"></div>

CSS

.radio {
  margin: 0 10px 0 0;
  display: inline-flex;
}

.radio input[type='radio'] {
    -webkit-appearance: none;
    outline: none;
    border: 0;
    display: inline-flex;
}

.radio span {
  margin: 0 0 0 5px;
  line-height: 30px;
}

.radio input[type='radio']:after {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    content: '';
    display: inline-block !important;
    visibility: visible;
    border: 3px solid #FFF;
    box-shadow: 0 0 0 1px #4c4d4e;
}

.radio input[type='radio']:checked:after {
    background-color: #4c4d4e;
    display: inline-block !important;
    visibility: visible;
}

React

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      reportWeekday: ''
    };

  }

  handleWeekdayChange = (event) => {
    this.setState({reportWeekday: event.target.value});
  }

  render () {
  const {reportWeekday} = this.state;

    return (
    <fieldset onChange={this.handleWeekdayChange}>
      <label className="radio"><input type="radio" name="schedule-weekly-option" value="yes" checked={reportWeekday === 'yes'}/><span>Yes</span></label>
      <label className="radio"><input type="radio" name="schedule-weekly-option" value="no" checked={reportWeekday === 'no'}/><span>No</span></label>
    </fieldset>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);