React contact card

by lasha

HTML

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

CSS

body {
  background: #e6f3ff;
  font-family: Helvetica;
}

.card-container {
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  max-width: 300px;
  margin: 100px auto;
  box-shadow: 0 10px 40px -14px rgba(135, 144, 158, 0.6), 0 10px 40px -10px rgba(135, 144, 158, 0.6);
}

.card-header {
  background-color: rgba(80, 103, 124, 0.73);
  padding: 14px 18px;
  font-size: 18px;
}

.card-header span {
  display: inline-block;
  border-radius: 50%;
  background-color: #f7f7f7;
  height: 40px;
  width: 40px;
  vertical-align: middle;
  margin-right: 15px;
  color: #959595;
  font-size: inherit;
  position: relative;
}

.card-header span:after {
  content: attr(initials);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.card-header h2 {
  display: inline-block;
  font-weight: normal;
  color: #fff;
  font-size: inherit;
  vertical-align: middle;
  margin: 0;
}

main {
  padding: 22px 10px;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  margin: 0 0 11px;
  color: #333;
}

li:last-child {
  margin-bottom: 0;
}

li span {
  color: #959595;
  display: inline-block;
  min-width: 95px;
  text-align: right;
  margin-right: 12px;
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: 1px;
}

React

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    	items: [
      	{ text: "Learn JavaScript", done: false },
        { text: "Learn React", done: false },
        { text: "Play around in JSFiddle", done: true },
        { text: "Build something awesome", done: true }
      ]
    }
  }
  
  render() {
    return (
      <React.Fragment>
        <section className="card-container">
          <header className="card-header">
            <span initials="JS"></span>
            <h2>Jane Smith</h2>
          </header>
          
          <main>
            <ul>
              <li><span>Birthday</span> Jan 1, 1980</li>
              <li><span>Address</span> 123 Fulton St.</li>
              <li><span>Phone</span> 212-234-5678</li>
            </ul>
          </main>
        </section>
      </React.Fragment>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))