From 0130ac9972e53fb13c6e6a29f8d2fec22611ebd7 Mon Sep 17 00:00:00 2001
From: praveenjuge <praveen@skcript.com>
Date: Fri, 23 Oct 2020 23:30:09 +0530
Subject: [PATCH] Update forms syntax

Signed-off-by: praveenjuge <praveen@skcript.com>
---
 .github/workflows/npm-publish.yml       |  26 --
 docs/content/components/footers.html    |  14 +-
 docs/content/components/headers.html    | 293 +++--------------------
 docs/content/components/heroes.html     |  22 +-
 docs/content/components/login.html      |  78 +++---
 docs/content/components/register.html   |  72 +++---
 docs/content/components/statistics.html |   4 +-
 docs/content/docs/avatar.md             |   2 +-
 docs/content/docs/file.md               |   8 +-
 docs/content/docs/forms.md              | 301 ++++++++++--------------
 docs/layouts/shortcodes/iframe.html     |   8 +-
 package.json                            |   6 +-
 src/avatar.js                           |   3 -
 src/dropdown.js                         |   2 +-
 src/forms.js                            | 223 +++++++-----------
 src/js/components/dropdown.js           |   2 +-
 16 files changed, 362 insertions(+), 702 deletions(-)
 delete mode 100644 .github/workflows/npm-publish.yml

diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml
deleted file mode 100644
index a6a6165..0000000
--- a/.github/workflows/npm-publish.yml
+++ /dev/null
@@ -1,26 +0,0 @@
-name: npm-publish
-on:
-  push:
-    branches:
-      - master
-jobs:
-  npm-publish:
-    name: npm-publish
-    runs-on: ubuntu-latest
-    steps:
-    - name: Checkout repository
-      uses: actions/checkout@master
-    - name: Set up Node.js
-      uses: actions/setup-node@master
-      with:
-        node-version: 10.0.0
-    - name: Publish if version has been updated
-      uses: pascalgn/npm-publish-action@06e0830ea83eea10ed4a62654eeaedafb8bf50fc
-      with: # All of theses inputs are optional
-        tag_name: "v%s"
-        tag_message: "v%s"
-        commit_pattern: "^Release (\\S+)"
-        workspace: "."
-      env:
-        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # Leave this as is, it's automatically generated
-        NPM_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }} # You need to set this in your repo settings
diff --git a/docs/content/components/footers.html b/docs/content/components/footers.html
index 4c8ea73..97e5e4f 100644
--- 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
index f146fcc..ce21acd 100644
--- a/docs/content/components/headers.html
+++ b/docs/content/components/headers.html
@@ -370,59 +370,20 @@
             <span class="sr-only">Close Menu</span>
           </button>
           <a class="btn btn-icon w-full btn-link" href="#">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              aria-hidden="true"
-              class="mr-2"
-            >
-              <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
-              <polyline points="9 22 9 12 15 12 15 22"></polyline>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="mr-2">
+              <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
             </svg>
             Dashboard
           </a>
           <a class="btn btn-icon w-full btn-primary" href="#">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              aria-hidden="true"
-              class="mr-2"
-            >
-              <polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline>
-              <path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="mr-2">
+              <path fill-rule="evenodd" d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm0 2h10v7h-2l-1 2H8l-1-2H5V5z" clip-rule="evenodd" />
             </svg>
             Inbox
           </a>
           <a class="btn btn-icon w-full btn-link" href="#">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              aria-hidden="true"
-              class="mr-2"
-            >
-              <rect x="2" y="7" width="20" height="15" rx="2" ry="2"></rect>
-              <polyline points="17 2 12 7 7 2"></polyline>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="mr-2">
+              <path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z" />
             </svg>
             Videos
           </a>
@@ -447,103 +408,36 @@
       </a>
       <div class="hidden md:inline-flex space-x-1">
         <a class="btn btn-sm btn-icon btn-link" href="#">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            aria-hidden="true"
-            class="mr-2"
-          >
-            <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
-            <polyline points="9 22 9 12 15 12 15 22"></polyline>
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="mr-2">
+            <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
           </svg>
           Dashboard
         </a>
         <a class="btn btn-sm btn-icon btn-primary" href="#">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            aria-hidden="true"
-            class="mr-2"
-          >
-            <polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline>
-            <path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path>
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="mr-2">
+            <path fill-rule="evenodd" d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm0 2h10v7h-2l-1 2H8l-1-2H5V5z" clip-rule="evenodd" />
           </svg>
           Inbox
         </a>
         <a class="btn btn-sm btn-icon btn-link" href="#">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            aria-hidden="true"
-            class="mr-2"
-          >
-            <rect x="2" y="7" width="20" height="15" rx="2" ry="2"></rect>
-            <polyline points="17 2 12 7 7 2"></polyline>
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="mr-2">
+            <path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z" />
           </svg>
           Videos
         </a>
       </div>
     </div>
     <div class="flex items-center space-x-3">
-      <label class="tag-label hidden lg:block">
-        <span class="sr-only">Search</span>
-        <div class="tag-icon">
-          <svg
-            class="w-2 h-2"
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <circle cx="11" cy="11" r="8"></circle>
-            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
-          </svg>
-          <input class="tag-input mt-0 text-sm" placeholder="Search..." />
-        </div>
-      </label>
+      <div class="form-icon">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+        </svg>
+        <input class="form-input mt-0 text-sm" placeholder="Search..." />
+      </div>
 
       <a href="#" class="text-gray-800 rounded hover:text-primary p-3">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          aria-hidden="true"
-          class="h-4 w-4"
-        >
-          <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
-          <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-gray-600">
+          <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
         </svg>
         <span class="sr-only">Notifications</span>
       </a>
@@ -557,62 +451,20 @@
         <div class="dropdown-list" id="color-menu" x-spread="dropdown" x-cloak>
           <p class="dropdown-header">Praveen Juge</p>
           <a href="#" class="dropdown-item">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              aria-hidden="true"
-              class="mr-2"
-            >
-              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
-              <circle cx="12" cy="7" r="4"></circle>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="mr-2">
+              <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" />
             </svg>
             Profile
           </a>
           <a href="#" class="dropdown-item">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              aria-hidden="true"
-              class="mr-2"
-            >
-              <circle cx="12" cy="12" r="3"></circle>
-              <path
-                d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
-              ></path>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="mr-2">
+              <path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" />
             </svg>
             Settings
           </a>
           <a href="#" class="dropdown-item">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              aria-hidden="true"
-              class="mr-2"
-            >
-              <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
-              <polyline points="16 17 21 12 16 7"></polyline>
-              <line x1="21" y1="12" x2="9" y2="12"></line>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="mr-2">
+              <path fill-rule="evenodd" d="M3 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm10.293 9.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L14.586 9H7a1 1 0 100 2h7.586l-1.293 1.293z" clip-rule="evenodd" />
             </svg>
             Log out
           </a>
@@ -751,21 +603,8 @@ <h1 class="text-sm font-medium text-gray-500">Settings</h1>
     </div>
     <div class="flex items-center space-x-3">
       <a href="#" class="text-gray-800 rounded hover:text-primary p-3">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          aria-hidden="true"
-          class="h-4 w-4"
-        >
-          <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
-          <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-gray-600">
+          <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
         </svg>
         <span class="sr-only">Notifications</span>
       </a>
@@ -779,62 +618,20 @@ <h1 class="text-sm font-medium text-gray-500">Settings</h1>
         <div class="dropdown-list" id="color-menu" x-spread="dropdown" x-cloak>
           <p class="dropdown-header">Praveen Juge</p>
           <a href="#" class="dropdown-item">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              aria-hidden="true"
-              class="mr-2"
-            >
-              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
-              <circle cx="12" cy="7" r="4"></circle>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="mr-2">
+              <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" />
             </svg>
             Profile
           </a>
           <a href="#" class="dropdown-item">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              aria-hidden="true"
-              class="mr-2"
-            >
-              <circle cx="12" cy="12" r="3"></circle>
-              <path
-                d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
-              ></path>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="mr-2">
+              <path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" />
             </svg>
             Settings
           </a>
           <a href="#" class="dropdown-item">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              aria-hidden="true"
-              class="mr-2"
-            >
-              <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
-              <polyline points="16 17 21 12 16 7"></polyline>
-              <line x1="21" y1="12" x2="9" y2="12"></line>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="mr-2">
+              <path fill-rule="evenodd" d="M3 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm10.293 9.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L14.586 9H7a1 1 0 100 2h7.586l-1.293 1.293z" clip-rule="evenodd" />
             </svg>
             Log out
           </a>
@@ -850,25 +647,13 @@ <h1 class="text-sm font-medium text-gray-500">Settings</h1>
   <a class="tab-link py-4 m-0" href="#">Usage</a>
   <a class="tab-link py-4 m-0" href="#">Billing</a>
   <a class="tab-link py-4 m-0 disabled" href="#" tabindex="-1" aria-disabled="true">Advanced</a>
-  <label class="tag-label hidden lg:block ml-auto">
+  <label class="form-label hidden lg:block ml-auto">
     <span class="sr-only">Search</span>
-    <div class="tag-icon">
-      <svg
-        class="w-2 h-2"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <circle cx="11" cy="11" r="8"></circle>
-        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+    <div class="form-icon">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
       </svg>
-      <input class="tag-input mt-0 text-sm" placeholder="Search..." />
+      <input class="form-input mt-0 text-sm" placeholder="Search..." />
     </div>
   </label>
 </nav>
diff --git a/docs/content/components/heroes.html b/docs/content/components/heroes.html
index f707cd9..43f8361 100644
--- 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
index 785afd2..85386e0 100644
--- 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. james@bond.com" 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. james@bond.com" 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. james@bond.com" 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. james@bond.com" 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. james@bond.com" 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. james@bond.com" 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. james@bond.com" 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. james@bond.com" 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. james@bond.com" 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. james@bond.com" 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
index fc15855..3cc541f 100644
--- 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. james@bond.com" 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. james@bond.com" 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. james@bond.com" 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. james@bond.com" 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. james@bond.com" 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. james@bond.com" 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. james@bond.com" 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. james@bond.com" 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>
diff --git a/docs/content/components/statistics.html b/docs/content/components/statistics.html
index 65d3383..1240e65 100644
--- a/docs/content/components/statistics.html
+++ b/docs/content/components/statistics.html
@@ -177,9 +177,9 @@ <h5 class="font-bold text-sm text-gray-900">12,340</h5>
 <section class="container mx-auto py-12 px-4">
   <div class="flex justify-between items-center mb-4 flex-wrap space-y-1">
     <h2 class="text-gray-900 text-xl font-semibold">Analytics Overview</h2>
-    <label class="tag-label">
+    <label>
       <span class="sr-only">Select date range</span>
-      <select class="tag-select tag-select-sm">
+      <select class="form-select form-select-sm">
         <option>Last 7 days</option>
         <option>Blue</option>
       </select>
diff --git a/docs/content/docs/avatar.md b/docs/content/docs/avatar.md
index 1a211c5..f0c900c 100644
--- a/docs/content/docs/avatar.md
+++ b/docs/content/docs/avatar.md
@@ -47,7 +47,7 @@ title: Avatar
 
 {{< code html >}}
 
-<div class="avatar-stacked -space-x-5">
+<div class="flex -space-x-5">
   <div class="avatar"><img src="/placeholder.jpg" alt="Photo of Praveen Juge"></div>
   <div class="avatar"><img src="/placeholder.jpg" alt="Photo of Praveen Juge"></div>
   <div class="avatar"><span class="avatar-initial">PJ</span></div>
diff --git a/docs/content/docs/file.md b/docs/content/docs/file.md
index 2910c85..4864933 100644
--- a/docs/content/docs/file.md
+++ b/docs/content/docs/file.md
@@ -5,7 +5,7 @@ title: File
 ## Basic
 
 {{< code html >}}
-<label class="tag-input cursor-pointer" for="basicfile">
+<label class="form-input cursor-pointer" for="basicfile">
   <input type="file" class="sr-only" id="basicfile">
   <span>Choose file...</span>
 </label>
@@ -14,7 +14,7 @@ title: File
 ## Single File
 
 {{< code html >}}
-<label class="tag-input cursor-pointer" for="singlefile" x-data="{ files: null }">
+<label class="form-input cursor-pointer" for="singlefile" x-data="{ files: null }">
   <input type="file" class="sr-only" id="singlefile" x-on:change="files = Object.values($event.target.files)">
   <span class="block w-full truncate" x-text="files ? files.map(file => file.name).join(', ') : 'Choose single file...'">Choose single file...</span>
 </label>
@@ -23,7 +23,7 @@ title: File
 ## Multiple Files
 
 {{< code html >}}
-<label class="tag-input cursor-pointer" for="multiplefile" x-data="{ files: null }">
+<label class="form-input cursor-pointer" for="multiplefile" x-data="{ files: null }">
   <input type="file" class="sr-only" id="multiplefile" multiple="true" x-on:change="files = Object.values($event.target.files)">
   <span class="block w-full truncate" x-text="files ? files.map(file => file.name).join(', ') : 'Choose multiple files...'">Choose multiple files...</span>
 </label>
@@ -34,7 +34,7 @@ title: File
 {{< code html >}}
 
 <form action="#" x-data="{ files: null }">
-  <label class="tag-input cursor-pointer" for="withreset">
+  <label class="form-input cursor-pointer" for="withreset">
     <input type="file" class="sr-only" id="withreset" x-on:change="files = Object.values($event.target.files)">
     <span class="block w-full truncate" x-text="files ? files.map(file => file.name).join(', ') : 'Choose file...'">Choose file...</span>
   </label>
diff --git a/docs/content/docs/forms.md b/docs/content/docs/forms.md
index 3d4f40a..27ac064 100644
--- a/docs/content/docs/forms.md
+++ b/docs/content/docs/forms.md
@@ -5,33 +5,27 @@ title: Forms
 ## Input Tag
 
 {{< code html >}}
-
-<label class="tag-label">
-  <span>Your Name</span>
-  <input class="tag-input" placeholder="Praveen Juge">
-</label>
+<label class="block text-sm mb-1" for="name">Your Name</label>
+<input class="form-input" placeholder="Praveen Juge" id="name">
 {{< /code >}}
 
 ## Select Tag
 
 {{< code html >}}
-
-<label class="tag-label">
-  <span>Select a color</span>
-  <select class="tag-select">
-    <option>Red</option>
-    <option>Blue</option>
-  </select>
-</label>
+<label class="block text-sm mb-1" for="color">Select a color</label>
+<select class="form-select" id="color">
+  <option>Red</option>
+  <option>Blue</option>
+</select>
 {{< /code >}}
 
 ## Checkbox
 
 {{< code html >}}
 
-<label class="tag-label">
-  <input type="checkbox" class="tag-checkbox">
-  <span class="ml-1">Click me</span>
+<label class="flex items-center">
+  <input type="checkbox" class="form-checkbox">
+  <span class="ml-2 cursor-pointer">Click me</span>
 </label>
 {{< /code >}}
 
@@ -39,47 +33,39 @@ title: Forms
 
 {{< code html >}}
 
-<label class="tag-label">
-  <input type="radio" class="tag-radio" name="radio" value="1">
-  <span class="ml-1">Click me</span>
+<label class="flex items-center">
+  <input type="radio" class="form-radio" name="radio" value="1">
+  <span class="ml-2 cursor-pointer">Click me</span>
 </label>
 {{< /code >}}
 
 ## Textarea
 
 {{< code html >}}
-
-<label class="tag-label">
-  <span>Textarea</span>
-  <textarea class="tag-input" rows="3" placeholder="Use this to write your next great novel"></textarea>
-</label>
+<label class="block text-sm mb-1" for="story">Tell us your story:</label>
+<textarea class="form-input" id="story" placeholder="Use this to write your next great novel" rows="3"></textarea>
 {{< /code >}}
 
 ## Select Multiple
 
 {{< code html >}}
 
-<label class="tag-label">
-  <span>Select multiple color</span>
-  <select class="tag-select tag-multiple" multiple>
-    <option>Red</option>
-    <option>Blue</option>
-    <option>Green</option>
-    <option>Yellow</option>
-    <option>Cyan</option>
-  </select>
-</label>
+<label class="block text-sm mb-1" for="multiple">Select multiple color</label>
+<select class="form-select" id="multiple" multiple>
+  <option>Red</option>
+  <option>Blue</option>
+  <option>Green</option>
+  <option>Yellow</option>
+  <option>Cyan</option>
+</select>
 {{< /code >}}
 
 ## Range
 
 {{< code html >}}
 
-<label class="tag-label">
-  <span>Get in my range</span>
-  <input type="range" class="tag-range">
-</label>
-
+<label class="block text-sm mb-1" for="myrange">Get in my range</label>
+<input type="range" class="form-input" id="myrange">
 {{< /code >}}
 
 ## Sizing
@@ -88,32 +74,22 @@ title: Forms
 
 {{< code html >}}
 
-<div class="space-y-3">
-  <label class="tag-label tag-label-sm">
-    <span>Your Name</span>
-    <input class="tag-input tag-input-sm" placeholder="Praveen Juge">
-  </label>
-  <label class="tag-label tag-label-lg">
-    <span>Your Name</span>
-    <input class="tag-input tag-input-lg" placeholder="Praveen Juge">
-  </label>
-</div>
+<label class="block text-xs mb-1" for="name1">Your Name</label>
+<input class="form-input form-input-sm" placeholder="Praveen Juge" id="name1">
+
+<label class="block text-lg mb-1 mt-3" for="name2">Your Name</label>
+<input class="form-input form-input-lg" placeholder="Praveen Juge" id="name2">
 {{< /code >}}
 
 ### Select Sizes
 
 {{< code html >}}
 
-<div class="space-y-3">
-  <label class="tag-label tag-label-sm">
-    <span>Select a color</span>
-    <select class="tag-select tag-select-sm"><option>Red</option></select>
-  </label>
-  <label class="tag-label tag-label-lg">
-    <span>Select a color</span>
-    <select class="tag-select tag-select-lg"><option>Red</option></select>
-  </label>
-</div>
+<label class="block text-xs mb-1" for="color1">Select a color</label>
+<select class="form-select form-select-sm" id="color1"><option>Red</option></select>
+
+<label class="block text-lg mb-1 mt-3" for="color2">Select a color</label>
+<select class="form-select form-select-lg" id="color2"><option>Red</option></select>
 {{< /code >}}
 
 ## Icons
@@ -121,20 +97,18 @@ title: Forms
 {{< code html >}}
 
 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-  <label class="tag-label">
-    <span>Search</span>
-    <div class="tag-icon">
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-      <input class="tag-input" placeholder="Search for posts...">
-    </div>
-  </label>
-  <label class="tag-label">
-    <span>Search</span>
-    <div class="tag-icon tag-icon-r">
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-      <input class="tag-input" placeholder="Search for posts...">
-    </div>
-  </label>
+  <div class="form-icon">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+    </svg>
+    <input class="form-input" placeholder="Search for posts...">
+  </div>
+  <div class="form-icon form-icon-r">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+    </svg>
+    <input class="form-input" placeholder="Search for posts...">
+  </div>
 </div>
 {{< /code >}}
 
@@ -143,18 +117,14 @@ title: Forms
 {{< code html >}}
 
 <div class="space-y-3">
-  <label class="tag-label">
-    <div class="tag-append">
-      <input class="tag-input" placeholder="Praveen Juge">
-      <button class="btn btn-dark">Save</button>
-    </div>
-  </label>
-  <label class="tag-label">
-    <div class="tag-append">
-      <input class="tag-input" placeholder="Praveen Juge">
-      <span class="tag-text">@email.com</span>
-    </div>
-  </label>
+  <div class="form-append">
+    <input class="form-input" placeholder="Praveen Juge">
+    <button class="btn btn-dark">Save</button>
+  </div>
+  <div class="form-append">
+    <input class="form-input" placeholder="Praveen Juge">
+    <span class="bg-gray-200 rounded-r px-3 flex items-center">@email.com</span>
+  </div>
 </div>
 
 {{< /code >}}
@@ -163,112 +133,91 @@ title: Forms
 
 {{< code html >}}
 
-<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
-  <label class="tag-label tag-success">
-    <span>Your Name</span>
-    <input class="tag-input" value="Praveen Juge">
-    <span class="tag-validation">That's your name alright!</span>
-  </label>
-  <label class="tag-label tag-success">
-    <span>Select a color</span>
-    <select class="tag-select"><option>Red</option></select>
-    <span class="tag-validation">Yup, that's a color!</span>
-  </label>
-  <label class="tag-label tag-danger">
-    <span>Your Name</span>
-    <input class="tag-input" value="Praveen Juge">
-    <span class="tag-validation">Are you sure about this?</span>
-  </label>
-  <label class="tag-label tag-danger">
-    <span>Select a color</span>
-    <select class="tag-select"><option>Red</option></select>
-    <span class="tag-validation">Are you sure about this?</span>
-  </label>
-  <label class="tag-label tag-success">
-    <input type="checkbox" class="tag-checkbox">
-    <span class="ml-1">Click me</span>
-    <span class="tag-validation">You clicked!</span>
-  </label>
-  <label class="tag-label tag-success">
-    <input type="radio" class="tag-radio" name="radio" value="1">
-    <span class="ml-1">Click me</span>
-    <span class="tag-validation">You clicked!</span>
-  </label>
-  <label class="tag-label tag-danger">
-    <input type="checkbox" class="tag-checkbox">
-    <span class="ml-1">Click me</span>
-    <span class="tag-validation">Click please</span>
-  </label>
-  <label class="tag-label tag-danger">
-    <input type="radio" class="tag-radio" name="radio" value="1">
-    <span class="ml-1">Click me</span>
-    <span class="tag-validation">Click please</span>
-  </label>
-</div>
+<label class="block text-sm mb-1" for="namesuccess">Your Name</label>
+<input class="form-input bg-green-100" value="Praveen Juge" id="namesuccess">
+<span class="text-green-700 text-sm mt-1">That's your name alright!</span>
+
+<label class="block text-sm mb-1 mt-4" for="namefail">Your Name</label>
+<input class="form-input bg-red-100" value="Praveen Juge" id="namefail">
+<span class="text-red-700 text-sm mt-1">Are you sure about this?</span>
+
+<label class="block text-sm mb-1 mt-4" for="colorsuccess">Select a color</label>
+<select class="form-select bg-green-100" id="colorsuccess"><option>Red</option></select>
+<span class="text-green-700 text-sm mt-1">Yup, that's a color!</span>
+
+<label class="block text-sm mb-1 mt-4" for="colordanger">Select a color</label>
+<select class="form-select bg-red-100" id="colordanger"><option>Red</option></select>
+<span class="text-red-700 text-sm mt-1">Are you sure about this?</span>
+
+<hr />
+
+<label class="flex items-center mt-4">
+  <input type="checkbox" class="form-checkbox bg-green-100">
+  <span class="ml-2 cursor-pointer">Click me</span>
+</label>
+<span class="text-green-700 block text-sm mt-1">You clicked!</span>
+
+<label class="flex items-center mt-4">
+  <input type="checkbox" class="form-checkbox bg-red-100">
+  <span class="ml-2 cursor-pointer">Click me</span>
+</label>
+<span class="text-red-700 block text-sm mt-1">Click please</span>
+
+<label class="flex items-center mt-4">
+  <input type="radio" class="form-radio bg-green-100" name="radio" value="1">
+  <span class="ml-2 cursor-pointer">Click me</span>
+</label>
+<span class="text-green-700 block text-sm mt-1">You clicked!</span>
+
+<label class="flex items-center mt-4">
+  <input type="radio" class="form-radio bg-red-100" name="radio" value="1">
+  <span class="ml-2 cursor-pointer">Click me</span>
+</label>
+<span class="text-red-700 block text-sm mt-1">Click please</span>
+
 {{< /code >}}
 
 ## Disabled
 
 {{< code html >}}
 
-<div class="space-y-3">
-  <label class="tag-label">
-    <span>Your Name</span>
-    <input class="tag-input" placeholder="Praveen Juge" disabled>
-  </label>
-  <label class="tag-label">
-    <span>Select a color</span>
-    <select class="tag-select" disabled>
-      <option>Red</option>
-      <option>Blue</option>
-    </select>
-  </label>
-  <label class="tag-label">
-    <input type="checkbox" class="tag-checkbox" disabled>
-    <span class="ml-1">Click me</span>
-  </label>
-  <label class="tag-label">
-    <input type="radio" class="tag-radio" name="radio" value="1" disabled>
-    <span class="ml-1">Click me</span>
-  </label>
-  <label class="tag-label">
-    <span>Get in my range</span>
-    <input type="range" class="tag-range" disabled>
-  </label>
-  <button type="submit" class="btn btn-primary" disabled>Submit</button>
-</div>
+<label class="block text-sm mb-1" for="name3">Your Name</label>
+<input class="form-input" placeholder="Praveen Juge" id="name3" disabled>
+
+<label class="block text-sm mb-1" for="color3">Select a color</label>
+<select class="form-select" id="color3" disabled><option>Red</option></select>
+
+<label class="flex items-center">
+  <input type="checkbox" class="form-checkbox" disabled>
+  <span class="ml-2 cursor-pointer">Click me</span>
+</label>
+
+<label class="flex items-center">
+  <input type="radio" class="form-radio" name="radio" value="1" disabled>
+  <span class="ml-2 cursor-pointer">Click me</span>
+</label>
 {{< /code >}}
 
 ## Readonly
 
 {{< code html >}}
-
-<label class="tag-label">
-  <span>Your Name</span>
-  <input class="tag-input" value="Praveen Juge" readonly>
-</label>
+<label class="block text-sm mb-1" for="name4">Your Name</label>
+<input class="form-input" placeholder="Praveen Juge" readonly id="name4">
 {{< /code >}}
 
 ## Example: Login Form
 
 {{< code html >}}
 
-<div class="bg-gray-100">
-  <form class="w-full md:w-5/12 mx-auto space-y-4 px-5 py-10">
-    <label class="tag-label">
-      <span>Your Email</span>
-      <input class="tag-input" type="email" placeholder="Ex. james@bond.com" required />
-    </label>
-    <label class="tag-label">
-      <span>Your Password</span>
-      <input class="tag-input" type="password" placeholder="••••••••" required />
-    </label>
-    <label class="tag-label">
-      <input type="checkbox" class="tag-checkbox" />
-      <span class="ml-1">Remember me</span>
-    </label>
-    <input type="submit" class="btn btn-primary" value="Login" />
-  </form>
-</div>
-
+<form class="w-full md:w-4/12 mx-auto py-10">
+  <label class="block text-sm mb-1" for="emailinput">Your Email</label>
+  <input class="form-input" type="email" placeholder="Ex. james@bond.com" id="emailinput" required />
+  <label class="block text-sm mb-1 mt-4" for="passwordinput">Your Password</label>
+  <input class="form-input" type="password" placeholder="••••••••" id="passwordinput" required />
+  <label class="flex items-center mt-4">
+    <input type="checkbox" class="form-checkbox" />
+    <span class="ml-2 cursor-pointer text-sm">Remember me</span>
+  </label>
+  <input type="submit" class="btn btn-primary w-full mt-4" value="Login" />
+</form>
 {{< /code >}}
diff --git a/docs/layouts/shortcodes/iframe.html b/docs/layouts/shortcodes/iframe.html
index a1f2d83..9d88428 100644
--- a/docs/layouts/shortcodes/iframe.html
+++ b/docs/layouts/shortcodes/iframe.html
@@ -21,21 +21,21 @@
 
   <label class="bg-gray-200 w-full hidden lg:block" x-show="tab === 'design'">
     <span class="sr-only">Update Component Width</span>
-    <input x-model="width" type="range" class="tag-range border-0 rounded-0 p-0 m-0 z-50 cursor-move" value="100" step="0.01" min="23" min="100" />
+    <input x-model="width" type="range" class="form-input thumb border-0 rounded-0 p-0 m-0 z-50 cursor-move" value="100" step="0.01" min="23" min="100" style="min-height: 8px;" />
     <style>
-      .tag-range::-webkit-slider-thumb {
+      .thumb::-webkit-slider-thumb {
         margin-top: -2px;
         height: 0.65rem;
         border-radius: 0px;
         width: 50px;
       }
-      .tag-range::-moz-range-thumb {
+      .thumb::-moz-range-thumb {
         margin-top: -2px;
         height: 0.65rem;
         border-radius: 0px;
         width: 50px;
       }
-      .tag-range::-ms-thumb {
+      .thumb::-ms-thumb {
         margin-top: -2px;
         height: 0.65rem;
         border-radius: 0px;
diff --git a/package.json b/package.json
index c315142..b50e582 100644
--- a/package.json
+++ b/package.json
@@ -35,10 +35,10 @@
   "devDependencies": {
     "concurrently": "^5.3.0",
     "cross-env": "^7.0.2",
-    "nodemon": "^2.0.5",
-    "rollup": "^2.32.0",
+    "nodemon": "^2.0.6",
+    "rollup": "^2.32.1",
     "rollup-plugin-terser": "^7.0.2",
-    "tailwindcss": "^1.9.4"
+    "tailwindcss": "^1.9.5"
   },
   "dependencies": {
     "@tailwindcss/typography": "^0.2.0"
diff --git a/src/avatar.js b/src/avatar.js
index 6852ecb..c07c70b 100644
--- a/src/avatar.js
+++ b/src/avatar.js
@@ -46,9 +46,6 @@ module.exports = Avatar = () => ({
   ".avatar-busy::after": {
     "@apply bg-red-500": {},
   },
-  ".avatar-stacked": {
-    "@apply flex": {},
-  },
   ".avatar-xs": {
     "@apply h-6 w-6 !important": {},
     maxWidth: "1.5rem !important",
diff --git a/src/dropdown.js b/src/dropdown.js
index 42db975..75916c0 100644
--- a/src/dropdown.js
+++ b/src/dropdown.js
@@ -1,6 +1,6 @@
 module.exports = Dropdown = () => ({
   ".dropdown-list": {
-    "@apply absolute z-10 shadow-md w-48 flex flex-col pl-0 mb-0 border border-solid border-gray-200 bg-white p-2 rounded transition ease-out duration-100 origin-top-left": {},
+    "@apply absolute z-10 shadow-md w-48 flex flex-col pl-0 mb-0 border border-solid border-gray-200 bg-white p-2 rounded transition ease-out duration-100 origin-top": {},
   },
   ".dropdown-item": {
     "@apply relative flex px-2 py-1 items-center text-gray-800 font-medium text-sm rounded whitespace-no-wrap no-underline w-full": {},
diff --git a/src/forms.js b/src/forms.js
index e44cfb6..060f088 100644
--- a/src/forms.js
+++ b/src/forms.js
@@ -1,213 +1,170 @@
 module.exports = Forms = () => ({
-  ".tag-label": {
-    "@apply block": {},
+  ".form-input": {
+    "@apply block w-full appearance-none bg-white border border-solid border-gray-300 rounded px-3 py-2 text-sm leading-normal transition-colors duration-150 ease-in shadow-none text-gray-900": {},
+    minHeight: '39px'
   },
-  ".tag-input": {
-    "@apply mt-1 block w-full appearance-none bg-white border border-solid border-gray-300 rounded px-3 py-2 text-sm leading-normal transition-colors duration-150 ease-in shadow-none text-gray-900": {},
-  },
-  ".tag-icon": {
-    "@apply relative": {},
-  },
-  ".tag-label .tag-icon svg": {
-    "@apply h-full absolute inset-y-0 w-8 left-0 pl-3 pointer-events-none text-gray-400": {},
+  // Input Tag Hover and Focus
+  ".form-input:hover, .form-select:hover, .form-checkbox:hover, .form-radio:hover": {
+    "@apply border-gray-600": {},
   },
-  ".tag-label .tag-icon-r svg": {
-    "@apply left-auto right-0 pr-3 pl-0": {},
+  ".form-input:focus, .form-select:focus, .form-checkbox:focus, .form-radio:focus": {
+    "@apply outline-none border-primary": {},
   },
-  ".tag-icon .tag-input, .tag-icon .tag-input-sm, .tag-icon .tag-input-lg": {
-    "@apply pl-10": {},
+  // Input Tag Placeholder Color
+  ".form-input::-webkit-input-placeholder": {
+    "@apply text-gray-500": {},
   },
-  ".tag-icon-r .tag-input, .tag-icon-r .tag-input-sm, .tag-icon-r .tag-input-lg": {
-    "@apply pr-10": {},
+  ".form-input::-moz-placeholder": {
+    "@apply text-gray-500": {},
   },
-  ".tag-icon-r .tag-input": {
-    "@apply pl-3": {},
+  ".form-input:-ms-input-placeholder": {
+    "@apply text-gray-500": {},
   },
-  ".tag-icon-r .tag-input-sm": {
-    "@apply pl-2": {},
+  ".form-input::-ms-input-placeholder": {
+    "@apply text-gray-500": {},
   },
-  ".tag-icon-r .tag-input-lg": {
-    "@apply pl-4": {},
+  ".form-input::placeholder": {
+    "@apply text-gray-500": {},
   },
-  ".tag-input-sm": {
+  // Sizes
+  ".form-input-sm": {
     "@apply px-2 py-1 text-xs": {},
+    minHeight: '28px'
   },
-  ".tag-input-lg": {
+  ".form-input-lg": {
     "@apply px-4 py-3 text-xl": {},
+    minHeight: '56px'
   },
-  ".tag-select-sm": {
+  ".form-select-sm": {
     "@apply pl-2 pr-8 py-1 text-xs !important": {},
+    minHeight: '28px'
   },
-  ".tag-select-lg": {
+  ".form-select-lg": {
     "@apply pl-4 pr-10 py-3 text-xl !important": {},
+    minHeight: '56px'
   },
-  ".tag-label-sm": {
-    "@apply text-xs": {},
-  },
-  ".tag-label-lg": {
-    "@apply text-xl": {},
-  },
-  ".tag-input:hover, .tag-select:hover, .tag-checkbox:hover, .tag-radio:hover, .tag-range:hover": {
-    "@apply border-gray-600": {},
-  },
-  ".tag-input:focus, .tag-select:focus, .tag-checkbox:focus, .tag-radio:focus, .tag-range:focus": {
-    "@apply outline-none border-primary": {},
-  },
-  ".tag-input::-webkit-input-placeholder": {
-    "@apply text-gray-500": {},
-  },
-  ".tag-input::-moz-placeholder": {
-    "@apply text-gray-500": {},
-  },
-  ".tag-input:-ms-input-placeholder": {
-    "@apply text-gray-500": {},
-  },
-  ".tag-input::-ms-input-placeholder": {
-    "@apply text-gray-500": {},
-  },
-  ".tag-input::placeholder": {
-    "@apply text-gray-500": {},
-  },
-  ".tag-select": {
-    "@apply mt-1 block w-full appearance-none bg-white border border-solid border-gray-300 rounded pl-3 pr-10 py-2 text-sm leading-normal transition-colors duration-150 ease-in shadow-none text-gray-900 bg-no-repeat cursor-pointer": {},
-    backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a0aec0'%3e%3cpath d='M15.3 9.3a1 1 0 0 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.4l3.3 3.29 3.3-3.3z'/%3e%3c/svg%3e")`,
+  // Select, Checkbox, Radio
+  ".form-select": {
+    "@apply block w-full appearance-none bg-white border border-solid border-gray-300 rounded pl-3 pr-10 py-2 text-sm leading-normal transition-colors duration-150 ease-in shadow-none text-gray-900 bg-no-repeat cursor-pointer": {},
     "-webkit-print-color-adjust": "exact",
     "color-adjust": "exact",
+    backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a0aec0'%3e%3cpath d='M15.3 9.3a1 1 0 0 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.4l3.3 3.29 3.3-3.3z'/%3e%3c/svg%3e")`,
     backgroundPosition: "right 0.5rem center",
     backgroundSize: "1.5em 1.5em",
   },
-  ".tag-multiple": {
+  ".form-checkbox, .form-radio": {
+    "@apply bg-white text-primary border border-solid border-gray-300 appearance-none inline-flex align-middle select-none flex-shrink-0 h-4 w-4 rounded transition-colors duration-150 ease-in cursor-pointer": {},
+    "-webkit-print-color-adjust": "exact",
+    "color-adjust": "exact",
+    backgroundOrigin: "border-box",
+  },
+  ".form-radio": {
+    "@apply rounded-full !important": {},
+  },
+  ".form-select[multiple]": {
     "@apply h-auto pr-3 bg-auto": {},
     backgroundImage: "none",
   },
-  ".tag-select::-ms-expand": {
+  ".form-select::-ms-expand": {
     "@apply border-none text-gray-500": {},
   },
   "@media not print": {
-    ".tag-select::-ms-expand": {
+    ".form-select::-ms-expand": {
       "@apply hidden": {},
     },
   },
   "@media print and (-ms-high-contrast: active), print and (-ms-high-contrast: none)": {
-    ".tag-select": {
+    ".form-select": {
       "@apply pr-3": {},
     },
   },
-  ".tag-checkbox, .tag-radio": {
-    "@apply bg-white text-primary border border-solid border-gray-300 appearance-none inline-block align-middle select-none flex-shrink-0 h-5 w-5 rounded transition-colors duration-150 ease-in  cursor-pointer -mt-1": {},
-    "-webkit-print-color-adjust": "exact",
-    "color-adjust": "exact",
-    backgroundOrigin: "border-box",
-  },
-  ".tag-radio": {
-    "@apply rounded-full !important": {},
-  },
   "@media not print": {
-    ".tag-checkbox::-ms-check, .tag-radio::-ms-check": {
+    ".form-checkbox::-ms-check, .form-radio::-ms-check": {
       "@apply border text-transparent": {},
       background: "inherit",
       borderColor: "inherit",
       borderRadius: "inherit",
     },
   },
-  ".tag-checkbox:checked, .tag-radio:checked, .tag-success .tag-checkbox:checked, .tag-success .tag-radio:checked, .tag-danger .tag-checkbox:checked, .tag-danger .tag-radio:checked": {
+  ".form-checkbox:checked, .form-radio:checked": {
     "@apply border-transparent bg-current bg-center bg-no-repeat": {},
     backgroundSize: "100% 100%",
   },
-  ".tag-checkbox:checked": {
+  ".form-checkbox:checked": {
     backgroundImage: `url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e")`,
   },
-  ".tag-radio:checked": {
+  ".form-radio:checked": {
     backgroundImage: `url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e")`,
   },
-  ".tag-range": {
-    "@apply mt-1 block w-full appearance-none bg-white border border-solid border-gray-300 rounded px-3 py-3 text-sm leading-normal transition-colors duration-150 ease-in shadow-none text-gray-900": {},
-  },
-  ".tag-range::-webkit-slider-runnable-track": {
+  // Range
+  ".form-input::-webkit-slider-runnable-track": {
     "@apply w-full h-2 text-transparent cursor-pointer bg-gray-200 border-transparent rounded": {},
   },
-  ".tag-range::-moz-range-track": {
+  ".form-input::-moz-range-track": {
     "@apply w-full h-2 text-transparent cursor-pointer bg-gray-200 border-transparent rounded": {},
   },
-  ".tag-range::-ms-track": {
+  ".form-input::-ms-track": {
     "@apply w-full h-2 text-transparent cursor-pointer bg-gray-200 border-transparent rounded": {},
   },
-  ".tag-range::-webkit-slider-thumb": {
-    "@apply appearance-none transition-colors duration-150 ease-in rounded border-none bg-primary -mt-2 h-6 w-4": {},
-  },
-  ".tag-range::-moz-range-thumb": {
-    "@apply appearance-none transition-colors duration-150 ease-in rounded border-none bg-primary -mt-2 h-6 w-4": {},
-  },
-  ".tag-range::-ms-thumb": {
-    "@apply appearance-none transition-colors duration-150 ease-in rounded border-none bg-primary -mt-2 h-6 w-4": {},
-  },
-  ".tag-range::-webkit-slider-thumb:active": {
-    "@apply bg-primary-dark": {},
+  ".form-input::-webkit-slider-thumb": {
+    "@apply appearance-none rounded border-none bg-primary -mt-2 h-6 w-4": {},
   },
-  ".tag-range::-moz-range-thumb:active": {
-    "@apply bg-primary-dark": {},
+  ".form-input::-moz-range-thumb": {
+    "@apply appearance-none rounded border-none bg-primary -mt-2 h-6 w-4": {},
   },
-  ".tag-range::-ms-thumb:active": {
-    "@apply bg-primary-dark": {},
+  ".form-input::-ms-thumb": {
+    "@apply appearance-none rounded border-none bg-primary -mt-2 h-6 w-4": {},
   },
-  ".tag-range:disabled::-webkit-slider-thumb": {
-    "@apply bg-primary-light cursor-not-allowed": {},
-  },
-  ".tag-range:disabled::-moz-range-thumb": {
-    "@apply bg-primary-light cursor-not-allowed": {},
-  },
-  ".tag-range:disabled::-ms-thumb": {
-    "@apply bg-primary-light cursor-not-allowed": {},
-  },
-  ".tag-range:disabled::-webkit-slider-runnable-track": {
-    "@apply cursor-not-allowed": {},
-  },
-  ".tag-range:disabled::-moz-range-track": {
-    "@apply cursor-not-allowed": {},
-  },
-  ".tag-range::-moz-focus-outer": {
+  ".form-input::-moz-focus-outer": {
     "@apply border-0": {},
   },
-  ".tag-range::-ms-fill-lower": {
+  ".form-input::-ms-fill-lower": {
     "@apply rounded bg-gray-200": {},
   },
-  ".tag-range::-ms-fill-upper": {
+  ".form-input::-ms-fill-upper": {
     "@apply rounded bg-gray-200 mr-3": {},
   },
   // Disabled
-  ".tag-input:disabled, .tag-select:disabled, .tag-checkbox:disabled, .tag-radio:disabled, .tag-range:disabled": {
+  ".form-input:disabled, .form-select:disabled, .form-checkbox:disabled, .form-radio:disabled, .form-input:disabled": {
     "@apply bg-gray-400 border-gray-400 cursor-not-allowed opacity-100": {},
   },
   // Readonly
-  ".tag-input[readonly]": {
+  ".form-input[readonly]": {
     "@apply bg-gray-300 border-gray-300 cursor-default opacity-100": {},
   },
-  // Validation
-  ".tag-validation": {
-    "@apply block text-sm mt-1": {},
+  // Append
+  ".form-append": {
+    "@apply flex flex-wrap items-stretch w-full": {},
   },
-  ".tag-success .tag-validation": {
-    "@apply text-green-700": {},
+  ".form-append .form-input": {
+    "@apply flex-auto w-px rounded-r-none": {},
   },
-  ".tag-danger .tag-validation": {
-    "@apply text-red-700": {},
+  ".form-append .btn": {
+    "@apply -ml-1 rounded-l-none": {},
   },
-  ".tag-success .tag-input, .tag-success .tag-select, .tag-success .tag-checkbox, .tag-success .tag-radio": {
-    "@apply bg-green-100": {},
+  // Icons
+  ".form-icon": {
+    "@apply relative": {},
   },
-  ".tag-danger .tag-input, .tag-danger .tag-select, .tag-danger .tag-checkbox, .tag-danger .tag-radio": {
-    "@apply bg-red-100": {},
+  ".form-icon svg": {
+    "@apply h-full absolute inset-y-0 w-8 left-0 pl-3 pointer-events-none text-gray-400": {},
   },
-  ".tag-append": {
-    "@apply relative flex flex-wrap items-stretch w-full": {},
+  ".form-icon-r svg": {
+    "@apply left-auto right-0 pr-3 pl-0": {},
   },
-  ".tag-append .tag-input": {
-    "@apply relative flex-auto w-px mt-0 rounded-r-none": {},
+  ".form-icon .form-input, .form-icon .form-input-sm, .form-icon .form-input-lg": {
+    "@apply pl-10": {},
   },
-  ".tag-append .btn, .tag-append .tag-text": {
-    "@apply -ml-1 rounded-l-none": {},
+  ".form-icon-r .form-input, .form-icon-r .form-input-sm, .form-icon-r .form-input-lg": {
+    "@apply pr-10": {},
+  },
+  ".form-icon-r .form-input": {
+    "@apply pl-3": {},
+  },
+  ".form-icon-r .form-input-sm": {
+    "@apply pl-2": {},
   },
-  ".tag-append .tag-text": {
-    "@apply bg-gray-200 rounded-r px-3 flex items-center": {},
+  ".form-icon-r .form-input-lg": {
+    "@apply pl-4": {},
   },
 });
diff --git a/src/js/components/dropdown.js b/src/js/components/dropdown.js
index c9ccdbf..95e3e77 100644
--- a/src/js/components/dropdown.js
+++ b/src/js/components/dropdown.js
@@ -145,7 +145,7 @@ window.dropdown = function() {
         refocusTrigger(this.$el);
         toggleAriaAtrributes(this.$el, this.open);
       },
-      ['x-show.transition.in.origin.top.left.opacity.scale.90.out.origin.top.left.opacity.scale.90']() {
+      ['x-show.transition.in.origin.top.opacity.scale.90.out.origin.top.opacity.scale.90']() {
         return this.open;
       },
       ['@click.away']() {