JSFiddle - React, Tailwind, and code Playground

by Christopher Collins

HTML

<div id="order_page">  
<div>
<div id="picture">
</div>
  <div id="topBlock"></div>
  <div id="thankyou">
    <h1>Thank you for your order</h1>
  </div>
  <div id="order_number">
    <h2>Order number: </h2>
  </div>
  <div>An confirmation email has been sent to ..... Cantact us if you don't receive an email from us in a few minutes.</div>
  <div id="buttons">
    <button class="button_style">PRINT RECEIPT</button>
    <button class="button_style">VIEW MY ORDERS</button>
  </div>
  

  <table class="your_order">
    <div>Your Order </div>
    <tr>
      <td>

      </td>
    </tr>
  </table><!---end of your_order--->
  
  <div id="order_page_bottom">

  <table class="order_page_bottom_table">
    <tr>
      <td>Subtotal</td>
      <td align= right>$5,979.95</td>
    </tr>
    <tr>
      <td>Discount</td>
      <td align= right>-$200.00</td>
    </tr>
    <tr>
      <td>Shipping</td>
      <td align= right>Ground: $27.58</td>
    </tr>
    <tr>
      <td>Tax</td>
      <td align= right>$345.78</td>
    </tr>
    <tr>
      <td>Total</td>
      <td align= right>$6125.73</td>
    </tr>
  </table>
  </div><!---end of order_page_bottom--->
  
  <div id="payment_used">
    <h3>Payment Used</h3>
    <table class="payment_used_table">
      <tr>
        <td>
          <input type="text" id="nameOnCard" name="nameOnCard" placeholder="Name on Card" value="" />
        </td>
      </tr>
      <tr>
        <td>
          <input type="text" id="creditCard#" name="creditCard#" placeholder="Credit Card Number" value="" />
        </td>
      </tr>
    </table>
  </div><!---end of payment used--->
  </div>
</div>

CSS

#order_page > div {
  padding-left: 14%;
  padding-right: 20%;
  width: 100%;
} 
#picture {
  position: absolute;
  display: block;
  background-image: url('http://dev.deserttech.com/images/thank_you.png');
  z-index: -1;
  width: 1424px;
  height: 1110px;
  border: solid 1px red;
  left: 0px;
  right: 0px;
  margin: auto;
  opacity: 0.4;
  filter: alpha(opacity=40);
}

#topBlock {
  width: 1133px;
  height: 140px;
  border: solid 2px black;
}
* {
  font-family: Titillium;
  font-size: 16px;
  font-weight: 600;
  line-height: 16px;
}
#order_page {
  position: absolute;
  // right: 20%;
}
#thankyou{
  border: solid 1px orange;
  height: 31px;
  margin: 22px 0px 18px 63px;
}
#order_number{
  border: solid 1px blue;
  height: 35px;
  margin-left: 4px;
}
#buttons > button:nth-child(2) { /* View My Orders button */
  width: 136px; 
}
.button_style {
  color: #55BDE9;
  background: white;
  border: solid 1px #55BDE9;
  height: 31px;
  width: 130px;
  font-size: 12px;
  margin: 8px 0px 27px 3px;
}
.your_order{
  width: 1133px;
  height: 374px;
  border: solid 1px red;
  
}
#order_page_bottom{
  width: 1133px;
  height: 202px;
  border: solid 1px green;
}
.order_page_bottom_table {
  position: relative;
  float: right;
  width: 293px;
  height: 196px;
  color: black;
  border: solid 1px black;
  padding-right: 13px;
  padding-top: 5px;
}

#payment_used {
  float: right;
  width: 291px;
  height: 39px;
  border: solid 1px black;
}

.payment_used {
  float: right;
  margin: -6px 17px 0px 0px;
}

.payment_used_table > tbody > tr > td > input {
  width: 266px;
  height: 32px;
  color: blue;
}