docs: Update README

Author: unlight

README.md

@@ -4,80 +4,33 @@ Tailwind plugin to add floating label, control with float label components
 
 Demo - https://unlight.github.io/tailwind-float-label
 
-## Setup
+## Setup and configration
 
-```sh
-npm install --save-dev tailwind-float-label
-```
-
-Add plugin to `plugins` section of `tailwind.config.js`
-
-```js
-plugins: [require('tailwind-float-label')(options)],
-```
-
-## Options
-
-```ts
-type Options = {
-  /**
-   * Custom styles for container.
-   */
-  container?: DeepPartial<{ [k: string]: string } | string>;
-  /**
-   * Custom styles for input control.
-   */
-  control?: DeepPartial<{ [k: string]: string } | string>;
-  /**
-   * Custom styles for label.
-   */
-  label?: DeepPartial<{ [k: string]: string } | string>;
-};
-```
-
-## Usage
-
-Plugins adds these components supposed used together:
-
-- `.float-label-container` Container which holds input control and label
-- `.float-label-control` Form control
-- `.float-label-self` Label
-- `.float-label-sticky` Label which is always visible
-- But `.float-label-auto` Automatically make `label` floating and `input` inside this container
+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.
+   - `.float-container` Container which holds input control and label
+   - `.float-input` Form input control
+   - `.float-always` Use with `.float-container` to makem 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-label-container">
-    <input
-      type="text"
-      id="name"
-      autocomplete="off"
-      placeholder="Name"
-      class="float-label-control outline-none focus:shadow-outline border w-full px-1"
-    />
+  <div class="float-container">
     <label for="name" class="float-label-self bg-white text-gray-500"
       >Name</label
     >
-  </div>
-  <!-- Auto: make `label` floating for `input` -->
-  <div class="float-label-auto">
     <input
       type="text"
-      id="auto"
+      id="name"
       autocomplete="off"
-      placeholder="Auto"
-      class="outline-none focus:shadow-outline border w-full px-1"
+      placeholder="Name"
+      class="float-input outline-none focus:shadow-outline border w-full px-1"
     />
-    <label for="auto" class="bg-white text-gray-500">Auto</label>
   </div>
 </form>
 ```
 
-#### Notes:
-
-`.float-label-control` and `.float-label-self` must be direct children of `.float-label-container`
-
 ## Similar Projects
 
 - https://github.com/notiz-dev/floating-form-field-tailwindcss
@@ -100,5 +53,3 @@ Plugins adds these components supposed used together:
 - 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)
-- build
-- rewrite documenation (old version, anatomy)