JSFiddle - React, Tailwind, and code Playground

by aflynt

HTML

<!doctype html>

<html lang="en">

  <head>
    <meta charset="utf-8">

    <title>Georgia Power</title>
    <meta name="description" content="The HTML5 Herald">
    <meta name="author" content="SitePoint">

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
   <link rel="stylesheet" href="style.css" type="text/css" >

  </head>

  <body>
    <div id="landing-page-content">


      <div class="jumbotron" id="row1">
        <div id="top-logo">
          <img alt="Works seamlessly with Google home, Amazon Echo, Philips Hue and Nest" src="https://resources.georgiapower.com/content/images/emails/vivint/q3-2020-signup/georgia-power-vivint-partner-web.png">

        </div>
        <div id="top-phone">
          <p>
            <img alt="Works seamlessly with Google home, Amazon Echo, Philips Hue and Nest" src="https://resources.georgiapower.com/content/images/emails/vivint/q3-2020-signup/email_vivint_icon_phone.png"> Call 855.995.5843
          </p>
        </div>
      </div>
      <div class="row" id="row2">
        <div class="col-md-9" id="hero">
          <h1>Get smart technology for the best home security.</h1>
          <div>
            <ul id="benefits-list">
              <li>Free Installation*</li>
              <li>$0 Activation*</li>
              <li>
                <p class="limited"><span style="display:inline-block;background-color:#20ad8a;padding:3px;">Limited time offer</span><br />
                  <span id="limited-big"> Free Element Thermostat&trade;
                    or Free Doorbell Camera Pro*</span>
                </p>
              </li>
            </ul>


          </div>
        </div>
        <div class="col-md-3" id="form-top">
          <p>
            Form here
          </p>
        </div>
      </div>
      <div...

CSS

@charset "utf-8";


p {
  font-size: 15px;
  font-family: Arial, sans-serif;
}

#landing-page-content {
  max-width: 1080px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
  color: #626262;
  background-color: #ffffff;
}

#row1 {
  background-color: #ffffff;
}

#top-logo {
  float: left;
  width: 50%;

}

#top-logo img {
  padding-left: 50px;

}



#top-phone {
  float: right;
  width: 50%;
}

#top-phone img {
  width: 20px;
  height: 20px;
}

#top-phone p {
  float: right;
  font-family: Arial, sans-serif;
  font-size: 20px;
  font-weight: bold;
  color: #FD8223;
  padding-right: 50px;
}

#hero {
  background: url(https://resources.georgiapower.com/content/images/emails/vivint/q3-2020-signup/email_vivint_3_header_2.png) no-repeat scroll 0 0;
  padding: 20px 0px 0px 54px;
  height: 430px;
  color: #ffffff;
}

#benefits-list {
  font-size: 15px;
  font-family: Arial, sans-serif;
  padding-left: 0px;
  margin: 27px 0px 10px 0px;

}



#benefits-list li {
  background: url(https://resources.georgiapower.com/content/images/emails/vivint/q3-2020-signup/email_vivint_icon_checkmark.png) no-repeat left top;

  padding: 3px 0px 3px 35px;
  list-style: none;
  margin: 0;
  background-size: 20px 20px;
}

#limited-big {
  font-size: 20px;
  font-family: Arial, sans-serif;
  margin-left: 10px;
  text-align: left;
}


#form-top {
  background-color: #5290a3;
  height: 430px;
}

#row3 {
  margin-top: 38px;

}

#row3 h2 {
  color: #FD8223;
  font-size: 44px;
  margin-bottom: 21px;
}

#row3 .content-left img {
  display: block;
  margin: 0 auto;
}

.small-print {
  margin-top: 14px;
  margin-bottom: 19px;
  font-size: 12px;

}

#row4 .inset img {
  width: 450px;
  height: 320px;
}

#row4 #doorbell h2 {
  color: #FD8223;
  font-size: 30px;
}

#row5 .inset img {
  width: 450px;
  height: 320px;
}

#row5 #thermostat h2 {
  color: #FD8223;
  font-size: 30px;
}

#row6 {
  background-color: #5290a3;
  color: #ffffff;
  }
  
  #row6 .content-left h2 {
    color: #ffffff;
 ...