JSFiddle - React, Tailwind, and code Playground

by dumptyd

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<div id="app">
  <div class="invoice">
    <h1 class="invoice__header">
      Invoice #{{ invoice.id }} <small>({{ invoice.date }})</small>
    </h1>
    <div class="invoice__participants">
      <div class="participant participant--from">
        <div class="participant__title">
          Contractor
        </div>
        <div class="participant__personal-info">
          <div class="participant__name">
            {{ invoice.from.name }}
          </div>
          <a class="participant__email" :href="`mailto:${invoice.from.email}`">{{ invoice.from.email }}</a>
        </div>
        <div class="participant__address">
          {{ invoice.from.address }}
        </div>
      </div>
      <div class="participant participant--to">
        <div class="participant__title">
          Client
        </div>
        <div class="participant__personal-info">
          <div class="participant__name">
            {{ invoice.to.name }}
          </div>
          <a class="participant__email" :href="`mailto:${invoice.from.email}`">{{ invoice.to.email }}</a>
        </div>
        <div class="participant__address">
          {{ invoice.to.address }}
        </div>
      </div>
    </div>
    <div class="invoice__contents"></div>
    <div class="invoice__footer"></div>
  </div>
</div>

SCSS

@import url('https://fonts.googleapis.com/css?family=Merriweather');

.invoice {
  font-family: 'Merriweather';
  max-width: 768px;
  margin: 0 auto;
  padding: 0 1rem;
  
  &__header {
    line-height: 1.25;
    border-bottom: 1px solid #000;
  }
  
  &__participants {
    border: 2px solid #ddd;
    min-height: 180px;
    display: flex;
    width: 100%;
  }
}

.participant {
  flex: 1 0 0;
  min-height: 100%;
  padding: .75rem .75rem 2rem;

  display: flex;
  flex-direction: column;

  &__title {
    font-weight: bold;
    font-size: .9rem;
  }
  &__personal-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  &__name {
    font-size: 1.2rem;
    font-weight: bold;
  }
  &__email {
    display: inline;
    font-size: .9rem;
    margin-top: .25rem;
    text-decoration: none;
  }
  &__address {
    font-size: .9rem;
  }

  &--from {
    border-right: 2px solid #ddd;
  }
  &--to {
    text-align: right;
  }
}

JavaScript

new Vue({
	el: '#app',
  data() {
  	return {
    	invoice: {
      	id: 1,
        date: 'July 24, 2019',
        from: {
        	name: 'Saad Siddiqui',
          email: '[email protected]',
          address: 'Mumbai - 400053'
        },
        to: {
        	name: 'Random Company',
          email: '[email protected]',
          address: 'USA - 222044'
        },
      }
    };
  }
});