addressed form labels feedback

src/blocks/contact/dark/a.js

@@ -25,10 +25,10 @@ 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">
+          <div className="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"
+              htmlFor="email"
+              className="leading-7 text-sm text-gray-400"
             >
               Email
             </label>
@@ -36,20 +36,20 @@ function DarkContactA(props) {
               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`}
+              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 class="relative mb-4">
+          <div className="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"
+              htmlFor="message"
+              className="leading-7 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`}
+              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`}>

src/blocks/contact/dark/b.js

@@ -49,10 +49,10 @@ 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">
+          <div className="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"
+              htmlFor="name"
+              className="leading-7 text-sm text-gray-400"
             >
               Name
             </label>
@@ -60,13 +60,13 @@ function DarkContactB(props) {
               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`}
+              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 class="relative mb-4">
+          <div className="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"
+              htmlFor="email"
+              className="leading-7 text-sm text-gray-400"
             >
               Email
             </label>
@@ -74,20 +74,20 @@ function DarkContactB(props) {
               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`}
+              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 class="relative mb-4">
+          <div className="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"
+              htmlFor="message"
+              className="leading-7 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`}
+              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`}>

src/blocks/contact/dark/c.js

@@ -17,10 +17,10 @@ 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">
+              <div className="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"
+                  htmlFor="name"
+                  className="leading-7 text-sm text-gray-400"
                 >
                   Name
                 </label>
@@ -28,15 +28,15 @@ function DarkContactC(props) {
                   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`}
+                  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">
-              <div class="relative">
+              <div className="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"
+                  htmlFor="email"
+                  className="leading-7 text-sm text-gray-400"
                 >
                   Email
                 </label>
@@ -44,22 +44,22 @@ function DarkContactC(props) {
                   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`}
+                  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">
-              <div class="relative">
+              <div className="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"
+                  htmlFor="message"
+                  className="leading-7 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`}
+                  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>

src/blocks/contact/light/a.js

@@ -25,31 +25,31 @@ 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">
+          <div className="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"
+              htmlFor="email"
+              className="leading-7text-sm text-gray-600"
             >
-              Email
+              Email Post-ironic portland shabby chic echo park, banjo fashion axe Post-ironic portland shabby chic echo park, banjo fashion axe
             </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`}
+              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 class="relative mb-4">
+          <div className="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"
+              htmlFor="message"
+              className="leading-7 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`}
+              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`}>

src/blocks/contact/light/b.js

@@ -49,10 +49,10 @@ 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">
+          <div className="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"
+              htmlFor="name"
+              className="leading-7 text-sm text-gray-600"
             >
               Name
             </label>
@@ -60,13 +60,13 @@ function LightContactB(props) {
               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`}
+              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 class="relative mb-4">
+          <div className="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"
+              htmlFor="email"
+              className="leading-7 text-sm text-gray-600"
             >
               Email
             </label>
@@ -74,20 +74,20 @@ function LightContactB(props) {
               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`}
+              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 class="relative mb-4">
+          <div className="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"
+              htmlFor="message"
+              className="leading-7 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`}
+              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`}>

src/blocks/contact/light/c.js

@@ -17,10 +17,10 @@ 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">
+              <div className="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"
+                  htmlFor="name"
+                  className="leading-7 text-sm text-gray-600"
                 >
                   Name
                 </label>
@@ -28,15 +28,15 @@ function LightContactC(props) {
                   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`}
+                  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">
-              <div class="relative">
+              <div className="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"
+                  htmlFor="email"
+                  className="leading-7 text-sm text-gray-600"
                 >
                   Email
                 </label>
@@ -44,22 +44,22 @@ function LightContactC(props) {
                   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`}
+                  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">
-              <div class="relative">
+              <div className="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"
+                  htmlFor="message"
+                  className="leading-7 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`}
+                  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>

src/blocks/cta/dark/b.js

@@ -18,10 +18,10 @@ function DarkCTAB(props) {
           <h2 className="text-white text-lg font-medium title-font mb-5">
             Sign Up
           </h2>
-          <div class="relative mb-4">
+          <div className="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"
+              htmlFor="full-name"
+              className="leading-7 text-sm text-gray-400"
             >
               Full Name
             </label>
@@ -29,13 +29,13 @@ function DarkCTAB(props) {
               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`}
+              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 class="relative mb-4">
+          <div className="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"
+              htmlFor="email"
+              className="leading-7 text-sm text-gray-400"
             >
               Email
             </label>
@@ -43,7 +43,7 @@ function DarkCTAB(props) {
               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`}
+              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`}>

src/blocks/cta/dark/c.js

@@ -15,11 +15,11 @@ 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 items-center">
-          <div class="relative sm:mr-4 mb-4 sm:mb-0 flex-grow w-full">
+        <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
-              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"
+              htmlFor="full-name"
+              className="leading-7 text-sm text-gray-400"
             >
               Full Name
             </label>
@@ -27,13 +27,13 @@ function DarkCTAC(props) {
               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`}
+              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 class="relative sm:mr-4 mb-4 sm:mb-0 flex-grow w-full">
+          <div className="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"
+              htmlFor="email"
+              className="leading-7 text-sm text-gray-400"
             >
               Email
             </label>
@@ -41,7 +41,7 @@ function DarkCTAC(props) {
               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`}
+              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`}>

src/blocks/cta/light/b.js

@@ -18,10 +18,10 @@ function LightCTAB(props) {
           <h2 className="text-gray-900 text-lg font-medium title-font mb-5">
             Sign Up
           </h2>
-          <div class="relative mb-4">
+          <div className="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"
+              htmlFor="full-name"
+              className="leading-7 text-sm text-gray-600"
             >
               Full Name
             </label>
@@ -29,13 +29,13 @@ function LightCTAB(props) {
               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`}
+              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 class="relative mb-4">
+          <div className="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"
+              htmlFor="email"
+              className="leading-7 text-sm text-gray-600"
             >
               Email
             </label>
@@ -43,7 +43,7 @@ function LightCTAB(props) {
               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`}
+              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`}>

src/blocks/cta/light/c.js

@@ -15,11 +15,11 @@ 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 items-center">
-          <div class="relative sm:mr-4 mb-4 sm:mb-0 flex-grow w-full">
+        <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
-              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"
+              htmlFor="full-name"
+              className="leading-7 text-sm text-gray-600"
             >
               Full Name
             </label>
@@ -27,13 +27,13 @@ function LightCTAC(props) {
               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`}
+              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 class="relative sm:mr-4 mb-4 sm:mb-0 flex-grow w-full">
+          <div className="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"
+              htmlFor="email"
+              className="leading-7 text-sm text-gray-600"
             >
               Email
             </label>
@@ -41,7 +41,7 @@ function LightCTAC(props) {
               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`}
+              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`}>

src/blocks/footer/dark/c.js

@@ -124,11 +124,11 @@ 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 items-center md:justify-start">
-            <div class="relative sm:w-64 w-40 sm:mr-4 mr-2">
+          <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
-                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"
+                htmlFor="footer-field"
+                className="leading-7 text-sm text-gray-400"
               >
                 Placeholder
               </label>
@@ -136,7 +136,7 @@ function DarkFooterC(props) {
                 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`}
+                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`}>

src/blocks/footer/dark/d.js

@@ -18,7 +18,7 @@ function DarkFooterD(props) {
           >
             <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
           </svg>
-          <span class="ml-3 text-xl">madde</span>
+          <span className="ml-3 text-xl">madde</span>
         </a>
         <p className="text-sm text-gray-600 sm:ml-4 sm:pl-4 sm:border-l-2 sm:border-gray-800 sm:py-2 sm:mt-0 mt-4">
           © 2020 madde —

src/blocks/footer/dark/e.js

@@ -67,11 +67,11 @@ 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 items-center md:justify-start">
-              <div class="relative w-40 sm:w-auto xl:mr-4 lg:mr-0 sm:mr-4 mr-2">
+            <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
-                  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"
+                  htmlFor="footer-field"
+                  className="leading-7 text-sm text-gray-400"
                 >
                   Placeholder
                 </label>
@@ -79,7 +79,7 @@ function DarkFooterE(props) {
                   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`}
+                  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`}>
@@ -108,7 +108,7 @@ function DarkFooterE(props) {
             >
               <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
             </svg>
-            <span class="ml-3 text-xl">madde</span>
+            <span className="ml-3 text-xl">madde</span>
           </a>
           <p className="text-sm text-gray-600 sm:ml-6 sm:mt-0 mt-4">
             © 2020 madde —

src/blocks/footer/light/c.js

@@ -124,11 +124,11 @@ 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 items-center md:justify-start">
-            <div class="relative sm:w-64 w-40 sm:mr-4 mr-2">
+          <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
-                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"
+                htmlFor="footer-field"
+                className="leading-7 text-sm text-gray-600"
               >
                 Placeholder
               </label>
@@ -136,7 +136,7 @@ function LightFooterC(props) {
                 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`}
+                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`}>

src/blocks/footer/light/d.js

@@ -18,7 +18,7 @@ function LightFooterD(props) {
           >
             <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
           </svg>
-          <span class="ml-3 text-xl">madde</span>
+          <span className="ml-3 text-xl">madde</span>
         </a>
         <p className="text-sm text-gray-500 sm:ml-4 sm:pl-4 sm:border-l-2 sm:border-gray-200 sm:py-2 sm:mt-0 mt-4">
           © 2020 madde —

src/blocks/footer/light/e.js

@@ -67,11 +67,11 @@ 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 items-center md:justify-start">
-              <div class="relative w-40 sm:w-auto xl:mr-4 lg:mr-0 sm:mr-4 mr-2">
+            <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
-                  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"
+                  htmlFor="footer-field"
+                  className="leading-7 text-sm text-gray-600"
                 >
                   Placeholder
                 </label>
@@ -79,7 +79,7 @@ function LightFooterE(props) {
                   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`}
+                  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`}>
@@ -108,7 +108,7 @@ function LightFooterE(props) {
             >
               <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
             </svg>
-            <span class="ml-3 text-xl">madde</span>
+            <span className="ml-3 text-xl">madde</span>
           </a>
           <p className="text-sm text-gray-500 sm:ml-6 sm:mt-0 mt-4">
             © 2020 madde —

src/blocks/header/dark/d.js

@@ -18,7 +18,7 @@ function DarkHeaderD(props) {
           >
             <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
           </svg>
-          <span class="ml-3 text-xl">madde</span>
+          <span className="ml-3 text-xl">madde</span>
         </a>
         <nav className="md:ml-auto md:mr-auto flex flex-wrap items-center text-base justify-center">
           <a href className="mr-5 hover:text-white">First Link</a>

src/blocks/header/light/a.js

@@ -18,7 +18,7 @@ function LightHeaderA(props) {
           >
             <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
           </svg>
-          <span class="ml-3 text-xl">madde</span>
+          <span className="ml-3 text-xl">madde</span>
         </a>
         <nav className="md:ml-auto flex flex-wrap items-center text-base justify-center">
           <a href className="mr-5 hover:text-gray-900">First Link</a>

src/blocks/header/light/b.js

@@ -18,7 +18,7 @@ function LightHeaderB(props) {
           >
             <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
           </svg>
-          <span class="ml-3 text-xl">madde</span>
+          <span className="ml-3 text-xl">madde</span>
         </a>
         <nav className="md:mr-auto md:ml-4 md:py-1 md:pl-4 md:border-l md:border-gray-400	flex flex-wrap items-center text-base justify-center">
           <a href className="mr-5 hover:text-gray-900">First Link</a>

src/blocks/header/light/c.js

@@ -24,7 +24,7 @@ function LightHeaderC(props) {
           >
             <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
           </svg>
-          <span class="ml-3 text-xl">madde</span>
+          <span className="ml-3 text-xl">madde</span>
         </a>
         <div className="lg:w-2/5 inline-flex lg:justify-end ml-5 lg:ml-0">
           <button className="inline-flex items-center bg-gray-200 border-0 py-1 px-3 focus:outline-none hover:bg-gray-300 rounded text-base mt-4 md:mt-0">

src/blocks/hero/dark/d.js

@@ -13,11 +13,11 @@ 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 items-center">
-            <div class="relative mr-4 md:w-full lg:w-full xl:w-1/2 w-2/4">
+          <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
-                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"
+                htmlFor="hero-field"
+                className="leading-7 text-sm text-gray-400"
               >
                 Placeholder
               </label>
@@ -25,7 +25,7 @@ function DarkHeroD(props) {
                 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`}
+                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`}>

src/blocks/hero/dark/e.js

@@ -16,11 +16,11 @@ 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 items-center">
-            <div class="relative mr-4 lg:w-full xl:w-1/2 w-2/4">
+          <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
-                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"
+                htmlFor="hero-field"
+                className="leading-7 text-sm text-gray-400"
               >
                 Placeholder
               </label>
@@ -28,7 +28,7 @@ function DarkHeroE(props) {
                 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`}
+                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`}>

src/blocks/hero/dark/f.js

@@ -15,11 +15,11 @@ 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 items-center">
-            <div class="relative mr-4 lg:w-full xl:w-1/2 w-2/4 md:w-full">
+          <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
-                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"
+                htmlFor="hero-field"
+                className="leading-7 text-sm text-gray-400"
               >
                 Placeholder
               </label>
@@ -27,7 +27,7 @@ function DarkHeroF(props) {
                 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`}
+                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`}>

src/blocks/hero/light/d.js

@@ -13,11 +13,11 @@ 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">
-            <div class="relative mr-4 md:w-full lg:w-full xl:w-1/2 w-2/4">
+          <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
-                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"
+                htmlFor="hero-field"
+                className="leading-7 text-sm text-gray-600"
               >
                 Placeholder
               </label>
@@ -25,7 +25,7 @@ function LightHeroD(props) {
                 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`}
+                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`}>

src/blocks/hero/light/e.js

@@ -16,11 +16,11 @@ 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 items-center">
-            <div class="relative mr-4 lg:w-full xl:w-1/2 w-2/4">
+          <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
-                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"
+                htmlFor="hero-field"
+                className="leading-7 text-sm text-gray-600"
               >
                 Placeholder
               </label>
@@ -28,7 +28,7 @@ function LightHeroE(props) {
                 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`}
+                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`}>

src/blocks/hero/light/f.js

@@ -15,19 +15,19 @@ 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 items-center">
-            <div class="relative mr-4 lg:w-full xl:w-1/2 w-2/4 md:w-full">
+          <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
-                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"
+                htmlFor="hero-field"
+                className="leading-7 text-sm text-gray-600"
               >
-                Placeholder
+                Placeholder 1
               </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`}
+                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`}>