JSFiddle - React, Tailwind, and code Playground

by Kai_Draord

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />
<div class="row">
  <div class="col-12 col-md-12 col-sm-12">
    <div class="row">
      <div class="col-4 col-md-4 col-sm-5 ">
        <table class="table table-bordered ">
          <th><strong> Payment Received </strong></th>
          <tbody>
            <tr style="page-break-after: always;">
              <td class="left">
                Payment Method: xxxxxx
              </td>
            </tr>
            <tr>
              <td class="left">
                Reference No: 2192012
              </td>
            </tr>
            <tr>
              <td class="left">
                Amount Paid: RM10,000.00
              </td>
            </tr>
          <tbody>
        </table>
      </div>
      <div class="col-4 col-md-4 col-sm-5 pull-right ml-auto">
        <table class="table table-clear">
          <tbody>
            <tr>
              <td class="left">
                <strong>Subtotal</strong>
              </td>
              <td class="right">8.497,00</td>
            </tr>
            <tr>
              <td class="left">
                <strong>Transportation(Klang Valley)</strong>
              </td>
              <td class="right">1,699,40</td>
            </tr>
            <tr>
              <td class="left">
                <strong>Transportation(Outstation)</strong>
              </td>
              <td class="right">679,76</td>
            </tr>
            <tr>
              <td...

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}