<div id="app"></div>
body {
 
}

.card {
  width: 320px;
  margin: 20px auto;
  
  .trailer_link_disp{
    //overflow: hidden;
      margin: 20px auto;
      height: 270px;
      width: 270px;
      border-radius: 5px;
     background: url('https://image.tmdb.org/t/p/w300_and_h450_bestv2/gaHepzSTMkGwsSKAqiBgroSCf07.jpg');
    background-position: center; 
     box-shadow: 0 30px 70px 0 rgba(0, 0, 0, .19), 0 17px 50px 0 rgba(0, 0, 0, .19);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .trailer_link_disp:hover{
      background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://image.tmdb.org/t/p/w300_and_h450_bestv2/gaHepzSTMkGwsSKAqiBgroSCf07.jpg');
    background-position: center; 
        .wrapper { 
      transform: scale(1.2); 
    }
  }
  
  .details {
    font-size: 12px;
    
    .img_container {
      overflow: hidden;
      height: 60px;
      width: 55px;
      margin-left: 24px;
      border-radius: 3px;
      display:  inline-block;
      
      img {
        position: relative;
        width: 85px;
        top: -20px;
        left: -15px;
      }
      
    }
    
    .middle {
      display:  inline-block;
      padding: 5px 15px;
      vertical-align: top;
      span {
        display: block;
      }
    }
    
    .right {
      display: inline-block;
      padding: 5px 15px;
      vertical-align: top;
      span {
        display: block;
      }
    }
    
  }
  
  .btn {
    border-radius: 100px;
  }
  
  .tab-container{
    margin: auto;
    
    .tab-block {
      margin-left: 40px;

      a {
       width: 70px;
       margin: 15px;
      }

      span {
        display: block;
        width: 20px;
        height: 2px;
        margin-top: 10px !important;
        background: #5764c6;
        margin: auto;
      }
    }
  }
}
View Compiled
const tabs = [
  {
    name: 'Overview'
  },
  {
    name: 'Cast'
  },
  {
    name: 'Related'
  }
]

const PlayIcon = () => {
  return (
    <div>
      <svg width="55px" height="55px" viewBox="0 0 24 24">
        <path fill="#ffffff" d="M10,16.5V7.5L16,12M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />
      </svg>
    </div>
  )
}

class MovieCard extends React.Component {
  constructor(){
    super()
    this.state = {
      tabSelected: '2'
    }
  }
  
  handleClassAtr (e) {
    this.setState({ tabSelected: e.target.name })
  }
  
  render (){
    
    return(
     <div className="card">
       
      <div className="trailer_link_disp">
        <div className="wrapper"><PlayIcon/></div>
      </div>
        
      <div className="details">
        <div className="img_container">
          <img src="https://image.tmdb.org/t/p/w300_and_h450_bestv2/gaHepzSTMkGwsSKAqiBgroSCf07.jpg"/>
        </div>
        
        <div className="middle">
          <span>Gaurdian's of The Galaxy</span>
          <span>131 min</span>
        </div>
        
        <div className="right">
          <span>Score</span>
          <span>8.4</span>
        </div>
        
      </div>
      <div className="tab-container">
      <ul className="tab tab-block">
        {
          tabs.map( ( tab , index) => {
            let activeClass = index.toString() === this.state.tabSelected ? 'active' : ''
            return(
            <div>  
              <li className={ 'custom_tab' + ' ' + activeClass } 
                  index={ index } 
                  onClick={ this.handleClassAtr.bind(this) }>
                <a href={ '#' + tab.name } name={ index }>{ tab.name }</a>
                <span></span>
              </li>
            </div>
          )})
        }
      </ul>
      </div>
               
      <div className="card-footer">
        <button className="btn col-9 centered">Add to Watchlist</button>
      </div>
       
     </div>
    )
  }
}

ReactDOM.render(<MovieCard />, document.getElementById('app'))
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/spectre.css/0.2.14/spectre.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js