added labels to all fields

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>
+          <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
-            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>
+              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
-            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"
+              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>

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>
+          <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
-            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>
+              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
-            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>
+              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
-            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"
+              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>

src/blocks/contact/dark/c.js

@@ -17,25 +17,52 @@ 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">
+              <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
-                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>
+                  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">
+              <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
-                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>
+                  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">
+              <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
-                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"
+                  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`}>
                 Button

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>
+          <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
-            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>
+              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
-            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"
+              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>

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>
+          <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
-            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>
+              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
-            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>
+              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
-            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"
+              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>

src/blocks/contact/light/c.js

@@ -17,25 +17,52 @@ 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">
+              <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
-                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>
+                  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">
+              <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
-                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>
+                  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">
+              <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
-                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"
+                  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`}>
                 Button

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>
+          <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
-            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>
+              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
-            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>
+              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>

src/blocks/cta/dark/c.js

@@ -15,17 +15,35 @@ function DarkCTAC(props) {
             haven'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">
+        <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
-            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>
+              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
-            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>
+              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>

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>
+          <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
-            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>
+              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
-            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>
+              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>

src/blocks/cta/light/c.js

@@ -15,17 +15,35 @@ function LightCTAC(props) {
             haven'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">
+        <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
-            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>
+              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
-            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>
+              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>

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">
+          <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
-              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>
+                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>

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">
+            <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
-                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>
+                  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>

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">
+          <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
-              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"
+                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>

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">
+            <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
-                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>
+                  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>

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">
+          <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
-              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>
+                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>

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">
+          <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
-              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>
+                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>

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">
+          <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
-              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>
+                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>

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">
+            <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
-              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"
+                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>

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">
+          <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
-              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"
+                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>

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">
+          <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
-              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"
+                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>