Hi All
Based on the fantastic work of Marco I’ve completed his course and begun adding the features to my app. As per pic I’m trying to get the table left and right aligned to the logo (top left) and text (top right) but am struggling to do so. The HTML for reference is below Note: CSS is tailwind. I’m wondering if anyone can run there eyes over the formatting and advise what needs to be changed. Everything aligns perfectly on the left. Think of it like an invoice or proposal in Word. Thanks in advance. Cheers
<div class="text-sm leading-6 text-gray-500 flex items-center justify-between">
<div class="mt-[-60px]"> <!-- Adjusted margin for the image -->
<img src="{{company-logo}}" class="h-24 mb-8 mr-4" /> <!-- Increased height of the logo -->
</div>
<div class="text-right mt-[-60px]"> <!-- Adjusted margin for the text -->
<h2 class="text-base font-semibold text-gray-900 text-xs"> </h2> <!-- Placeholder text, adjust as needed -->
<h2 class="font-normal text-gray-900">Cur Ltd<br>
A.B.N. 49 7<br>
2 Street<br>
P.O. 6<br>
Haw Australia<br>
Phone: 8888<br>
wp.com.au<br>
<br>
</h2>
</div>
</div>
<h2 class="text-base font-semibold leading-6 text-gray-400">Proposal<br><span class="font-normal text-sx text-gray-900">REF {{title}}</span></h2>
<dl class="mt-4 grid grid-cols-1 text-sm leading-6 sm:grid-cols-1">
<div class="sm:pr-4">
<dt class="inline text-gray-500">Issued on</dt><br>
<dd class="inline text-gray-700"><time>{{issue-date}}</time></dd>
</div>
<div class="mt-6 sm:mt-4 sm:border-t sm:border-gray-900/5 sm:pt-4 flex flex-col items-start">
<dt class="font-semibold text-gray-700">To</dt>
<dd class="mt-2 text-md text-gray-500"><span class="font-medium text-violet-700">{{client-legal-name}}</span><br>
<span class="font-medium text-gray-500">ABN {{client-abn}}</span>
<br>
{{client-billing-address}}
</dd>
</div>
</dl>
<br>
<br>
<table class="w-full whitespace-nowrap text-left text-sm leading-6">
<colgroup>
<col class="w-1/12"> <!-- Adjusted width for the quantity column -->
<col> <!-- Default width for the code column -->
<col class="min-w-[100px]"> <!-- Adjusted minimum width for the name column -->
<col class="w-[400px]"> <!-- Adjusted width for the description column -->
<col> <!-- Default width for the rate column -->
<col> <!-- Default width for the price column -->
</colgroup>
<thead class="border-b border-gray-200 text-gray-700">
<tr>
<th scope="col" class="py-1 pl-4 pr-3 font-semibold text-left bg-gray-200">Qty</th> <!-- Adjusted padding and alignment -->
<th scope="col" class="py-1 pl-3 pr-3 text-left font-semibold bg-gray-200">Code</th>
<th scope="col" class="py-1 pl-3 pr-3 text-left font-semibold bg-gray-200">Name</th>
<th scope="col" class="py-1 pl-1 pr-3 text-left font-semibold bg-gray-200">Description</th>
<th scope="col" class="py-1 pl-3 pr-3 text-right font-semibold bg-gray-200"></th>
<th scope="col" class="py-1 pl-3 pr-3 text-right font-semibold bg-gray-200"></th>
</tr>
</thead>
<tbody>
{{items}}
</tbody>
<tfoot>
<tr>
<th scope="row" class="px-0 pb-0 pt-6 font-normal text-gray-500 sm:hidden">Subtotal</th>
<th scope="row" colspan="5" class="hidden px-0 pb-0 pt-6 text-right font-normal text-gray-500 sm:table-cell">Subtotal</th>
<td class="pb-0 pl-8 pr-0 pt-6 text-right tabular-nums text-gray-900">{{subtotal}}</td>
</tr>
<tr>
<th scope="row" class="pt-4 font-normal text-gray-500 sm:hidden">Tax</th>
<th scope="row" colspan="5"
class="hidden pt-4 text-right font-normal text-gray-500 sm:table-cell">Tax</th>
<td class="pb-0 pl-8 pr-0 pt-4 text-right tabular-nums text-gray-900">{{tax}}</td>
</tr>
<tr>
<th scope="row" class="pt-4 font-semibold text-gray-700 sm:hidden">Total</th>
<th scope="row" colspan="5" class="hidden pt-4 text-right font-semibold text-gray-700 sm:table-cell">Total Due</th>
<td class="pb-0 pl-8 pr-0 pt-4 text-right tabular-nums text-gray-900">{{total}}</td>
</tr>
</tfoot>
</table>
<br>
<br>
<h2 class="text-md font-semibold leading-4 text-gray-900">Standard Inclusion</h2>
<h2 class="text-sm font-normal leading-2 text-gray-500">Delivered and Installed with operator training.
<br>
Ground floor, easy access, excluding electrical connection and plumbing.</h2>
<br>
<h2 class="text-md font-semibold leading-4 text-gray-900">Warranty</h2>
<h2 class="text-sm font-normal leading-2 text-gray-500">12 months parts and labour.</h2>
<h2 class="text-sm font-normal leading-2 text-gray-500">Duration applies to a single shift - 8 hours per day 5 days per week.</h2>
<br>
<h2 class="text-md font-semibold leading-4 text-gray-900">Terms Of Payment</h2>
<h2 class="text-sm font-normal leading-2 text-gray-500">10% Deposit upon contract signing.</h2>
<h2 class="text-sm font-normal leading-2 text-gray-500">Balance upon delivery unless prior arrangements are made in writing.</h2>
<br>
