JSFiddle - React, Tailwind, and code Playground

by maxell4o

HTML

<div class=“main”>
  <div class=“rec-num”>$INVOICENUMBER$ $LOGHEADERID$</div>
  <div class=“rec-num”>מספר הזמנה: $RESERVATIONIDENTIFIER$</div>
  <event-info>
    <div class=“poster”> <img src=“https://www.yesplanet.co.il/xmedia-cw/repo/feats/posters/$EVENTMASTERBOOKINGCODE$-lg.jpg” /> </div>
    <div class=“event-name”> $EVENTNAME$ </div>
    <div class=“event-date”> $DATETIMEOFEVENT$ </div>
    <tickets-info>
      <div class=“tickets-table”>
        <table>
          <tr>
            <th rowspan=“3”>$QRCODE$</th>
            <th>$VENUENAMECAP$</th>
            <th>$ROWNAMECAP$</th>
            <th>$SEATNAMECAP$</th>
          </tr>
          <tr>
            <td>$VENUENAME$</td>
            <td>$ROWNAME$</td>
            <td>$SEATNAME$</td>
          </tr>
          <tr class=“ticket-info”>
            <td>$TICKETNAME$</td>
            <td class=“bidi”>$TICKETPRICEWITHSERVICECHARGE$</td>
            <td></td>
          </tr>
          <tr class=“ticket-info”>
            <td></td>
            <td>$TICKETSELLABLENAME$</td>
            <td class=“bidi”>$TICKETSELLABLEAMOUNT$</td>
            <td></td>
          </tr>
        </table>
      </div>
    </tickets-info>
  </event-info>
  <product-info>
    <div class=“products”>
      <div class=“products-header”>
        <div class=“product-name-cap”>$PRODUCTNAMECAP$</div>
        <div class=“product-quantity-cap”>$PRODUCTQUANTITYCAP$</div>
        <div class=“product-amount-cap”>$PRODUCTAMOUNTCAP$</div>
      </div>
      <product-line class=“products-details”>
        <div class=“product-name”>$PRODUCTDISPLAYNAME$</div>
        <div class=“product-quantity”>$PRODUCTQUANTITY$</div>
        <div class=“product-amount bidi”>$PRODUCTAMOUNT$</div>
      </product-line>
    </div>
  </product-info>
  <payment-info>
    <div class=“payments”>
      <div class=“payment-details”>
        <payment-line>
          <div class=“payment-name”>$PAYMENTNAME$</div>
          <div class=“payment-amount bidi”>$PAYMENTAMOUNT$</div>
 ...