JSFiddle - React, Tailwind, and code Playground

by Marcos Moitas

HTML

<div class="wv-bank-account-list">

  <div class="wv-card--bank--branded wv-card--bank_header wv-card--bank--bank-of-america">
    <div class="wv-card--bank__logo">
      <span class="wv-icon--bank wv-icon--bank--bank-of-america"></span>
    </div>
    <div class="wv-card--bank__title">
      Bank of America
    </div>
  </div>

<!-- ACCOUNT 1 -->
  <div class="wv-box wv-card--bank_account">
  
    <div class="wv-card--bank_account--info">
      <div class="wv-card--bank_account--name">
        Core Checking Super Account Master™ 
      </div>
      
      <div class="wv-card--bank_account--balance">
        $9,999,999.99 USD
      </div>
      
      <div class="wv-card--bank_account--type">
        Personal Checking
      </div>
      <div class="wv-card--bank_account--number">
        ••••1234
      </div>

   </div>
    
    <div class="wv-card--bank_account--edit">
      <a href="#" class="wv-text--link">Edit</a>
    </div>
    
  </div>
  
  <!-- ACCOUNT 2 -->
  <div class="wv-box wv-card--bank_account wv-card--expanded">
  
    <div class="wv-card--bank_account--info">
      <div class="wv-card--bank_account--name">
        Business Fundamentals™ 
      </div>
      
      <div class="wv-card--bank_account--balance">
        $9,999,999.99 USD
      </div>
      
      <div class="wv-card--bank_account--type">
        Business Checking
      </div>
      <div class="wv-card--bank_account--number">
        ••••1234
      </div>

   </div>
    
    <div class="wv-card--bank_account--edit">
      <a href="#" class="wv-text--link">Edit</a>
    </div>
    
  </div>
  
  
  
  <!-- ACCOUNT 3 -->
  <div class="wv-box wv-card--bank_account">
  
    <div class="wv-card--bank_account--info">
      <div class="wv-card--bank_account--name">
        Business Fundamentals™ 
      </div>
      
      <div class="wv-card--bank_account--balance">
        $9,999,999.99 USD
      </div>
      
      <div class="wv-card--bank_account--type">
        Business Checking
     ...

SCSS

@import url("https://s3.amazonaws.com/wave-buoyant/branches/next-buoyant-rc/buoyant-app.css");

body {padding: 24px; background: #F8FAFC;}

.wv-card--bank_header {
  max-width: 820px;
  border-radius: 4px 4px 0 0;
  margin-bottom: 0;
}

.wv-card--bank_account {
  max-width: 820px;
  border-radius: 0;
  margin-bottom: 0;
  border-top: solid 1px #eaeaea;
  display: flex;
  &:last-child {
    border-radius: 0 0 4px 4px;
  }
  
  .wv-card--bank_account--info {
    display: flex;
    flex-grow: 1;
    flex-flow: wrap;
    border-right: solid 1px #eaeaea;
    align-self: stretch;
    padding-right: 16px;
  }
  
  .wv-card--bank_account--name {
    width: 70%;
    display: flex;
    font-size: 16px;
  }
  
  .wv-card--bank_account--balance {
    width: 30%;
    text-align: right;
    font-size: 16px;
    font-weight: 700;
  }
  
  .wv-card--bank_account--type {
    width: 140px;
    overflow: ellipsis;
    font-size: 14px;
    color: #687378;
    padding-top: 8px;
  }
  .wv-card--bank_account--number {
    font-size: 14px;
    color: #687378;
    padding-top: 8px;
  }
 
  .wv-card--bank_account--edit {
    font-size: 14px;
    align-self: center;
    padding: 0 8px 0 16px; 
  }

}

.wv-card--expanded {
  margin: 16px 0;
  border-radius: 4px;
  height: 300px;
  box-shadow: 0 12px 36px 0 rgba(77,101,117,0.2);
  border: none;
}