docs: Update README

Author: unlight

README.md

@@ -8,24 +8,24 @@ Demo - https://unlight.github.io/tailwind-float-label
 
 1. `npm install --save-dev tailwind-float-label`
 2. Add `@import 'tailwind-float-label'` to your main css file
-3. Plugin provides classes which must be set for label and input to make label floats.
+3. Configure css variable `--float-label-background-color` for background of
+   float label
+4. Plugin provides classes which must be set for label and input to make label floats.
    - `.float-container` Container which holds input control and label
    - `.float-input` Form input control
    - `.float-always` Use with `.float-container` to make label always visible (sticky)
 
 ```html
 <form class="max-w-xs mx-auto p-5 space-y-4">
-  <h2 class="text-2xl font-bold text-center">Example</h2>
   <div class="float-container">
-    <label for="name" class="float-label px-2 bg-white text-gray-500"
-      >Name</label
+    <label for="fullname" class="float-label px-2 text-gray-600"
+      >Full Name</label
     >
     <input
       type="text"
-      id="name"
-      autocomplete="off"
-      placeholder="Name"
-      class="float-input outline-none focus:shadow-outline border w-full px-1"
+      id="fullname"
+      class="float-input w-full px-3 py-2 border border-gray-300"
+      placeholder="Full Name"
     />
   </div>
 </form>
@@ -47,11 +47,3 @@ If you need animation, add to `.float-label` following classes: `transition-all
 ## License
 
 [MIT License](https://opensource.org/licenses/MIT) (c) 2025
-
-## TODO
-
-- find information about plugins how to do it
-- how to set variables
-- update readme (no sticky, just remove input placeholder)
-- block with multiple type of input (select, text area)
-- block with size of inputs (lg, xs, sm)

index.html

@@ -14,7 +14,7 @@ <h1 class="text-xl font-bold mb-4 text-gray-800">Float Labels Example</h1>
       <form class="space-y-4">
         <div class="float-container">
           <label for="fullname" class="float-label px-2 text-gray-600"
-            >Full Name (1: empty)</label
+            >Full Name</label
           >
           <input
             type="text"
@@ -73,28 +73,25 @@ <h1 class="text-xl font-bold mb-4 text-gray-800">Float Labels Example</h1>
           ></textarea>
         </div>
 
+        <div class="float-container text-3xl">
+          <label for="bigname" class="float-label px-2 text-gray-600"
+            >Big Name</label
+          >
+          <input
+            type="text"
+            id="bigname"
+            class="float-input w-full px-3 py-2 border border-gray-300"
+            placeholder="Full Name placeholder"
+          />
+        </div>
+
         <button
           type="button"
           class="w-full bg-blue-500 text-white py-2 px-4 hover:cursor-pointer"
         >
           Submit
         </button>
       </form>
-      <form class="max-w-xs mx-auto p-5 space-y-4">
-        <h2 class="text-2xl font-bold text-center">README Example</h2>
-        <div class="float-container">
-          <label for="name" class="float-label px-1 bg-white text-gray-500"
-            >Name</label
-          >
-          <input
-            type="text"
-            id="name"
-            autocomplete="off"
-            placeholder="Name"
-            class="float-input outline-none focus:shadow-outline border w-full px-1"
-          />
-        </div>
-      </form>
     </div>
   </body>
 </html>