 <!DOCTYPE html>
<html>
  <head>
    
      @tailwind components; @tailwind utilities;
                  .areesh-relative{
          position: relative
      }
                  .areesh-z-10{
          z-index: 10
      }
                  .areesh-my-2{
          margin-top: 0.5rem;
          margin-bottom: 0.5rem
      }
                  .areesh-mt-4{
          margin-top: 1rem
      }
                  .areesh-flex{
          display: flex
      }
                  .areesh-w-1-4{
          width: 25%
      }
                  .areesh-w-full{
          width: 100%
      }
                  .areesh-max-w-600px{
          max-width: 600px
      }
                  .areesh-justify-center{
          justify-content: center
      }
                  .areesh-overflow-hidden{
          overflow: hidden
      }
                  .areesh-rounded-md{
          border-radius: 0.375rem
      }
                  .areesh-rounded-sm{
          border-radius: 0.125rem
      }
                  .areesh-object-cover{
          object-fit: cover
      }
                  .areesh-px-4{
          padding-left: 1rem;
          padding-right: 1rem
      }
                  .areesh-text-sm{
          font-size: 0.875rem;
          line-height: 1.25rem
      }
                  .areesh-font-bold{
          font-weight: 700
      }
                  .areesh-font-semibold{
          font-weight: 600
      }
                  .areesh-uppercase{
          text-transform: uppercase
      }
                  .areesh-outline{
          outline-style: solid
      }
                  .areesh-outline-2{
          outline-width: 2px
      }
                  .areesh-outline-fuchsia-300{
          outline-color: #f0abfc
      }
    
  </head>
  <body>
    <div
      class="areesh-w-full"
      style="background-color: rgb(248, 250, 252); color: rgb(0, 0, 0); font-family: Roboto !important;"
    >
      <div class="areesh-w-full" tag="div" name="flip-image" type="transition">
        <div
          tabindex="0"
          class="areesh-group areesh-relative areesh-flex areesh-w-full areesh-justify-center areesh-z-10 areesh-rounded-sm areesh-outline areesh-outline-2 areesh-outline-fuchsia-300"
          data-draggable="true"
        >
          <table
            align="center"
            width="100%"
            border="0"
            cellpadding="0"
            cellspacing="0"
            role="presentation"
            class="areesh-w-full areesh-max-w-600px areesh-overflow-hidden"
            style="border-style: none; border-width: 0px; border-color: transparent; border-radius: 0px; background-color: transparent; border-collapse: separate; padding: 16px; font-family: Roboto, Arial, sans-serif; font-weight: 400; font-style: normal; color: rgb(0, 0, 0);"
          >
            <tbody>
              <tr>
                <td>
                  <table
                    align="center"
                    width="100%"
                    border="0"
                    cellpadding="0"
                    cellspacing="0"
                    role="presentation"
                  >
                    <tbody style="width: 100%;">
                      <tr style="width: 100%;">
                        <td role="presentation">
                          <p class="areesh-font-bold">Items Ordered</p>
                          <hr
                            class="areesh-my-2"
                            style="width: 100%; border-top: 1px solid rgb(234, 234, 234); border-right: none; border-bottom: none; border-left: none; border-image: initial;"
                          />
                        </td>
                      </tr>
                    </tbody>
                  </table>
                  <table
                    align="center"
                    width="100%"
                    border="0"
                    cellpadding="0"
                    cellspacing="0"
                    role="presentation"
                  >
                    <tbody style="width: 100%;">
                      <tr style="width: 100%;">
                        <td
                          role="presentation"
                          align="left"
                          class="areesh-w-1-4"
                        >
                          <img
                            src="/_nuxt/assets/components/Products/Product.png"
                            alt="Product Image"
                            class="areesh-w-full areesh-rounded-md areesh-object-cover"
                          />
                        </td>
                        <td
                          role="presentation"
                          align="left"
                          class="areesh-px-4"
                        >
                          <div class="areesh-font-semibold areesh-uppercase">
                            Skywalker Watch
                          </div>
                          <div class="areesh-text-sm areesh-uppercase">
                            White / Nano Strap - 40mm
                          </div>
                        </td>
                        <td role="presentation" align="center">
                          <div class="areesh-font-bold">x 1</div>
                        </td>
                        <td role="presentation" align="right">
                          <div class="areesh-font-bold">$120.00</div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                  <table
                    align="center"
                    width="100%"
                    border="0"
                    cellpadding="0"
                    cellspacing="0"
                    role="presentation"
                  >
                    <tbody style="width: 100%;">
                      <tr style="width: 100%;">
                        <td role="presentation">
                          <hr
                            class="areesh-my-2"
                            style="width: 100%; border-top: 1px solid rgb(234, 234, 234); border-right: none; border-bottom: none; border-left: none; border-image: initial;"
                          />
                        </td>
                      </tr>
                    </tbody>
                  </table>
                  <table
                    align="center"
                    width="100%"
                    border="0"
                    cellpadding="0"
                    cellspacing="0"
                    role="presentation"
                    class="areesh-my-2"
                  >
                    <tbody style="width: 100%;">
                      <tr style="width: 100%;">
                        <td
                          role="presentation"
                          align="left"
                          class="areesh-font-bold"
                        >
                          Subtotal
                        </td>
                        <td role="presentation" align="right">$120.00</td>
                      </tr>
                    </tbody>
                  </table>
                  <table
                    align="center"
                    width="100%"
                    border="0"
                    cellpadding="0"
                    cellspacing="0"
                    role="presentation"
                    class="areesh-mt-4"
                  >
                    <tbody style="width: 100%;">
                      <tr style="width: 100%;">
                        <td
                          role="presentation"
                          align="left"
                          class="areesh-font-bold"
                        >
                          Express Shipping
                        </td>
                        <td role="presentation" align="right">$10.00</td>
                      </tr>
                    </tbody>
                  </table>
                  <table
                    align="center"
                    width="100%"
                    border="0"
                    cellpadding="0"
                    cellspacing="0"
                    role="presentation"
                    class="areesh-mt-4"
                  >
                    <tbody style="width: 100%;">
                      <tr style="width: 100%;">
                        <td
                          role="presentation"
                          align="left"
                          class="areesh-font-bold"
                        >
                          Sales Tax
                        </td>
                        <td role="presentation" align="right">$12.49</td>
                      </tr>
                    </tbody>
                  </table>
                  <table
                    align="center"
                    width="100%"
                    border="0"
                    cellpadding="0"
                    cellspacing="0"
                    role="presentation"
                    class="areesh-mt-4"
                  >
                    <tbody style="width: 100%;">
                      <tr style="width: 100%;">
                        <td
                          role="presentation"
                          align="left"
                          class="areesh-font-bold"
                        >
                          Total
                        </td>
                        <td role="presentation" align="right">$142.49</td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </body>
</html>