Merge pull request #24 from saini-g/form-labels

Added labels to all form 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>
-          <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 className="relative mb-4">
+            <label
+              htmlFor="email"
+              className="leading-7 text-sm text-gray-400"
+            >
+              Email
+            </label>
+            <input
+              type="email"
+              id="email"
+              name="email"
+              className={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+            />
+          </div>
+          <div className="relative mb-4">
+            <label
+              htmlFor="message"
+              className="leading-7 text-sm text-gray-400"
+            >
+              Message
+            </label>
+            <textarea
+              id="message"
+              name="message"
+              className={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 h-32 text-base outline-none text-gray-100 py-1 px-3 resize-none leading-6 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>
-          <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 className="relative mb-4">
+            <label
+              htmlFor="name"
+              className="leading-7 text-sm text-gray-400"
+            >
+              Name
+            </label>
+            <input
+              type="text"
+              id="name"
+              name="name"
+              className={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+            />
+          </div>
+          <div className="relative mb-4">
+            <label
+              htmlFor="email"
+              className="leading-7 text-sm text-gray-400"
+            >
+              Email
+            </label>
+            <input
+              type="email"
+              id="email"
+              name="email"
+              className={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+            />
+          </div>
+          <div className="relative mb-4">
+            <label
+              htmlFor="message"
+              className="leading-7 text-sm text-gray-400"
+            >
+              Message
+            </label>
+            <textarea
+              id="message"
+              name="message"
+              className={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 h-32 text-base outline-none text-gray-100 py-1 px-3 resize-none leading-6 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,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 className="relative">
+                <label
+                  htmlFor="name"
+                  className="leading-7 text-sm text-gray-400"
+                >
+                  Name
+                </label>
+                <input
+                  type="text"
+                  id="name"
+                  name="name"
+                  className={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 text-base outline-none text-gray-100 py-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 className="relative">
+                <label
+                  htmlFor="email"
+                  className="leading-7 text-sm text-gray-400"
+                >
+                  Email
+                </label>
+                <input
+                  type="email"
+                  id="email"
+                  name="email"
+                  className={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 text-base outline-none text-gray-100 py-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 className="relative">
+                <label
+                  htmlFor="message"
+                  className="leading-7 text-sm text-gray-400"
+                >
+                  Message
+                </label>
+                <textarea
+                  id="message"
+                  name="message"
+                  className={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 h-32 text-base outline-none text-gray-100 py-1 px-3 resize-none leading-6 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`}>

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 className="relative mb-4">
+            <label
+              htmlFor="email"
+              className="leading-7text-sm text-gray-600"
+            >
+              Email
+            </label>
+            <input
+              type="email"
+              id="email"
+              name="email"
+              className={`w-full bg-white rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+            />
+          </div>
+          <div className="relative mb-4">
+            <label
+              htmlFor="message"
+              className="leading-7 text-sm text-gray-600"
+            >
+              Message
+            </label>
+            <textarea
+              id="message"
+              name="message"
+              className={`w-full bg-white rounded border border-gray-300 focus:border-${props.theme}-500 h-32 text-base outline-none text-gray-700 py-1 px-3 resize-none leading-6 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>
-          <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 className="relative mb-4">
+            <label
+              htmlFor="name"
+              className="leading-7 text-sm text-gray-600"
+            >
+              Name
+            </label>
+            <input
+              type="text"
+              id="name"
+              name="name"
+              className={`w-full bg-white rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+            />
+          </div>
+          <div className="relative mb-4">
+            <label
+              htmlFor="email"
+              className="leading-7 text-sm text-gray-600"
+            >
+              Email
+            </label>
+            <input
+              type="email"
+              id="email"
+              name="email"
+              className={`w-full bg-white rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+            />
+          </div>
+          <div className="relative mb-4">
+            <label
+              htmlFor="message"
+              className="leading-7 text-sm text-gray-600"
+            >
+              Message
+            </label>
+            <textarea
+              id="message"
+              name="message"
+              className={`w-full bg-white rounded border border-gray-300 focus:border-${props.theme}-500 h-32 text-base outline-none text-gray-700 py-1 px-3 resize-none leading-6 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,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 className="relative">
+                <label
+                  htmlFor="name"
+                  className="leading-7 text-sm text-gray-600"
+                >
+                  Name
+                </label>
+                <input
+                  type="text"
+                  id="name"
+                  name="name"
+                  className={`w-full bg-gray-100 rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 py-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 className="relative">
+                <label
+                  htmlFor="email"
+                  className="leading-7 text-sm text-gray-600"
+                >
+                  Email
+                </label>
+                <input
+                  type="email"
+                  id="email"
+                  name="email"
+                  className={`w-full bg-gray-100 rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 py-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 className="relative">
+                <label
+                  htmlFor="message"
+                  className="leading-7 text-sm text-gray-600"
+                >
+                  Message
+                </label>
+                <textarea
+                  id="message"
+                  name="message"
+                  className={`w-full bg-gray-100 rounded border border-gray-300 focus:border-${props.theme}-500 h-32 text-base outline-none text-gray-700 py-1 px-3 resize-none leading-6 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`}>

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 className="relative mb-4">
+            <label
+              htmlFor="full-name"
+              className="leading-7 text-sm text-gray-400"
+            >
+              Full Name
+            </label>
+            <input
+              type="text"
+              id="full-name"
+              name="full-name"
+              className={`w-full bg-gray-700 rounded border border-gray-600 focus:border-${props.theme}-500 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+            />
+          </div>
+          <div className="relative mb-4">
+            <label
+              htmlFor="email"
+              className="leading-7 text-sm text-gray-400"
+            >
+              Email
+            </label>
+            <input
+              type="email"
+              id="email"
+              name="email"
+              className={`w-full bg-gray-700 rounded border border-gray-600 focus:border-${props.theme}-500 text-base outline-none text-gray-100 py-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">
-          <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-end">
+          <div className="relative sm:mr-4 mb-4 sm:mb-0 flex-grow w-full">
+            <label
+              htmlFor="full-name"
+              className="leading-7 text-sm text-gray-400"
+            >
+              Full Name
+            </label>
+            <input
+              type="text"
+              id="full-name"
+              name="full-name"
+              className={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+            />
+          </div>
+          <div className="relative sm:mr-4 mb-4 sm:mb-0 flex-grow w-full">
+            <label
+              htmlFor="email"
+              className="leading-7 text-sm text-gray-400"
+            >
+              Email
+            </label>
+            <input
+              type="email"
+              id="email"
+              name="email"
+              className={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 text-base outline-none text-gray-100 py-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>
-          <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 className="relative mb-4">
+            <label
+              htmlFor="full-name"
+              className="leading-7 text-sm text-gray-600"
+            >
+              Full Name
+            </label>
+            <input
+              type="text"
+              id="full-name"
+              name="full-name"
+              className={`w-full bg-white rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+            />
+          </div>
+          <div className="relative mb-4">
+            <label
+              htmlFor="email"
+              className="leading-7 text-sm text-gray-600"
+            >
+              Email
+            </label>
+            <input
+              type="email"
+              id="email"
+              name="email"
+              className={`w-full bg-white rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 py-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">
-          <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-end">
+          <div className="relative sm:mr-4 mb-4 sm:mb-0 flex-grow w-full">
+            <label
+              htmlFor="full-name"
+              className="leading-7 text-sm text-gray-600"
+            >
+              Full Name
+            </label>
+            <input
+              type="text"
+              id="full-name"
+              name="full-name"
+              className={`w-full bg-gray-100 rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+            />
+          </div>
+          <div className="relative sm:mr-4 mb-4 sm:mb-0 flex-grow w-full">
+            <label
+              htmlFor="email"
+              className="leading-7 text-sm text-gray-600"
+            >
+              Email
+            </label>
+            <input
+              type="email"
+              id="email"
+              name="email"
+              className={`w-full bg-gray-100 rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 py-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">
-            <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-end md:justify-start">
+            <div className="relative sm:w-64 w-40 sm:mr-4 mr-2">
+              <label
+                htmlFor="footer-field"
+                className="leading-7 text-sm text-gray-400"
+              >
+                Placeholder
+              </label>
+              <input
+                type="text"
+                id="footer-field"
+                name="footer-field"
+                className={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 text-base outline-none text-gray-100 py-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">
-              <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-end md:justify-start">
+              <div className="relative w-40 sm:w-auto xl:mr-4 lg:mr-0 sm:mr-4 mr-2">
+                <label
+                  htmlFor="footer-field"
+                  className="leading-7 text-sm text-gray-400"
+                >
+                  Placeholder
+                </label>
+                <input
+                  type="text"
+                  id="footer-field"
+                  name="footer-field"
+                  className={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 text-base outline-none text-gray-100 py-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">
-            <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-end md:justify-start">
+            <div className="relative sm:w-64 w-40 sm:mr-4 mr-2">
+              <label
+                htmlFor="footer-field"
+                className="leading-7 text-sm text-gray-600"
+              >
+                Placeholder
+              </label>
+              <input
+                type="text"
+                id="footer-field"
+                name="footer-field"
+                className={`w-full bg-gray-100 rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 py-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">
-              <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-end md:justify-start">
+              <div className="relative w-40 sm:w-auto xl:mr-4 lg:mr-0 sm:mr-4 mr-2">
+                <label
+                  htmlFor="footer-field"
+                  className="leading-7 text-sm text-gray-600"
+                >
+                  Placeholder
+                </label>
+                <input
+                  type="text"
+                  id="footer-field"
+                  name="footer-field"
+                  className={`w-full bg-gray-100 rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 py-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">
-            <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-end">
+            <div className="relative mr-4 md:w-full lg:w-full xl:w-1/2 w-2/4">
+              <label
+                htmlFor="hero-field"
+                className="leading-7 text-sm text-gray-400"
+              >
+                Placeholder
+              </label>
+              <input
+                type="text"
+                id="hero-field"
+                name="hero-field"
+                className={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 text-base outline-none text-gray-100 py-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">
-            <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-end">
+            <div className="relative mr-4 lg:w-full xl:w-1/2 w-2/4">
+              <label
+                htmlFor="hero-field"
+                className="leading-7 text-sm text-gray-400"
+              >
+                Placeholder
+              </label>
+              <input
+                type="text"
+                id="hero-field"
+                name="hero-field"
+                className={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 text-base outline-none text-gray-100 py-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">
-            <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-end">
+            <div className="relative mr-4 lg:w-full xl:w-1/2 w-2/4 md:w-full text-left">
+              <label
+                htmlFor="hero-field"
+                className="leading-7 text-sm text-gray-400"
+              >
+                Placeholder
+              </label>
+              <input
+                type="text"
+                id="hero-field"
+                name="hero-field"
+                className={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 text-base outline-none text-gray-100 py-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

@@ -13,12 +13,21 @@ function LightHeroD(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 md:w-full`}
-              placeholder="Placeholder"
-              type="text"
-            />
+          <div className="flex w-full md:justify-start justify-center items-end">
+            <div className="relative mr-4 md:w-full lg:w-full xl:w-1/2 w-2/4">
+              <label
+                htmlFor="hero-field"
+                className="leading-7 text-sm text-gray-600"
+              >
+                Placeholder
+              </label>
+              <input
+                type="text"
+                id="hero-field"
+                name="hero-field"
+                className={`w-full bg-gray-100 rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 py-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">
-            <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-end">
+            <div className="relative mr-4 lg:w-full xl:w-1/2 w-2/4">
+              <label
+                htmlFor="hero-field"
+                className="leading-7 text-sm text-gray-600"
+              >
+                Placeholder
+              </label>
+              <input
+                type="text"
+                id="hero-field"
+                name="hero-field"
+                className={`w-full bg-gray-100 rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 py-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">
-            <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-end">
+            <div className="relative mr-4 lg:w-full xl:w-1/2 w-2/4 md:w-full text-left">
+              <label
+                htmlFor="hero-field"
+                className="leading-7 text-sm text-gray-600"
+              >
+                Placeholder
+              </label>
+              <input
+                type="text"
+                id="hero-field"
+                name="hero-field"
+                className={`w-full bg-gray-100 rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 py-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>