Add example to README

Author: bartkozal

README.md

@@ -50,10 +50,36 @@ Wrap text/email/password input or textarea:
 
 ### Examples
 
-Adjust `.vfl-label`, `.vfl-label-on-input` and `.vfl-label-on-focus` to meet
-your design requirements:
-
-TODO
+Style `.vfl-label`, `.vfl-label-on-input` and `.vfl-label-on-focus`
+to meet your design requirements:
+
+![example](https://github.com/bkzl/vue-float-label/blob/master/demo/example.gif)
+
+```css
+.vfl-label {
+  text-transform: uppercase;
+}
+
+.vfl-label-on-input {
+  top: -1em;
+}
+
+.vfl-label-on-focus {
+  color: #ff851b;
+}
+
+.vfl-label + input {
+  padding-left: 0;
+  font-size: 100%;
+  border: 0;
+  border-bottom: 2px solid #aaa;
+  transition: border 0.2s;
+}
+
+.vfl-label-on-focus + input  {
+  border-bottom: 2px solid #ff851b;
+}
+```
 
 ## Development
 

demo/Demo.vue

@@ -16,6 +16,12 @@
       <float-label>
         <textarea placeholder="Comment"></textarea>
       </float-label>
+
+      <div class="example">
+        <float-label>
+          <input type="text" placeholder="Website">
+        </float-label>
+      </div>
     </div>
   </div>
 </template>
@@ -38,4 +44,32 @@ textarea {
   padding: .4em;
   width: 100%;
 }
+
+.example {
+  margin-top: 2em;
+}
+
+.example .vfl-label {
+  text-transform: uppercase;
+}
+
+.example .vfl-label-on-input {
+  top: -1em;
+}
+
+.example .vfl-label-on-focus {
+  color: #ff851b;
+}
+
+.example .vfl-label + input {
+  padding-left: 0;
+  font-size: 100%;
+  border: 0;
+  border-bottom: 2px solid #aaa;
+  transition: border 0.2s;
+}
+
+.example .vfl-label-on-focus + input  {
+  border-bottom: 2px solid #ff851b;
+}
 </style>