JSFiddle - React, Tailwind, and code Playground

by Samantha Edwards

HTML

<div id="my_items">
  <div id="added_items"><!--left box-->
    <div class="item_style"># Items</div>
    <div class="item_style_2nd_part">Added to your cart</div>
    <div>
      <div id="rifle_picture"></div>
      <table class="rifle_table">
        <tr>
          <td>Custom Rifle</td>
        </tr>
        <tr>
          <td>$5,095.00</td>
        </tr>
        </table>
    </div>
    
  </div><!--end of added_item-->

  <div id="your_cart"><!--right box-->
    <div class="item_style">Your Cart:</div>
    <div class="item_style_2nd_part">3 Items</div>
    <table class="my_items_table">
      <tr>
        <td>Order subtotal:</td>
        <td>$1,999</td>
      </tr>
      <tr>
        <td>Taxes:</td>
        <td>$176.23</td>
      </tr>
      <tr>
        <td>Est. Shipping  Handling:</td>
        <td>FREE</td>
      </tr>
      <tr>
        <td>Subtotal:</td>
        <td>$2,175</td>
      </tr>
    </table>
    <div id="buttons">
      <button class="button_style">CONTINUE SHOPPING</button>
      <button class="button_style">GO TO CARTT</button>
    </div>
  </div><!--end of your_cart-->
  
  <div id="bottom_box">
    <div class="people_bought_items">People who bought this item also bought</div>
    <div id="items_bought"></div>
  </div><!--end of bottom_box-->
</div><!--end of my_items-->

CSS

#picture {
  position: absolute;
  display: block;
  background-image: url('http://deserttech.com/images/my_items.png');
  background-repeat: no-repeat;
  z-index: -1;
  width: 740px;
  height: 574px;
  border: solid 1px red;
  left: 0px;
  right: 0px;
  margin: auto;
  opacity: 0.4;
  filter: alpha(opacity=40);
}
#my_items{
  width: 707px;
  height: 537px;
  margin-left: 18%;
  padding-top:18px;
  /* border: solid 1px blue; */
  background-image: url('http://deserttech.com/images/my_items.png');
  background-repeat: no-repeat;
}
#added_items{
  float:left;
  width: 49%;
  height: 44%;
  /* border: solid 1px orange; */
}
.item_style{
  float: left;
  color: #D15B00;
  /* border:solid 1px black; */
  width: 28%;
  height: 20px;
  padding-left: 36px;
  margin-top: 31px;
}
.item_style_2nd_part{
  float:left;
  width: 55%;
  height: 20px;
  margin-top: 31px;
  /* border:solid 1px blue; */
  
}
#added_items > div:nth-child(3) {
  margin-top: 81px;
  width: 100%;
  height: 81px;
  /* border:solid 1px red; */

}
#rifle_picture{
  float: left;
  width:40%;
  height: 100%;
  padding-left: 18px;
  /* border: solid 1px black; */
}
#your_cart{
  float: right;
  width: 50%;
  height: 44%;
  /* border: solid 1px green; */
}
.my_items_table{
  float: right;
  width: 100%;
  height: 41%;
  padding: 15px 0px 0px 34px;
  /* border: solid 1px red; */
}
#buttons{
  width: 100%;
  margin-top: 179px;
  height: 51px;
  padding: 4px 0px 0px 34px;
  /* border: solid 1px black; */
}
.button_style{
  width: 186px;
  height: 44px;
  background: white;
  color: #D15B00;
  
}
#buttons > button:nth-child(2) {
  width: 114px;
  background: #D15B00;
  color: white;
}
.rifle_table{
/*   margin-top: 13px; */
  padding-top: 16px;
  /* border: solid 1px black; */
}
#bottom_box{
  float: left;
  width: 100%;
  height: 52%;
  /* border: solid 1px purple; */
}
.people_bought_items{
  padding: 35px 0px 0px 53px;
  /* vorder: solid 1px; */
}
#bottom_box > div:nth-child(2) {
  /* border: solid 1px orange;...