JSFiddle - React, Tailwind, and code Playground

by billjohnston4

HTML

<html>
  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <link href="https://themes.googleusercontent.com/fonts/css?kit=fpjTOVmNbO4Lz34iLyptLUXza5VhXqVC6o75Eld_V98"  rel="stylesheet" />
  </head>

  <body class="c46">
    <div id="contract_summary">
    <div>
        Contract between <b>{{contract.campaign_serviceprovider.serviceprovider.name}}</b> and <b>{{contract.contractinfo.campaign.campaigndetails.brand.name}}</b>
    </div>
	<section>
        <div class="column" style="width:70%">
            <section>
        		<h2>Offer</h2>
                <div class="indent">
            		<div>
            			<h4>Payment</h4>
            			<div class="indent">
            				<div class="value">
            					${{contract.get_total_compensation_amount|floatformat:2}}
            				</div>
            				<div class="description">
            					<b>Schedule:</b>  {{contract.get_payment_schedule_component.get_timing_display}}
            				</div>
            			</div>
                    </div>
                </div>
            </section>
            <section style="margin-left:-10px">
                <h2>Summary of Deliverables</h2>
                <div class="indent">  
                    {% for deliverable in deliverables %}
                    <div style="font-size:.7em;font-style:italic">
                        review by: <span class="value">{{deliverable.review_date|date:"M d, Y"}}</span>
                    </div>
                    <div style="font-size:.7em;font-style:italic">
                        publish by: <span class="value">{{deliverable.delivery_date|date:"M d, Y"}}</span>
                    </div>
                    <div>
                        <table style="font-size:.9em;padding:3px;width:110%;text-align:left" >
                            <tr>
                                <td>
                                    {{deliverable.provider.name}}
                                </td>
                 ...