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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(#28a9dd, #0d4e77);
  font-family: "Share Tech Mono", monospace;
  font-size: 2rem;
}


ul {
  counter-reset: li;
  list-style: none outside none;
  
  li {
    margin: .5em;
    text-shadow: .02em .02em .005em rgba(255, 255, 255, .45);
    
    &::before {
      counter-increment: li;
      content: counter(li);
      padding: .5em;
      background: #000;
      border-radius: 50%;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      line-height: 1;
      width: 32px;
      height: 32px;
      margin-right: 10px;
      color: #fff;
    }
  }
}

class UserList extends React.Component {
    render() {
       const users = [
            {
                name: 'Jack',
                age: 25,
                nationality: 'USA'
            },
            {
                name: 'Tony',
                age: 30,
                nationality: 'Japan'
            },
            {
                name: 'Jony Li',
                age: 20,
                nationality: 'China'
            }
        ] 

        return (
            <ul>
                { users.map(user => <li>{user.name} is {user.age} years old and from {user.nationality}</li>) }
            </ul>
        )
    }
}

ReactDOM.render(<UserList />, document.getElementById('app'))