JSFiddle - React, Tailwind, and code Playground

by Samantha Edwards

HTML

<div id="picture">
</div>
<div id="practice">
</div>
<div id="topBlock">
</div>
<div id="checkout">
  <div>
    <div id="guestCheckout">Guest Checkout</div>
    <div id="guestCheckoutDetail">You'll have an opportunity to create an account later</div>
    <div id="yourDetails">Your Details</div>
    <table>
      <tr>
        <td>
          <input type="text" id="firstName" name="firstName" placeholder="First Name" value="" />
        </td>
      </tr>
      <tr>
        <td>
          <input type="text" id="lastName" name="lastName" placeholder="Last Name" value="" />
        </td>
      </tr>
      <tr>
        <td>
          <input type="text" id="email" name="email" placeholder="Email" value="" />
        </td>
      </tr>
    </table>

    <div id="billingDetails"> Billing Details</div>
    <table>
      <tr>
        <td>
          <input type="text" id="billingName" name="billingName" placeholder="Name" value="" />
        </td>
      </tr>
      <tr>
        <td>
          <input type="text" id="billingCompany" name="billingCompany"  placeholder="Company" value="" />
        </td>
      </tr>
      <tr>
        <td>
          <input type="text" id="billingCountry" name="billingCountry" placeholder="Country" value="" />
        </td>
      </tr>
      <tr>
        <td>
          <input type="text" id="billingAddress" name="billingAddress" placeholder="Address" value="" />
        </td>
      </tr>
      <tr>
        <td>
          <input type="text" id="billingApartment" name="billingApartment" placeholder="Apartment or Suite #" value="" />
        </td>
      </tr>
      <tr>
        <td>
          <input type="text" id="billingZipCode" name="billingZipCode" placeholder="ZIP Code" value="" />
        </td>
      </tr>
      <tr>
        <td>
          <input type="text" id="billingPhone" placeholder="billingPhone" value="" />
        </td>
      </tr>
    </table>

    <div id="shippingDetails">Shipping Details</div>
    <input type="checkbox"...

CSS

tbody > tr > td > input {
  width: 293px;
  height: 33px;
}

* {
  font-family: Titillium;
  font-size: 16px;
  font-weight: 600;
  line-height: 16px;
}

#picture {
  position: absolute;
  display: none;
  background-image: url('http://deserttech.com/images/Checkout.png');
  z-index: 0;
  width: 1440px;
  height: 1629px;
  border: solid 1px red;
  left: 0px;
  right: 0px;
  margin: auto;
  opacity: 0.4;
  filter: alpha(opacity=40);
}

#topBlock {
  width: 100%;
  height: 140px;
  border: solid 2px black;
}

#checkout {
  float: right;
  right: 50%;
  position: relative;
}

#checkout > div {
  float: left;
  left: 50%;
  position: relative;
}

#checkout > div:nth-child(2) {
  float: right;
  position: relative;
  right: 50%;
}

#guestCheckout,
#returningCustomers {
  font-family: "Sui Generis";
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}

.sameBilling {
  left: 0px;
  right: 342px;
  top: 1002px;
  bottom: 0px;
  margin: auto;
  width: 15px;
  height: 20px;
  background: #Oe5f84;
}

.checkoutButton {
  left: 0px;
  right: 57px;
  top: 2115px;
  bottom: 0px;
  margin: auto;
  width: 300px;
  height: 35px;
  background: #D15B00;
  color: white;
}