JSFiddle - React, Tailwind, and code Playground

by grafixguy76

HTML

<body>
    <div id="intro_txt">
<h1> Comprehensive Pay-Per-Click Management Services</h1>

    <p>Unlike many Pay-Per-Click vendors, Medium Blue’s in-house team of experts offer a comprehensive PPC management program tailored to help you increase quality conversions and maximize your ROI. We begin by learning as much as we can about your business and your target audience – the more we learn, the better your campaigns will perform. Your campaign will be customized to obtain a desirable cost-per-acquisition each month. Our staff of Google AdWords and Google Analytics certified technicians, experienced implementation team and innovative designers are determined to help you realize success and optimize your monthly spend.</p>
    <ul>
        <li><p class="list">No contract necessary – let us prove our success month to month</p></li>
        <li><p class="list">Dedicated in-house team of experts applying resources and expertise
            towards continually improving results</p></li>
        <li><p class="list">Our design team will create dedicated landing pages to increase
            conversion rates</p></li>
    </ul>
        <div>
            
            <div id="form">
                <form method="post" action="http://www.survivalskillz.com/dev/mb_formdata.php" value="#">
                <p class="form_title">Get started today with your <strong>Complimentary Adwords Audit</strong></p>
                <input id="firstname" class="required text" name="firstname" value="Name" onfocus="if (this.value == 'Name') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Name';}" size="45" type="text"  />
<input id="phone" class="required text" name="phone" value="Phone" onfocus="if (this.value == 'Phone') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Phone';}" size="45" type="text"  />
                <input id="email" class="required text" name="email" value="Email" onfocus="if (this.value == 'Email') {this.value = '';}" onblur="if...

CSS

h1 {
    font-family: Helvetica, Sans-serif;
    font-size: 18pt;
    color: #1673e7;
    text-shadow: 2px 2px #c5c5c5;
}
p {
    font-family: helvetica, sans-serif;
    font-size: 13pt;
    color: #434343;
    line-height: 1.5;
}

p.list {
    font-family: helvetica, sans-serif;
    font-size: 15pt;
    color: #156ede;
    line-height: .8;
}

ul li {
    font-family: helvetica, sans-serif;
    font-size: 14pt;
    color: #156ede;
    line-height: 2.2;
}

#intro_txt {
    width: 638px;
    padding: 20px 50px;
    
}

#form {

  background: #1670e1;
  background: url('linear-gradient.png') 0 0 repeat-x;
  background: -webkit-linear-gradient(#d3e4fa, #1670e1);
  background:    -moz-linear-gradient(#d3e4fa, #1670e1);
  background:     -ms-linear-gradient(#d3e4fa, #1670e1);
  background:      -o-linear-gradient(#d3e4fa, #1670e1);
  background:         linear-gradient(#d3e4fa, #1670e1);

    margin: 50px 25px 50px 25px;
    padding: 20px 20px;
    width: 250px;
    height: 375px;
}

#form input {
    font-size: 11pt;
    padding-top: 10px;
    padding-left: 6px;
padding-bottom: 4px;
    margin-top: 8px; 
    width: 225px;
    color: #3d3d3d;
 
}

#form #submitbtn {
    color: #ffffff;
    margin-top: 25px;
    margin-left: 8px; 
    padding: 15px 0;
}

p.form_title {
    font-family: helvetica, sans-serif;
    font-size: 16pt;
    font-weight: normal;
    color: #000000;
    line-height: 1.3;
      text-shadow: 1px 1px #c5c5c5;
    
    
}
.button {
    display: inline-block;
    zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
    *display: inline;
    vertical-align: baseline;
    margin: 40px 0px 20px 0px;
   
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 16px/100% Arial, Helvetica, sans-serif;
    padding: 1.5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em; 
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px...