import React from 'react';
import ReactDOM from 'react-dom';

const CreditCard = (props) =>
  <div className="credit-card">
    <h1 className="credit-card-title">{props.companyName}</h1>
    <div className="credit-card-chip" />
    <div className="credit-card-content">
      <div className="credit-card-text">
          <h2 className="credit-card-number">
            {props.cardNumber}
          </h2>
          <h2 className="credit-card-valid-thru">
            {props.validThru}
          </h2>
          <h2 className="credit-card-holder-name">
            {props.cardHolder}
          </h2>
      </div>
      <div className="credit-card-logo">
        <img src="https://i.ebayimg.com/images/g/B7MAAMXQgJRRBDvt/s-l300.jpg"/>
      </div>
    </div>
  </div>

const Main = () => <div>
  <CreditCard
    companyName='CREDIT CARD'
    cardNumber='7253 3256 7895 1245'
    validThru='11/50'
    cardHolder='CARDHOLDER' />
    <CreditCard
    companyName='THE CREDIT CARD'
    cardNumber='7777 7777 7895 1245'
    validThru='12/30'
    cardHolder='fOULEN' />
</div>

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