JSFiddle - React, Tailwind, and code Playground

by Ed Bulikyan

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="app"></div>

CSS

img {
  height: 100px;
}

.radio {
  display: inline-block;
  border: 5px solid transparent;
}
.radio.selected {
  border-color: red;
}

Babel + JSX

const RadioGroup = (props) => (
  <div>
    {props.items.map((n, i) => (
      <div className={`radio ${n.val == props.value ? 'selected' : ''}`} key={props.name + i}>
        <input 
          type="radio"
          id={props.name + i}
          name={props.name}
          value={n.val}
          checked={n.val == props.value}
          onChange={props.onChange}
        />
        <label htmlFor={props.name + i}>
          <img src={n.img} />
        </label>
      </div>
    ))}
  </div>
);


class App extends React.Component {
  state = {
    trumps: [
      { img: 'https://www.nydailynews.com/resizer/uEBBsa4RyN8_Fd7pJhnBDozPVYE=/1200x0/arc-anglerfish-arc2-prod-tronc.s3.amazonaws.com/public/KTNCVHAOS5E5XK3Y7PB6DFCACY.jpg', val: 'trump 1' },
      { img: 'https://cdn.vox-cdn.com/thumbor/Zf6jokwBwVFT8H-o8gd4_8J1bnA=/0x0:4668x3112/1200x800/filters:focal(2342x817:3088x1563)/cdn.vox-cdn.com/uploads/chorus_image/image/62717190/GettyImages_1071955546.0.jpg', val: 'trump 2' },
      { img: 'http://bellerdigital.com/wp-content/uploads/2018/09/gettyimages-1020992568-77c1c8acee620026f08304f9d08a69dfae660a60-s800-c85.jpg', val: 'trump 3' },
    ],
    flags: [
      { img: 'https://carrot-top.com/media/catalog/product/cache/d73a5018306142840707bd616a4ef293/a/r/architectural-large-reverse_1.jpg', val: 'flag 1' },
      { img: 'https://www.worldatlas.com/r/w728-h425-c728x425/upload/3c/31/cc/14489398446-113a80c703-z.jpg', val: 'flag 2' },
      { img: 'https://images.agoramedia.com/everydayhealth/lifescript/%7BBB73FC04-2885-456B-9B17-9D2E4452B239%7D03-USFlag-HalfMast.jpg', val: 'flag 3' },
    ],
    trump: null,
    flag: null,
  }

  onChange = e => {
    this.setState({
      [e.target.name]: e.target.value,
    });
  }

  render() {
    return (
      <div>
        Trump: {this.state.trump}
        <RadioGroup
          name="trump"
          items={this.state.trumps}
          value={this.state.trump}
          onChange={this.onChange}
        />
        Flag:...