From 4ddcd09b6c75cb5edac981b7ff8d27594cea0e36 Mon Sep 17 00:00:00 2001
From: Gaurav Saini <gauravsaini@Gauravs-MacBook-Air.local>
Date: Fri, 29 May 2020 12:39:36 +0530
Subject: [PATCH] added labels to all fields

---
 src/blocks/contact/dark/a.js  | 36 +++++++++++++++++------
 src/blocks/contact/dark/b.js  | 55 ++++++++++++++++++++++++++---------
 src/blocks/contact/dark/c.js  | 55 ++++++++++++++++++++++++++---------
 src/blocks/contact/light/a.js | 36 +++++++++++++++++------
 src/blocks/contact/light/b.js | 55 ++++++++++++++++++++++++++---------
 src/blocks/contact/light/c.js | 55 ++++++++++++++++++++++++++---------
 src/blocks/cta/dark/b.js      | 38 +++++++++++++++++-------
 src/blocks/cta/dark/c.js      | 40 ++++++++++++++++++-------
 src/blocks/cta/light/b.js     | 38 +++++++++++++++++-------
 src/blocks/cta/light/c.js     | 40 ++++++++++++++++++-------
 src/blocks/footer/dark/c.js   | 21 +++++++++----
 src/blocks/footer/dark/e.js   | 21 +++++++++----
 src/blocks/footer/light/c.js  | 21 +++++++++----
 src/blocks/footer/light/e.js  | 21 +++++++++----
 src/blocks/hero/dark/d.js     | 21 +++++++++----
 src/blocks/hero/dark/e.js     | 21 +++++++++----
 src/blocks/hero/dark/f.js     | 21 +++++++++----
 src/blocks/hero/light/d.js    | 19 ++++++++----
 src/blocks/hero/light/e.js    | 21 +++++++++----
 src/blocks/hero/light/f.js    | 21 +++++++++----
 20 files changed, 481 insertions(+), 175 deletions(-)

diff --git a/src/blocks/contact/dark/a.js b/src/blocks/contact/dark/a.js
index cbd3f6d..1c50e30 100644
--- a/src/blocks/contact/dark/a.js
+++ b/src/blocks/contact/dark/a.js
@@ -25,15 +25,33 @@ function DarkContactA(props) {
           <p className="leading-relaxed mb-5 text-gray-500">
             Post-ironic portland shabby chic echo park, banjo fashion axe
           </p>
-          <input
-            className={`bg-gray-800 text-white rounded border border-gray-700 focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2 mb-4`}
-            placeholder="Email"
-            type="email"
-          ></input>
-          <textarea
-            className={`bg-gray-800 text-white rounded border border-gray-700 focus:outline-none h-32 focus:border-${props.theme}-500 text-base px-4 py-2 mb-4 resize-none`}
-            placeholder="Message"
-          ></textarea>
+          <div class="relative mb-4">
+            <label
+              for="email"
+              class="bg-gray-800 rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-400"
+            >
+              Email
+            </label>
+            <input
+              type="email"
+              id="email"
+              name="email"
+              class={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 text-base outline-none text-gray-100 pt-6 pb-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+            />
+          </div>
+          <div class="relative mb-4">
+            <label
+              for="message"
+              class="bg-gray-800 rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-400"
+            >
+              Message
+            </label>
+            <textarea
+              id="message"
+              name="message"
+              class={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 h-32 text-base outline-none text-gray-100 pt-6 pb-1 px-3 resize-none leading-8 transition-colors duration-200 ease-in-out`}
+            ></textarea>
+          </div>
           <button className={`text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
             Button
           </button>
diff --git a/src/blocks/contact/dark/b.js b/src/blocks/contact/dark/b.js
index f22dbe4..6799e56 100644
--- a/src/blocks/contact/dark/b.js
+++ b/src/blocks/contact/dark/b.js
@@ -49,20 +49,47 @@ function DarkContactB(props) {
           <p className="leading-relaxed mb-5 text-gray-600">
             Post-ironic portland shabby chic echo park, banjo fashion axe
           </p>
-          <input
-            className={`bg-gray-800 rounded border border-gray-700 focus:outline-none focus:border-${props.theme}-500 text-base text-white px-4 py-2 mb-4`}
-            placeholder="Name"
-            type="text"
-          ></input>
-          <input
-            className={`bg-gray-800 rounded border border-gray-700 focus:outline-none focus:border-${props.theme}-500 text-base text-white px-4 py-2 mb-4`}
-            placeholder="Email"
-            type="email"
-          ></input>
-          <textarea
-            className={`bg-gray-800 rounded border border-gray-700 focus:outline-none h-32 focus:border-${props.theme}-500 text-base text-white px-4 py-2 mb-4 resize-none`}
-            placeholder="Message"
-          ></textarea>
+          <div class="relative mb-4">
+            <label
+              for="name"
+              class="bg-gray-800 rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-400"
+            >
+              Name
+            </label>
+            <input
+              type="text"
+              id="name"
+              name="name"
+              class={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 text-base outline-none text-gray-100 pt-6 pb-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+            />
+          </div>
+          <div class="relative mb-4">
+            <label
+              for="email"
+              class="bg-gray-800 rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-400"
+            >
+              Email
+            </label>
+            <input
+              type="email"
+              id="email"
+              name="email"
+              class={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 text-base outline-none text-gray-100 pt-6 pb-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+            />
+          </div>
+          <div class="relative mb-4">
+            <label
+              for="message"
+              class="bg-gray-800 rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-400"
+            >
+              Message
+            </label>
+            <textarea
+              id="message"
+              name="message"
+              class={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 h-32 text-base outline-none text-gray-100 pt-6 pb-1 px-3 resize-none leading-8 transition-colors duration-200 ease-in-out`}
+            ></textarea>
+          </div>
           <button className={`text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
             Button
           </button>
diff --git a/src/blocks/contact/dark/c.js b/src/blocks/contact/dark/c.js
index 0d95d19..1810bfa 100644
--- a/src/blocks/contact/dark/c.js
+++ b/src/blocks/contact/dark/c.js
@@ -17,24 +17,51 @@ function DarkContactC(props) {
         <div className="lg:w-1/2 md:w-2/3 mx-auto">
           <div className="flex flex-wrap -m-2">
             <div className="p-2 w-1/2">
-              <input
-                className={`w-full bg-gray-800 rounded border border-gray-700 text-white focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2`}
-                placeholder="Name"
-                type="text"
-              ></input>
+              <div class="relative">
+                <label
+                  for="name"
+                  class="bg-gray-800 rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-400"
+                >
+                  Name
+                </label>
+                <input
+                  type="text"
+                  id="name"
+                  name="name"
+                  class={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 text-base outline-none text-gray-700 pt-6 pb-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+                />
+              </div>
             </div>
             <div className="p-2 w-1/2">
-              <input
-                className={`w-full bg-gray-800 rounded border border-gray-700 text-white focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2`}
-                placeholder="Email"
-                type="email"
-              ></input>
+              <div class="relative">
+                <label
+                  for="email"
+                  class="bg-gray-800 rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-400"
+                >
+                  Email
+                </label>
+                <input
+                  type="email"
+                  id="email"
+                  name="email"
+                  class={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 text-base outline-none text-gray-100 pt-6 pb-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+                />
+              </div>
             </div>
             <div className="p-2 w-full">
-              <textarea
-                className={`w-full bg-gray-800 rounded border border-gray-700 text-white focus:outline-none h-48 focus:border-${props.theme}-500 text-base px-4 py-2 resize-none block`}
-                placeholder="Message"
-              ></textarea>
+              <div class="relative">
+                <label
+                  for="message"
+                  class="bg-gray-800 rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-400"
+                >
+                  Message
+                </label>
+                <textarea
+                  id="message"
+                  name="message"
+                  class={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 h-32 text-base outline-none text-gray-100 pt-6 pb-1 px-3 resize-none leading-8 transition-colors duration-200 ease-in-out`}
+                ></textarea>
+              </div>
             </div>
             <div className="p-2 w-full">
               <button className={`flex mx-auto text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
diff --git a/src/blocks/contact/light/a.js b/src/blocks/contact/light/a.js
index e29dcbe..5dcd56d 100644
--- a/src/blocks/contact/light/a.js
+++ b/src/blocks/contact/light/a.js
@@ -25,15 +25,33 @@ function LightContactA(props) {
           <p className="leading-relaxed mb-5 text-gray-600">
             Post-ironic portland shabby chic echo park, banjo fashion axe
           </p>
-          <input
-            className={`bg-white rounded border border-gray-400 focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2 mb-4`}
-            placeholder="Email"
-            type="email"
-          ></input>
-          <textarea
-            className={`bg-white rounded border border-gray-400 focus:outline-none h-32 focus:border-${props.theme}-500 text-base px-4 py-2 mb-4 resize-none`}
-            placeholder="Message"
-          ></textarea>
+          <div class="relative mb-4">
+            <label
+              for="email"
+              class="bg-white rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-600"
+            >
+              Email
+            </label>
+            <input
+              type="email"
+              id="email"
+              name="email"
+              class={`w-full bg-white rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 pt-6 pb-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+            />
+          </div>
+          <div class="relative mb-4">
+            <label
+              for="message"
+              class="bg-white rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-600"
+            >
+              Message
+            </label>
+            <textarea
+              id="message"
+              name="message"
+              class={`w-full bg-white rounded border border-gray-300 focus:border-${props.theme}-500 h-32 text-base outline-none text-gray-700 pt-6 pb-1 px-3 resize-none leading-8 transition-colors duration-200 ease-in-out`}
+            ></textarea>
+          </div>
           <button className={`text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
             Button
           </button>
diff --git a/src/blocks/contact/light/b.js b/src/blocks/contact/light/b.js
index ba420c2..b3e50c5 100644
--- a/src/blocks/contact/light/b.js
+++ b/src/blocks/contact/light/b.js
@@ -49,20 +49,47 @@ function LightContactB(props) {
           <p className="leading-relaxed mb-5 text-gray-600">
             Post-ironic portland shabby chic echo park, banjo fashion axe
           </p>
-          <input
-            className={`bg-white rounded border border-gray-400 focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2 mb-4`}
-            placeholder="Name"
-            type="text"
-          ></input>
-          <input
-            className={`bg-white rounded border border-gray-400 focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2 mb-4`}
-            placeholder="Email"
-            type="email"
-          ></input>
-          <textarea
-            className={`bg-white rounded border border-gray-400 focus:outline-none h-32 focus:border-${props.theme}-500 text-base px-4 py-2 mb-4 resize-none`}
-            placeholder="Message"
-          ></textarea>
+          <div class="relative mb-4">
+            <label
+              for="name"
+              class="bg-white rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-600"
+            >
+              Name
+            </label>
+            <input
+              type="text"
+              id="name"
+              name="name"
+              class={`w-full bg-white rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 pt-6 pb-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+            />
+          </div>
+          <div class="relative mb-4">
+            <label
+              for="email"
+              class="bg-white rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-600"
+            >
+              Email
+            </label>
+            <input
+              type="email"
+              id="email"
+              name="email"
+              class={`w-full bg-white rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 pt-6 pb-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+            />
+          </div>
+          <div class="relative mb-4">
+            <label
+              for="message"
+              class="bg-white rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-600"
+            >
+              Message
+            </label>
+            <textarea
+              id="message"
+              name="message"
+              class={`w-full bg-white rounded border border-gray-300 focus:border-${props.theme}-500 h-32 text-base outline-none text-gray-700 pt-6 pb-1 px-3 resize-none leading-8 transition-colors duration-200 ease-in-out`}
+            ></textarea>
+          </div>
           <button className={`text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
             Button
           </button>
diff --git a/src/blocks/contact/light/c.js b/src/blocks/contact/light/c.js
index 798b46e..05719b1 100644
--- a/src/blocks/contact/light/c.js
+++ b/src/blocks/contact/light/c.js
@@ -17,24 +17,51 @@ function LightContactC(props) {
         <div className="lg:w-1/2 md:w-2/3 mx-auto">
           <div className="flex flex-wrap -m-2">
             <div className="p-2 w-1/2">
-              <input
-                className={`w-full bg-gray-100 rounded border border-gray-400 focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2`}
-                placeholder="Name"
-                type="text"
-              ></input>
+              <div class="relative">
+                <label
+                  for="name"
+                  class="bg-gray-100 rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-600"
+                >
+                  Name
+                </label>
+                <input
+                  type="text"
+                  id="name"
+                  name="name"
+                  class={`w-full bg-gray-100 rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 pt-6 pb-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+                />
+              </div>
             </div>
             <div className="p-2 w-1/2">
-              <input
-                className={`w-full bg-gray-100 rounded border border-gray-400 focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2`}
-                placeholder="Email"
-                type="email"
-              ></input>
+              <div class="relative">
+                <label
+                  for="email"
+                  class="bg-gray-100 rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-600"
+                >
+                  Email
+                </label>
+                <input
+                  type="email"
+                  id="email"
+                  name="email"
+                  class={`w-full bg-gray-100 rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 pt-6 pb-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+                />
+              </div>
             </div>
             <div className="p-2 w-full">
-              <textarea
-                className={`w-full bg-gray-100 rounded border border-gray-400 focus:outline-none h-48 focus:border-${props.theme}-500 text-base px-4 py-2 resize-none block`}
-                placeholder="Message"
-              ></textarea>
+              <div class="relative">
+                <label
+                  for="message"
+                  class="bg-gray-100 rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-600"
+                >
+                  Message
+                </label>
+                <textarea
+                  id="message"
+                  name="message"
+                  class={`w-full bg-gray-100 rounded border border-gray-300 focus:border-${props.theme}-500 h-32 text-base outline-none text-gray-700 pt-6 pb-1 px-3 resize-none leading-8 transition-colors duration-200 ease-in-out`}
+                ></textarea>
+              </div>
             </div>
             <div className="p-2 w-full">
               <button className={`flex mx-auto text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
diff --git a/src/blocks/cta/dark/b.js b/src/blocks/cta/dark/b.js
index 134c583..04f4c7d 100644
--- a/src/blocks/cta/dark/b.js
+++ b/src/blocks/cta/dark/b.js
@@ -18,16 +18,34 @@ function DarkCTAB(props) {
           <h2 className="text-white text-lg font-medium title-font mb-5">
             Sign Up
           </h2>
-          <input
-            className={`bg-gray-900 rounded border text-white border-gray-900 focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2 mb-4`}
-            placeholder="Full Name"
-            type="text"
-          ></input>
-          <input
-            className={`bg-gray-900 rounded border text-white border-gray-900 focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2 mb-4`}
-            placeholder="Email"
-            type="email"
-          ></input>
+          <div class="relative mb-4">
+            <label
+              for="full-name"
+              class="bg-gray-800 rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-400"
+            >
+              Full Name
+            </label>
+            <input
+              type="text"
+              id="full-name"
+              name="full-name"
+              class={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 text-base outline-none text-gray-100 pt-6 pb-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+            />
+          </div>
+          <div class="relative mb-4">
+            <label
+              for="email"
+              class="bg-gray-800 rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-400"
+            >
+              Email
+            </label>
+            <input
+              type="email"
+              id="email"
+              name="email"
+              class={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 text-base outline-none text-gray-100 pt-6 pb-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+            />
+          </div>
           <button className={`text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
             Button
           </button>
diff --git a/src/blocks/cta/dark/c.js b/src/blocks/cta/dark/c.js
index bb13f74..5cc7762 100644
--- a/src/blocks/cta/dark/c.js
+++ b/src/blocks/cta/dark/c.js
@@ -15,17 +15,35 @@ function DarkCTAC(props) {
             haven&apos;t heard of them man bun deep.
           </p>
         </div>
-        <div className="flex lg:w-2/3 w-full sm:flex-row flex-col mx-auto px-8 sm:px-0">
-          <input
-            className={`flex-grow w-full bg-gray-800 rounded border border-gray-700 text-white focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2 mr-4 mb-4 sm:mb-0`}
-            placeholder="Full Name"
-            type="text"
-          ></input>
-          <input
-            className={`flex-grow w-full bg-gray-800 rounded border border-gray-700 text-white focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2 mr-4 mb-4 sm:mb-0`}
-            placeholder="Email"
-            type="email"
-          ></input>
+        <div className="flex lg:w-2/3 w-full sm:flex-row flex-col mx-auto px-8 sm:px-0 items-center">
+          <div class="relative sm:mr-4 mb-4 sm:mb-0 flex-grow w-full">
+            <label
+              for="full-name"
+              class="bg-gray-800 rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-400"
+            >
+              Full Name
+            </label>
+            <input
+              type="text"
+              id="full-name"
+              name="full-name"
+              class={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 text-base outline-none text-gray-100 pt-6 pb-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+            />
+          </div>
+          <div class="relative sm:mr-4 mb-4 sm:mb-0 flex-grow w-full">
+            <label
+              for="email"
+              class="bg-gray-800 rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-400"
+            >
+              Email
+            </label>
+            <input
+              type="email"
+              id="email"
+              name="email"
+              class={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 text-base outline-none text-gray-100 pt-6 pb-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+            />
+          </div>
           <button className={`text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
             Button
           </button>
diff --git a/src/blocks/cta/light/b.js b/src/blocks/cta/light/b.js
index a8cc87c..fc3b3a3 100644
--- a/src/blocks/cta/light/b.js
+++ b/src/blocks/cta/light/b.js
@@ -18,16 +18,34 @@ function LightCTAB(props) {
           <h2 className="text-gray-900 text-lg font-medium title-font mb-5">
             Sign Up
           </h2>
-          <input
-            className={`bg-white rounded border border-gray-400 focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2 mb-4`}
-            placeholder="Full Name"
-            type="text"
-          ></input>
-          <input
-            className={`bg-white rounded border border-gray-400 focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2 mb-4`}
-            placeholder="Email"
-            type="email"
-          ></input>
+          <div class="relative mb-4">
+            <label
+              for="full-name"
+              class="bg-white rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-600"
+            >
+              Full Name
+            </label>
+            <input
+              type="text"
+              id="full-name"
+              name="full-name"
+              class={`w-full bg-white rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 pt-6 pb-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+            />
+          </div>
+          <div class="relative mb-4">
+            <label
+              for="email"
+              class="bg-white rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-600"
+            >
+              Email
+            </label>
+            <input
+              type="email"
+              id="email"
+              name="email"
+              class={`w-full bg-white rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 pt-6 pb-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+            />
+          </div>
           <button className={`text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
             Button
           </button>
diff --git a/src/blocks/cta/light/c.js b/src/blocks/cta/light/c.js
index 1d4eeba..86eeef6 100644
--- a/src/blocks/cta/light/c.js
+++ b/src/blocks/cta/light/c.js
@@ -15,17 +15,35 @@ function LightCTAC(props) {
             haven&apos;t heard of them man bun deep.
           </p>
         </div>
-        <div className="flex lg:w-2/3 w-full sm:flex-row flex-col mx-auto px-8 sm:px-0">
-          <input
-            className={`flex-grow w-full bg-gray-100 rounded border border-gray-400 focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2 mr-4 mb-4 sm:mb-0`}
-            placeholder="Full Name"
-            type="text"
-          ></input>
-          <input
-            className={`flex-grow w-full bg-gray-100 rounded border border-gray-400 focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2 mr-4 mb-4 sm:mb-0`}
-            placeholder="Email"
-            type="email"
-          ></input>
+        <div className="flex lg:w-2/3 w-full sm:flex-row flex-col mx-auto px-8 sm:px-0 items-center">
+          <div class="relative sm:mr-4 mb-4 sm:mb-0 flex-grow w-full">
+            <label
+              for="full-name"
+              class="bg-gray-100 rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-600"
+            >
+              Full Name
+            </label>
+            <input
+              type="text"
+              id="full-name"
+              name="full-name"
+              class={`w-full bg-gray-100 rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 pt-6 pb-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+            />
+          </div>
+          <div class="relative sm:mr-4 mb-4 sm:mb-0 flex-grow w-full">
+            <label
+              for="email"
+              class="bg-gray-100 rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-600"
+            >
+              Email
+            </label>
+            <input
+              type="email"
+              id="email"
+              name="email"
+              class={`w-full bg-gray-100 rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 pt-6 pb-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+            />
+          </div>
           <button className={`text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
             Button
           </button>
diff --git a/src/blocks/footer/dark/c.js b/src/blocks/footer/dark/c.js
index 7df324e..afc94fd 100644
--- a/src/blocks/footer/dark/c.js
+++ b/src/blocks/footer/dark/c.js
@@ -124,12 +124,21 @@ function DarkFooterC(props) {
       </div>
       <div className="border-t border-gray-800">
         <div className="container px-5 py-8 flex flex-wrap mx-auto items-center">
-          <div className="flex md:flex-no-wrap flex-wrap justify-center md:justify-start">
-            <input
-              className={`sm:w-64 w-40 bg-gray-800 rounded sm:mr-4 mr-2 border border-gray-700 text-white focus:outline-none focus:border-${props.theme}-500 text-base py-2 px-4`}
-              placeholder="Placeholder"
-              type="text"
-            ></input>
+          <div className="flex md:flex-no-wrap flex-wrap justify-center items-center md:justify-start">
+            <div class="relative sm:w-64 w-40 sm:mr-4 mr-2">
+              <label
+                for="footer-field"
+                class="bg-gray-800 rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-400"
+              >
+                Placeholder
+              </label>
+              <input
+                type="text"
+                id="footer-field"
+                name="footer-field"
+                class={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 text-base outline-none text-gray-100 pt-6 pb-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+              />
+            </div>
             <button className={`inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded`}>
               Button
             </button>
diff --git a/src/blocks/footer/dark/e.js b/src/blocks/footer/dark/e.js
index 8331f83..6dcb725 100644
--- a/src/blocks/footer/dark/e.js
+++ b/src/blocks/footer/dark/e.js
@@ -67,12 +67,21 @@ function DarkFooterE(props) {
             <h2 className="title-font font-medium text-white tracking-widest text-sm mb-3">
               SUBSCRIBE
             </h2>
-            <div className="flex xl:flex-no-wrap md:flex-no-wrap lg:flex-wrap flex-wrap justify-center md:justify-start">
-              <input
-                className={`w-40 sm:w-auto bg-gray-800 rounded text-white xl:mr-4 lg:mr-0 sm:mr-4 mr-2 border border-gray-700 focus:outline-none focus:border-${props.theme}-500 text-base py-2 px-4`}
-                placeholder="Placeholder"
-                type="text"
-              ></input>
+            <div className="flex xl:flex-no-wrap md:flex-no-wrap lg:flex-wrap flex-wrap justify-center items-center md:justify-start">
+              <div class="relative w-40 sm:w-auto xl:mr-4 lg:mr-0 sm:mr-4 mr-2">
+                <label
+                  for="footer-field"
+                  class="bg-gray-800 rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-400"
+                >
+                  Placeholder
+                </label>
+                <input
+                  type="text"
+                  id="footer-field"
+                  name="footer-field"
+                  class={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 text-base outline-none text-gray-100 pt-6 pb-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+                />
+              </div>
               <button className={`lg:mt-2 xl:mt-0 flex-shrink-0 inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded`}>
                 Button
               </button>
diff --git a/src/blocks/footer/light/c.js b/src/blocks/footer/light/c.js
index 316bdf3..70a77fe 100644
--- a/src/blocks/footer/light/c.js
+++ b/src/blocks/footer/light/c.js
@@ -124,12 +124,21 @@ function LightFooterC(props) {
       </div>
       <div className="border-t border-gray-200">
         <div className="container px-5 py-8 flex flex-wrap mx-auto items-center">
-          <div className="flex md:flex-no-wrap flex-wrap justify-center md:justify-start">
-            <input
-              className={`sm:w-64 w-40 bg-gray-100 rounded sm:mr-4 mr-2 border border-gray-400 focus:outline-none focus:border-${props.theme}-500 text-base py-2 px-4`}
-              placeholder="Placeholder"
-              type="text"
-            />
+          <div className="flex md:flex-no-wrap flex-wrap justify-center items-center md:justify-start">
+            <div class="relative sm:w-64 w-40 sm:mr-4 mr-2">
+              <label
+                for="footer-field"
+                class="bg-gray-100 rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-600"
+              >
+                Placeholder
+              </label>
+              <input
+                type="text"
+                id="footer-field"
+                name="footer-field"
+                class={`w-full bg-gray-100 rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 pt-6 pb-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+              />
+            </div>
             <button className={`inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded`}>
               Button
             </button>
diff --git a/src/blocks/footer/light/e.js b/src/blocks/footer/light/e.js
index b28edcb..2c54384 100644
--- a/src/blocks/footer/light/e.js
+++ b/src/blocks/footer/light/e.js
@@ -67,12 +67,21 @@ function LightFooterE(props) {
             <h2 className="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">
               SUBSCRIBE
             </h2>
-            <div className="flex xl:flex-no-wrap md:flex-no-wrap lg:flex-wrap flex-wrap justify-center md:justify-start">
-              <input
-                className={`w-40 sm:w-auto bg-gray-100 rounded xl:mr-4 lg:mr-0 sm:mr-4 mr-2 border border-gray-400 focus:outline-none focus:border-${props.theme}-500 text-base py-2 px-4`}
-                placeholder="Placeholder"
-                type="text"
-              ></input>
+            <div className="flex xl:flex-no-wrap md:flex-no-wrap lg:flex-wrap flex-wrap justify-center items-center md:justify-start">
+              <div class="relative w-40 sm:w-auto xl:mr-4 lg:mr-0 sm:mr-4 mr-2">
+                <label
+                  for="footer-field"
+                  class="bg-gray-100 rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-600"
+                >
+                  Placeholder
+                </label>
+                <input
+                  type="text"
+                  id="footer-field"
+                  name="footer-field"
+                  class={`w-full bg-gray-100 rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 pt-6 pb-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+                />
+              </div>
               <button className={`lg:mt-2 xl:mt-0 flex-shrink-0 inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded`}>
                 Button
               </button>
diff --git a/src/blocks/hero/dark/d.js b/src/blocks/hero/dark/d.js
index 4184ab0..1f992a5 100644
--- a/src/blocks/hero/dark/d.js
+++ b/src/blocks/hero/dark/d.js
@@ -13,12 +13,21 @@ function DarkHeroD(props) {
             Chillwave portland ugh, knausgaard fam polaroid iPhone. Man braid
             swag typewriter affogato, hella selvage wolf narwhal dreamcatcher.
           </p>
-          <div className="flex w-full md:justify-start justify-center">
-            <input
-              className={`bg-gray-800 rounded mr-4 border border-gray-700 text-white focus:outline-none focus:border-${props.theme}-500 text-base px-4 md:w-full lg:w-full xl:w-1/2 w-2/4`}
-              placeholder="Placeholder"
-              type="text"
-            ></input>
+          <div className="flex w-full md:justify-start justify-center items-center">
+            <div class="relative mr-4 md:w-full lg:w-full xl:w-1/2 w-2/4">
+              <label
+                for="hero-field"
+                class="bg-gray-800 rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-400"
+              >
+                Placeholder
+              </label>
+              <input
+                type="text"
+                id="hero-field"
+                name="hero-field"
+                class={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 text-base outline-none text-gray-100 pt-6 pb-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+              />
+            </div>
             <button className={`inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
               Button
             </button>
diff --git a/src/blocks/hero/dark/e.js b/src/blocks/hero/dark/e.js
index 7c57c02..464de45 100644
--- a/src/blocks/hero/dark/e.js
+++ b/src/blocks/hero/dark/e.js
@@ -16,12 +16,21 @@ function DarkHeroE(props) {
             Chillwave portland ugh, knausgaard fam polaroid iPhone. Man braid
             swag typewriter affogato, hella selvage wolf narwhal dreamcatcher.
           </p>
-          <div className="flex w-full md:justify-start justify-center">
-            <input
-              className={`bg-gray-800 rounded mr-4 border border-gray-700 text-white focus:outline-none focus:border-${props.theme}-500 text-base px-4 md:w-full lg:w-full xl:w-1/2 w-2/4`}
-              placeholder="Placeholder"
-              type="text"
-            ></input>
+          <div className="flex w-full md:justify-start justify-center items-center">
+            <div class="relative mr-4 lg:w-full xl:w-1/2 w-2/4">
+              <label
+                for="hero-field"
+                class="bg-gray-800 rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-400"
+              >
+                Placeholder
+              </label>
+              <input
+                type="text"
+                id="hero-field"
+                name="hero-field"
+                class={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 text-base outline-none text-gray-100 pt-6 pb-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+              />
+            </div>
             <button className={`inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
               Button
             </button>
diff --git a/src/blocks/hero/dark/f.js b/src/blocks/hero/dark/f.js
index 7c9bd83..cc728c2 100644
--- a/src/blocks/hero/dark/f.js
+++ b/src/blocks/hero/dark/f.js
@@ -15,12 +15,21 @@ function DarkHeroF(props) {
             live-edge tumeric scenester copper mug flexitarian. Prism vice offal
             plaid everyday carry. Gluten-free chia VHS squid listicle artisan.
           </p>
-          <div className="flex w-full justify-center">
-            <input
-              className={`bg-gray-800 rounded mr-4 border border-gray-700 text-white focus:outline-none focus:border-${props.theme}-500 text-base px-4 md:w-full lg:w-full xl:w-1/2 w-2/4`}
-              placeholder="Placeholder"
-              type="text"
-            ></input>
+          <div className="flex w-full justify-center items-center">
+            <div class="relative mr-4 lg:w-full xl:w-1/2 w-2/4 md:w-full">
+              <label
+                for="hero-field"
+                class="bg-gray-800 rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-400"
+              >
+                Placeholder
+              </label>
+              <input
+                type="text"
+                id="hero-field"
+                name="hero-field"
+                class={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 text-base outline-none text-gray-100 pt-6 pb-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+              />
+            </div>
             <button className={`inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
               Button
             </button>
diff --git a/src/blocks/hero/light/d.js b/src/blocks/hero/light/d.js
index 5532e3e..373d508 100644
--- a/src/blocks/hero/light/d.js
+++ b/src/blocks/hero/light/d.js
@@ -14,11 +14,20 @@ function LightHeroD(props) {
             swag typewriter affogato, hella selvage wolf narwhal dreamcatcher.
           </p>
           <div className="flex w-full md:justify-start justify-center">
-            <input
-              className={`bg-gray-100 rounded mr-4 border border-gray-400 focus:outline-none focus:border-${props.theme}-500 text-base px-4 lg:w-full xl:w-1/2 w-2/4 md:w-full`}
-              placeholder="Placeholder"
-              type="text"
-            />
+            <div class="relative mr-4 md:w-full lg:w-full xl:w-1/2 w-2/4">
+              <label
+                for="hero-field"
+                class="bg-gray-100 rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-600"
+              >
+                Placeholder
+              </label>
+              <input
+                type="text"
+                id="hero-field"
+                name="hero-field"
+                class={`w-full bg-gray-100 rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 pt-6 pb-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+              />
+            </div>
             <button className={`inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
               Button
             </button>
diff --git a/src/blocks/hero/light/e.js b/src/blocks/hero/light/e.js
index 3a7cd09..133c2ca 100644
--- a/src/blocks/hero/light/e.js
+++ b/src/blocks/hero/light/e.js
@@ -16,12 +16,21 @@ function LightHeroE(props) {
             Chillwave portland ugh, knausgaard fam polaroid iPhone. Man braid
             swag typewriter affogato, hella selvage wolf narwhal dreamcatcher.
           </p>
-          <div className="flex w-full md:justify-start justify-center">
-            <input
-              className={`bg-gray-100 rounded mr-4 border border-gray-400 focus:outline-none focus:border-${props.theme}-500 text-base px-4 lg:w-full xl:w-1/2 w-2/4`}
-              placeholder="Placeholder"
-              type="text"
-            />
+          <div className="flex w-full md:justify-start justify-center items-center">
+            <div class="relative mr-4 lg:w-full xl:w-1/2 w-2/4">
+              <label
+                for="hero-field"
+                class="bg-gray-100 rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-600"
+              >
+                Placeholder
+              </label>
+              <input
+                type="text"
+                id="hero-field"
+                name="hero-field"
+                class={`w-full bg-gray-100 rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 pt-6 pb-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+              />
+            </div>
             <button className={`inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
               Button
             </button>
diff --git a/src/blocks/hero/light/f.js b/src/blocks/hero/light/f.js
index b55b916..6517c2f 100644
--- a/src/blocks/hero/light/f.js
+++ b/src/blocks/hero/light/f.js
@@ -15,12 +15,21 @@ function LightHeroF(props) {
             live-edge tumeric scenester copper mug flexitarian. Prism vice offal
             plaid everyday carry. Gluten-free chia VHS squid listicle artisan.
           </p>
-          <div className="flex w-full justify-center">
-            <input
-              className={`border-0 bg-gray-100 rounded mr-4 border border-gray-400 focus:outline-none focus:border-${props.theme}-500 text-base px-4 lg:w-full xl:w-1/2 w-2/4 md:w-full`}
-              placeholder="Placeholder"
-              type="text"
-            />
+          <div className="flex w-full justify-center items-center">
+            <div class="relative mr-4 lg:w-full xl:w-1/2 w-2/4 md:w-full">
+              <label
+                for="hero-field"
+                class="bg-gray-100 rounded leading-7 px-3 absolute ml-px mt-px left-0 top-0 text-sm text-gray-600"
+              >
+                Placeholder
+              </label>
+              <input
+                type="text"
+                id="hero-field"
+                name="hero-field"
+                class={`w-full bg-gray-100 rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 pt-6 pb-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+              />
+            </div>
             <button className={`inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
               Button
             </button>