import React from 'react';

const style = {
  width: '30%',
  margin: '2px',
  display: 'inline-block',
  textDecoration: 'none',
  color: 'white'
}

export default class ListColors extends React.Component {
  render () {
    return (
      <ul>
        {
          this.props.colors.map((color, index) => {
            return <li key={index} style={Object.assign({}, style, {backgroundColor: color})}>{color}</li>
          })
        }
      </ul>
    );
  }
};

import React from 'react';

const style = {
  width: '50%',
  margin: '4px',
  textDecoration: 'none',
  color: 'white'
}

export default class ListColors extends React.Component {
  render () {
    return (
      <section>
        <ul>
          {
            this.props.colors.map((color, index) => {
              return <li key={index} style={Object.assign({}, style, {backgroundColor: color})}>{color}</li>
            })
          }
        </ul>
      </section>
    );
  }
};

Change style and adds section tag
Change style and adds section tag
