JSFiddle - React, Tailwind, and code Playground

by Brett Gaynor

HTML

<div class="widget ContactForm" id="ContactForm22">
  <div class="ribbon"><strong>Your Billing Details</strong></div>
  <div class="contact-form-widget">
    <div class="form">
      <form name="contact-form">
        <div class="contactf-name">Your name <span style="color:red">*</span> :<input class="contact-form-name" id="ContactForm1_contact-form-name" name="Full Name" size="30" type="text" value="Full Name" onblur='if (this.value == "") {this.value = "Full Name";}' onfocus='if (this.value == "Full Name") {this.value = "";}' /></div>
        <div class="contactf-email">E-mail address <span style="color:red">*</span> :<input class="contact-form-email" id="ContactForm1_contact-form-email" name="E-mail address" size="30" type="text" value="E-mail address" onblur='if (this.value == "") {this.value = "E-mail address";}' onfocus='if (this.value == "E-mail address") {this.value = "";}' /></div>
        <div style="clear:both"></div>
        <div class="contactf-message">Your Address 
          <span style="color:red">*</span> :
          <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="Hometown/ City/ Your State...." rows="5" placeholder="Hometown/ City/ Your State...." value="Hometown/ City/ Your State...." onblur='if (this.value == "") {this.value = "Hometown/ City/ Your State....";}' onfocus='if (this.value == "Hometown/ City/ Your State....") {this.value = "";}'></textarea>
          <p>
              <label for="number0"><input type="radio" value="http://www.paypal.com" name="number"     id="number0"> Pay by Paypal</label><br>
              <label for="number1"><input type="radio" value="http://www.instamojo.com" name="number" id="number1"> Pay by InstaMojo</label><br>
              <label for="number2"><input type="radio" value="http://www.skrill.com" name="number" id="number2"> Pay by Skrill</label><br>
          </p>
          <button class="contact-form-button contact-form-button-submit"...

CSS

.widget.ContactForm {
    z-index: 1
}

.contact-form-widget {
    margin-left: auto;
    margin-right: auto;
    width:100%;
    max-width:98%;
    padding: 25px 0;
    border:1px solid #b2b2b2;
    -webkit-border-radius: 2%;
    -moz-border-radius: 2%;
    border-radius:3px;
}

.contact-form-widget .form {
    width: 91%;
    margin: 0 auto
}

.ribbon {
    font: 20px Arial;
    text-transform: capitalize;
    position:center;
    background: #6B5F53;
    color: #fff;
    text-align: center;
    padding:7px 0 7px 0;
    margin:0 0 3px 0;
    border-radius:5px;
}

.contactf-name,
.contactf-email,
.contactf-message {
    text-align: left;
    margin-top: 25px;
    color: #000;
    font-size: 13px;
    font-weight:600
   
}

.contactf-name,
.contactf-email {
    float: left;
    width: 100%
}

.contact-form-name,
.contact-form-email,
.contact-form-email-message,
.contact-form-name:hover,
.contact-form-name:focus,
.contact-form-email:hover,
.contact-form-email:focus,
.contact-form-email-message:hover,
.contact-form-email-message:focus {
    width: 100%;
    max-width: 100%;
    margin: 10px 0 0;
    padding: 10px;
    font-size: 12px;
    color: #aaa;
    border-color: #cccccc;
    border-top:1px solid #666666;
    border-left:1px solid #666666;
    border-width: 1px;
    box-shadow: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px
}

.contact-form-name,
.contact-form-email {
    height: 35px
}

.contact-form-email-message {
    height: 100px
}
.contact-form-button-submit,
.contact-form-button-submit:hover {
    margin-top: 25px;
padding:0 35px 0 35px;
    height: 37px;
    font: bold 18px Arial;
    outline: none;
    letter-spacing: 1px;
    color: #fff;
    text-align: center;
    cursor: pointer;
    color: #333333;
    background: #d2d2d2;
}
.contact-form-button-submit:active {
    color: #333333;
    border: 1px solid #d6a437;
    background: #febd4b;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#febd4b)...