Update forms syntax

Signed-off-by: praveenjuge <[email protected]>
praveenjuge · Oct 23, 2020 · 0130ac9 · 0130ac9
1 parent 613c1f8
commit 0130ac9
Show file tree

Hide file tree

Showing 16 changed files with 362 additions and 702 deletions.
diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml
diff --git a/docs/content/components/footers.html b/docs/content/components/footers.html
@@ -29,9 +29,9 @@
       <p class="text-xs my-4 text-gray-600">
         Bring together your discussions, memberships, and content. Integrate a thriving community wherever your audience is, all under your own brand.
       </p>
-      <label class="tag-label tag-label-sm w-24">
+      <label class="flex w-24">
         <span class="sr-only">Select a language</span>
-        <select class="tag-select tag-select-sm">
+        <select class="form-select form-select-sm">
           <option>English</option>
           <option>Tamil</option>
         </select>
@@ -63,12 +63,10 @@
     <div class="col-span-3">
       <p class="uppercase text-gray-600 text-xs tracking-wider font-medium mb-3">SUBSCRIBE TO OUR NEWSLETTER</p>
       <form action="#" class="mb-2">
-        <label class="tag-label tag-label-sm">
-          <div class="tag-append">
-            <input class="tag-input tag-input-sm" type="email" placeholder="Enter your email" />
-            <button class="btn btn-light-primary btn-sm" type="submit">Subscribe</button>
-          </div>
-        </label>
+        <div class="form-append">
+          <input class="form-input form-input-sm" type="email" placeholder="Enter your email" />
+          <button class="btn btn-light-primary btn-sm" type="submit">Subscribe</button>
+        </div>
       </form>
       <p class="text-xs text-gray-600">Get lessons and insights on how to grow your freelance business.</p>
     </div>

diff --git a/docs/content/components/headers.html b/docs/content/components/headers.html
diff --git a/docs/content/components/heroes.html b/docs/content/components/heroes.html
@@ -13,9 +13,9 @@ <h1 class="text-4xl md:text-5xl text-gray-900 leading-tight mb-3 font-bold md:fo
       We’re on a mission to bring transparency to finance. We charge as little as possible, and we always show you upfront. No hidden fees. No bad exchange rates. No surprises.
     </p>
     <form class="grid grid-cols-1 lg:grid-cols-6 gap-3 mb-8 pt-1 w-full md:w-7/12 mx-auto">
-      <label class="tag-label tag-label-lg col-auto lg:col-span-4">
+      <label class="col-auto lg:col-span-4">
         <span class="sr-only">Your Email</span>
-        <input class="tag-input tag-input-lg mt-0" type="email" placeholder="Enter your email..." required="true" />
+        <input class="form-input form-input-lg mt-0" type="email" placeholder="Enter your email..." required="true" />
       </label>
       <button class="btn btn-primary w-full btn-lg col-auto lg:col-span-2" type="submit">Get Started</button>
     </form>
@@ -81,11 +81,11 @@ <h1 class="text-4xl md:text-4xl lg:text-5xl text-blue-900 leading-tight font-bol
     <form class="w-full mb-6">
       <label class="sr-only">Your Email</label>
       <div class="block lg:hidden">
-        <input class="tag-input tag-input-lg text-blue-900" type="email" placeholder="Enter your email..." required="true" />
+        <input class="form-input form-input-lg text-blue-900" type="email" placeholder="Enter your email..." required="true" />
         <button class="btn btn-secondary btn-lg w-full mt-2" type="submit">Get Started</button>
       </div>
-      <div class="tag-append w-full hidden lg:flex">
-        <input class="tag-input tag-input-lg text-blue-900" type="email" placeholder="Enter your email..." required="true" />
+      <div class="form-append w-full hidden lg:flex">
+        <input class="form-input form-input-lg text-blue-900" type="email" placeholder="Enter your email..." required="true" />
         <button class="btn btn-secondary btn-lg" type="submit">Get Started</button>
       </div>
     </form>
@@ -160,17 +160,17 @@ <h1 class="text-4xl md:text-5xl leading-tight md:leading-none font-bold tracking
           <p class="pt-2">Start talking now</p>
         </div>
         <div class="card-body px-6 py-4 border-b border-gray-200 space-y-4">
-          <label class="tag-label">
+          <label class="flex">
             <span class="sr-only">First Name</span>
-            <input class="tag-input mt-0" type="text" placeholder="First Name" required="true" />
+            <input class="form-input mt-0" type="text" placeholder="First Name" required="true" />
           </label>
-          <label class="tag-label">
+          <label class="flex">
             <span class="sr-only">Email Address</span>
-            <input class="tag-input mt-0" type="email" placeholder="Email Address" required="true" />
+            <input class="form-input mt-0" type="email" placeholder="Email Address" required="true" />
           </label>
-          <label class="tag-label">
+          <label class="flex">
             <span class="sr-only">Password</span>
-            <input class="tag-input mt-0" type="password" placeholder="Password" required="true" />
+            <input class="form-input mt-0" type="password" placeholder="Password" required="true" />
           </label>
           <button class="btn btn-primary w-full py-2" type="submit">Sign up for free</button>
         </div>

diff --git a/docs/content/components/login.html b/docs/content/components/login.html
@@ -11,13 +11,13 @@
     <div class="bg-white shadow-xl rounded-none sm:rounded-lg w-full sm:w-10/12 md:w-8/12 lg:w-6/12 xl:w-4/12 mx-auto px-4 sm:px-6 pt-5 pb-6 mt-8 mb-6">
       <h1 class="text-lg text-left font-semibold mb-4 text-gray-900">Log in to your account</h1>
       <form class="space-y-4 mb-8">
-        <label class="tag-label">
-          <span class="text-xs text-gray-700 font-medium">Your Email</span>
-          <input class="tag-input" type="email" placeholder="Ex. [email protected]" inputmode="email" required />
+        <label class="block">
+          <span class="text-xs text-gray-700 font-medium block mb-1">Your Email</span>
+          <input class="form-input" type="email" placeholder="Ex. [email protected]" inputmode="email" required />
         </label>
-        <label class="tag-label">
-          <span class="text-xs text-gray-700 font-medium">Your Password</span>
-          <input class="tag-input" type="password" placeholder="••••••••" required />
+        <label class="block">
+          <span class="text-xs text-gray-700 font-medium block mb-1">Your Password</span>
+          <input class="form-input" type="password" placeholder="••••••••" required />
         </label>
         <input type="submit" class="btn btn-primary w-full py-2 mt-1" value="Login" />
       </form>
@@ -95,13 +95,13 @@ <h1 class="text-4xl text-center text-gray-900 font-semibold">Login</h1>
       </a>
     </div>
     <form class="space-y-4">
-      <label class="tag-label">
-        <span class="text-xs text-gray-700 font-medium">Your Email</span>
-        <input class="tag-input" type="email" placeholder="Ex. [email protected]" inputmode="email" required />
+      <label class="block">
+        <span class="text-xs text-gray-700 font-medium block mb-1">Your Email</span>
+        <input class="form-input" type="email" placeholder="Ex. [email protected]" inputmode="email" required />
       </label>
-      <label class="tag-label">
-        <span class="text-xs text-gray-700 font-medium">Your Password</span>
-        <input class="tag-input" type="password" placeholder="••••••••" required />
+      <label class="block">
+        <span class="text-xs text-gray-700 font-medium block mb-1">Your Password</span>
+        <input class="form-input" type="password" placeholder="••••••••" required />
       </label>
       <input type="submit" class="btn btn-primary w-full py-2" value="Continue with email" />
     </form>
@@ -139,18 +139,18 @@ <h1 class="text-4xl text-center text-gray-900 font-semibold">Login</h1>
     >
       <h1 class="text-xl text-left sm:text-center font-light mb-5 text-gray-800">Log in to your account</h1>
       <form class="space-y-4 pb-1">
-        <label class="tag-label">
-          <span class="text-xs text-gray-700 font-medium">Your Email</span>
-          <input class="tag-input" type="email" placeholder="Ex. [email protected]" inputmode="email" required />
+        <label class="block">
+          <span class="text-xs text-gray-700 font-medium block mb-1">Your Email</span>
+          <input class="form-input" type="email" placeholder="Ex. [email protected]" inputmode="email" required />
         </label>
-        <label class="tag-label">
-          <span class="text-xs text-gray-700 font-medium">Your Password</span>
-          <input class="tag-input" type="password" placeholder="••••••••" required />
+        <label class="block">
+          <span class="text-xs text-gray-700 font-medium block mb-1">Your Password</span>
+          <input class="form-input" type="password" placeholder="••••••••" required />
         </label>
         <div class="flex justify-between items-center">
-          <label class="tag-label cursor-pointer">
-            <input type="checkbox" class="tag-checkbox mt-0" />
-            <span class="ml-1 text-xs text-gray-700 font-medium">Remember me</span>
+          <label class="flex items-center">
+            <input type="checkbox" class="form-checkbox" />
+            <span class="ml-2 text-xs text-gray-700 cursor-pointer font-medium block">Remember me</span>
           </label>
           <input type="submit" class="btn btn-primary" value="Login" />
         </div>
@@ -188,18 +188,18 @@ <h1 class="text-xl text-left sm:text-center font-light mb-5 text-gray-800">Log i
     </a>
     <h1 class="text-xl text-left font-light mt-6 mb-4 text-gray-800">Log in to your account</h1>
     <form class="space-y-4 pb-1">
-      <label class="tag-label">
-        <span class="text-xs text-gray-700 font-medium">Your Email</span>
-        <input class="tag-input" type="email" placeholder="Ex. [email protected]" inputmode="email" required />
+      <label class="block">
+        <span class="text-xs text-gray-700 font-medium block mb-1">Your Email</span>
+        <input class="form-input" type="email" placeholder="Ex. [email protected]" inputmode="email" required />
       </label>
-      <label class="tag-label">
-        <span class="text-xs text-gray-700 font-medium">Your Password</span>
-        <input class="tag-input" type="password" placeholder="••••••••" required />
+      <label class="block">
+        <span class="text-xs text-gray-700 font-medium block mb-1">Your Password</span>
+        <input class="form-input" type="password" placeholder="••••••••" required />
       </label>
       <div class="flex justify-between items-center">
-        <label class="tag-label cursor-pointer">
-          <input type="checkbox" class="tag-checkbox mt-0" />
-          <span class="ml-1 text-xs text-gray-700 font-medium">Remember me</span>
+        <label class="flex items-center">
+          <input type="checkbox" class="form-checkbox" />
+          <span class="ml-2 text-xs text-gray-700 cursor-pointer font-medium block">Remember me</span>
         </label>
         <input type="submit" class="btn btn-primary" value="Login" />
       </div>
@@ -245,18 +245,18 @@ <h1 class="text-xl text-left font-light mt-6 mb-4 text-gray-800">Log in to your
     </a>
     <h1 class="text-xl text-left font-light mt-6 mb-4 text-gray-800">Log in to your account</h1>
     <form class="space-y-4 pb-1">
-      <label class="tag-label">
-        <span class="text-xs text-gray-700 font-medium">Your Email</span>
-        <input class="tag-input" type="email" placeholder="Ex. [email protected]" inputmode="email" required />
+      <label class="block">
+        <span class="text-xs text-gray-700 font-medium block mb-1">Your Email</span>
+        <input class="form-input" type="email" placeholder="Ex. [email protected]" inputmode="email" required />
       </label>
-      <label class="tag-label">
-        <span class="text-xs text-gray-700 font-medium">Your Password</span>
-        <input class="tag-input" type="password" placeholder="••••••••" required />
+      <label class="block">
+        <span class="text-xs text-gray-700 font-medium block mb-1">Your Password</span>
+        <input class="form-input" type="password" placeholder="••••••••" required />
       </label>
       <div class="flex justify-between items-center">
-        <label class="tag-label cursor-pointer">
-          <input type="checkbox" class="tag-checkbox mt-0" />
-          <span class="ml-1 text-xs text-gray-700 font-medium">Remember me</span>
+        <label class="flex items-center">
+          <input type="checkbox" class="form-checkbox" />
+          <span class="ml-2 text-xs text-gray-700 cursor-pointer font-medium block">Remember me</span>
         </label>
         <input type="submit" class="btn btn-primary" value="Login" />
       </div>

diff --git a/docs/content/components/register.html b/docs/content/components/register.html
@@ -40,13 +40,13 @@ <h1 class="text-2xl md:text-4xl text-left font-extrabold tracking-tight mb-4 tex
       </div>
     </div>
     <form class="space-y-4 mt-8">
-      <label class="tag-label">
-        <span class="text-xs text-gray-700 font-medium">Your Email</span>
-        <input class="tag-input" type="email" placeholder="Ex. [email protected]" inputmode="email" required />
+      <label class="block">
+        <span class="text-xs text-gray-700 font-medium mb-1 block">Your Email</span>
+        <input class="form-input" type="email" placeholder="Ex. [email protected]" inputmode="email" required />
       </label>
-      <label class="tag-label">
-        <span class="text-xs text-gray-700 font-medium">Your Password</span>
-        <input class="tag-input" type="password" placeholder="••••••••" required />
+      <label class="block">
+        <span class="text-xs text-gray-700 font-medium mb-1 block">Your Password</span>
+        <input class="form-input" type="password" placeholder="••••••••" required />
       </label>
       <input type="submit" class="btn btn-primary w-full btn-lg" value="Register" />
     </form>
@@ -155,17 +155,17 @@ <h2 class="text-xl font-medium text-purple-700">Free account</h2>
     <h1 class="text-xl md:text-3xl font-medium text-gray-800 text-center mb-1">Create your Free Account</h1>
     <p class="text-sm md:text-base font-normal text-gray-700 text-center mb-2">Already have an account? <a href="#" class="text-purple-700 hover:text-purple-900">Sign in</a></p>
     <form class="space-y-4 mt-8">
-      <label class="tag-label">
-        <span class="text-xs text-gray-700 font-medium">Name</span>
-        <input class="tag-input" type="text" placeholder="Your full name" required />
+      <label class="block">
+        <span class="text-xs text-gray-700 font-medium mb-1 block">Name</span>
+        <input class="form-input" type="text" placeholder="Your full name" required />
       </label>
-      <label class="tag-label">
-        <span class="text-xs text-gray-700 font-medium">Your Email</span>
-        <input class="tag-input" type="email" placeholder="Ex. [email protected]" inputmode="email" required />
+      <label class="block">
+        <span class="text-xs text-gray-700 font-medium mb-1 block">Your Email</span>
+        <input class="form-input" type="email" placeholder="Ex. [email protected]" inputmode="email" required />
       </label>
-      <label class="tag-label">
-        <span class="text-xs text-gray-700 font-medium">Create a password</span>
-        <input class="tag-input" type="password" placeholder="••••••••" required />
+      <label class="block">
+        <span class="text-xs text-gray-700 font-medium mb-1 block">Create a password</span>
+        <input class="form-input" type="password" placeholder="••••••••" required />
       </label>
       <input type="submit" class="btn btn-primary w-full btn-lg" value="Sign Up" />
     </form>
@@ -210,17 +210,17 @@ <h1 class="text-4xl text-center text-gray-900 font-semibold">Sign up</h1>
       </a>
     </div>
     <form class="space-y-4">
-      <label class="tag-label">
-        <span class="text-xs text-gray-700 font-medium">Name</span>
-        <input class="tag-input" type="text" placeholder="Your full name" required />
+      <label class="block">
+        <span class="text-xs text-gray-700 font-medium mb-1 block">Name</span>
+        <input class="form-input" type="text" placeholder="Your full name" required />
       </label>
-      <label class="tag-label">
-        <span class="text-xs text-gray-700 font-medium">Your Email</span>
-        <input class="tag-input" type="email" placeholder="Ex. [email protected]" inputmode="email" required />
+      <label class="block">
+        <span class="text-xs text-gray-700 font-medium mb-1 block">Your Email</span>
+        <input class="form-input" type="email" placeholder="Ex. [email protected]" inputmode="email" required />
       </label>
-      <label class="tag-label">
-        <span class="text-xs text-gray-700 font-medium">Create a password</span>
-        <input class="tag-input" type="password" placeholder="••••••••" required />
+      <label class="block">
+        <span class="text-xs text-gray-700 font-medium mb-1 block">Create a password</span>
+        <input class="form-input" type="password" placeholder="••••••••" required />
       </label>
       <input type="submit" class="btn btn-primary w-full btn-lg" value="Sign Up" />
     </form>
@@ -260,22 +260,22 @@ <h1 class="text-4xl text-center text-gray-900 font-semibold">Sign up</h1>
     >
       <h1 class="text-xl text-left sm:text-center font-light mb-5 text-gray-800">Sign up to our product today for free</h1>
       <form class="space-y-4 pb-1">
-        <label class="tag-label">
-          <span class="text-xs text-gray-700 font-medium">Name</span>
-          <input class="tag-input" type="text" placeholder="Your full name" required />
+        <label class="block">
+          <span class="text-xs text-gray-700 font-medium mb-1 block">Name</span>
+          <input class="form-input" type="text" placeholder="Your full name" required />
         </label>
-        <label class="tag-label">
-          <span class="text-xs text-gray-700 font-medium">Your Email</span>
-          <input class="tag-input" type="email" placeholder="Ex. [email protected]" inputmode="email" required />
+        <label class="block">
+          <span class="text-xs text-gray-700 font-medium mb-1 block">Your Email</span>
+          <input class="form-input" type="email" placeholder="Ex. [email protected]" inputmode="email" required />
         </label>
-        <label class="tag-label">
-          <span class="text-xs text-gray-700 font-medium">Create a password</span>
-          <input class="tag-input" type="password" placeholder="••••••••" required />
+        <label class="block">
+          <span class="text-xs text-gray-700 font-medium mb-1 block">Create a password</span>
+          <input class="form-input" type="password" placeholder="••••••••" required />
         </label>
         <div class="flex justify-between items-start sm:items-center flex-col sm:flex-row">
-          <label class="tag-label cursor-pointer">
-            <input type="checkbox" class="tag-checkbox mt-0" />
-            <span class="ml-1 text-xs text-gray-700 font-medium">Agree to Terms and Conditions</span>
+          <label class="flex items-center">
+            <input type="checkbox" class="form-checkbox" />
+            <span class="ml-2 cursor-pointer text-xs text-gray-700 font-medium mb-1 block">Agree to Privacy Policy</span>
           </label>
           <input type="submit" class="btn btn-primary w-full sm:w-auto mt-5 sm:mt-0" value="Sign up" />
         </div>