| | <!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> |
