JSFiddle - React, Tailwind, and code Playground

by Harsh Kansagara

HTML

<table class="invoice">
  <tr>
    <td class="invoice__container">
      <table class="header">
        <tr>
          <td class="header__left">
            <img class="logo" src="https://whatshash.com/wp-content/uploads/2019/05/logo-dark.svg" />

          </td>
          <td class="header__right">
            <h3 class="name">
              WhatsHash Store
            </h3>


            <p class="address">
              #503, 7Span Technologies, iSquare Corporate Park, Science City Road, Sola, Ahmedabad - 380013
            </p>
          </td>
        </tr>
      </table>

      <hr/>

      <!-- ORDER & CUSTOMER -->
      <table class="customer">
        <tr class="customer__heading">
          <td>Order ID</td>
          <td>Date</td>
          <td>Customer</td>
          <td>Contact No</td>
        </tr>
        <tr>
          <td><b>#1254</b></td>
          <td>Jun 04 2020 | 10:00 AM</td>
          <td>Harsh Kansagara</td>
          <td class="nowrap">+91 99986 33305</td>
        </tr>
      </table>
      
      <hr/>

      <!-- ITEMS -->
      <table class="items">
        <thead>
          <tr>
            <th>#</th>
            <th>Product</th>
            <th>Measurement</th>
            <th class="number">Unit Price</th>
            <th class="number">Qty</th>
            <th class="number">Price</th>
          </tr>
          <tr>
            <td>2</td>
            <td>Men Navy Blue & Grey Printed Smart Casual Blazer</td>
            <td>1 Pcs</td>
            <td class="number">2,399</td>
            <td class="number">1</td>
            <td class="number">2,399</td>
          </tr>
          <tr>
            <td>3</td>
            <td>The Classic Grid Skinny Tie (Black/White Grid)</td>
            <td>1 Pcs</td>
            <td class="number">2,399</td>
            <td class="number">1</td>
            <td class="number">2,399</td>
          </tr>
          <tr>
            <td>4</td>
            <td>United Colors of Benetton Unisex Oval...

SCSS

@page {
  size: A4 portrait;
}

hr{
  color:#dadada;
}

.invoice {
  border-collapse: collapse;
  border: 1px solid #dadada;
  font-family: sans-serif;
  font-size: 14px;
}

.logo {
  width: 200px;
  vertical-align: top;
}

.name {
  margin: 0;
}

.header__center {
  width: 100px;
}

.header__right{
  width:50%;
  text-align:right;
}


.invoice__container {
  padding: 20px;
}

.address {
  text-align: right;
  color: #777;
  margin:5px 0 0 0;
}

.items {
  width: 100%;
  margin-top: 15px;
  border-collapse: collapse;
  
  td, {
    padding: 6px 10px;
    border-top: 1px solid #dadada;
  }

  th {
    padding: 6px 10px;
    text-align: left;
    color:#777;
    font-weight:normal;
    font-size:12px;
  }

}

.number {
  text-align: right;
}
  
.total{
  margin:10px 0px;
}

.customer{
  width:100%;
  border-collapse:collapse;
  td{
    padding:2px 8px;
    vertical-align:top;
    border-left:1px solid #dadada;
    border-right:1px solid #dadada;
  }
  td:first-child,
  td:last-child{
    border:none;
  }
  
}

.customer__heading{
  white-space:nowrap;
  td{
    color:#777;
    font-size:12px;
  }
}

.nowrap{
  white-space:nowrap;
}


.additional{
  width: 100%;
  margin-top: 15px;
  border-collapse: collapse;
  th,
  td {
    padding: 6px 10px;
    border-bottom: 1px solid #dadada;
  }

  th {
    text-align: left;
    color:#777;
  }
  
  td:first-child{
    width:18px;
    font-size:18px;
  }
}

.contact-no{
  p{
    margin: 0 }
}