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>

            <div class="contact-no">
              <p>+91 99986 33305, +91 99871 71709</p>
            </div>
          </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>
        ...

SCSS

hr{
  color: #dadada;
}

table{
  width: 100%;
}

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

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

.name {
  margin: 0;
}
.header{
  margin-bottom: 15px;
}

.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;
  font-size: 12px;
 }

.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!important;
}
  
.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{
  margin-top: 15px;
  td {
    width:50%;
    vertical-align:top;
  }
}

.checkout,
.payment{
    border-collapse: collapse;
    font-size:12px;
    td{
      border-bottom:1px solid #dadada;
      padding:4px 6px;
      &:first-child{
        color:#777;
      }
    }
    tr:last-child{
      td{
        border:none;
      }
    }
    
    .title{
      color:#000;
      margin:0;
    }
}

.contact-no{
  margin-top:5px;
  font-size:12px;
  p{  
    margin: 0;
  }
}