| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" |
| "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> |
| <head> |
| <title>Pay Slip</title> |
| <style type="text/css"> |
| body { |
| font-family: Arial, sans-serif; |
| font-size: 10px; |
| line-height: 1.2; |
| margin: 0; |
| padding: 0; |
| } |
| .pay-slip-container { |
| position: relative; |
| width: 855px; |
| height: 619px; |
| border: 1px solid black; |
| box-sizing: border-box; |
| padding: 20px; |
| } |
| .header { |
| position: absolute; |
| left: 26px; |
| top: 26px; |
| font-size: 20px; |
| font-weight: bold; |
| } |
| .employer-info { |
| position: absolute; |
| left: 34px; |
| top: 102px; |
| } |
| .employee-info { |
| position: absolute; |
| left: 34px; |
| top: 175px; |
| } |
| .period-info { |
| position: absolute; |
| left: 461px; |
| top: 11px; |
| } |
| .payment-mode-info { |
| position: absolute; |
| left: 470px; |
| top: 175px; |
| } |
| .overtime-details { |
| position: absolute; |
| left: 467px; |
| top: 244px; |
| } |
| .table-container { |
| position: absolute; |
| left: 23px; |
| top: 260px; |
| width: 809px; |
| height: 340px; |
| border: 1px solid black; |
| border-collapse: collapse; |
| } |
| .table-container td, .table-container th { |
| border: 1px solid black; |
| padding: 5px; |
| text-align: left; |
| vertical-align: top; |
| box-sizing: border-box; |
| } |
| .table-container th { |
| font-weight: bold; |
| } |
| .col1 { width: 15%; } |
| .col2 { width: 18%; } |
| .col3 { width: 15%; } |
| .col4 { width: 15%; } |
| .col5 { width: 17%; } |
| .col6 { width: 20%; } |
| .text-right { |
| text-align: right; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="pay-slip-container"> |
| <div class="header"> |
| Itemised Pay Slip |
| </div> |
| <div class="employer-info"> |
| <p>Name of Employer</p> |
| <p>ABC PTE LTD</p> |
| </div> |
| <div class="employee-info"> |
| <p>Name of Employee</p> |
| <p>Ton Ah Kow</p> |
| </div> |
| <div class="period-info"> |
| <p>For the period: 1/09/2021 - 30/09/2021</p> |
| <p>Date of Payment: 04/09/2021</p> |
| </div> |
| <div class="payment-mode-info"> |
| <p>Mode of Payment</p> |
| <p>Cash / Cheque+Bank Deposit</p> |
| </div> |
| <div class="overtime-details"> |
| Overtime Details |
| </div> |
| <table class="table-container"> |
| <thead> |
| <tr> |
| <th colspan="2">A) GROSS PAY</th> |
| <th colspan="2">B) DEDUCTIONS</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td class="col1">Basic Pay</td> |
| <td class="col2 text-right">$2,000</td> |
| <td class="col3">Overtime Hours Worked</td> |
| <td class="col4 text-right">5</td> |
| </tr> |
| <tr> |
| <td>Allowances</td> |
| <td class="text-right">$500</td> |
| <td>Overtime Pay</td> |
| <td class="text-right">$72.70</td> |
| </tr> |
| <tr> |
| <td>Transport</td> |
| <td class="text-right">$300</td> |
| <td></td> |
| <td></td> |
| </tr> |
| <tr> |
| <td>Bonus</td> |
| <td class="text-right">$2,000</td> |
| <td></td> |
| <td></td> |
| </tr> |
| <tr> |
| <td colspan="2"><strong>GROSS PAY (A+B)</strong></td> |
| <td colspan="2" class="text-right"><strong>$2,500</strong></td> |
| </tr> |
| <tr> |
| <td>Employee's CPF Contribution</td> |
| <td class="text-right">$1,115</td> |
| <td rowspan="2"><strong>Net Pay (A-B)</strong></td> |
| <td rowspan="2" class="text-right"><strong>$4,263.70</strong></td> |
| </tr> |
| <tr> |
| <td>Advanced Loan</td> |
| <td class="text-right">$500</td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </body> |
| </html> |
