diff --git a/README.md b/README.md
index 8a9c56d..d698d39 100644
--- a/README.md
+++ b/README.md
@@ -164,6 +164,7 @@ The ratio of the lazyframe. Possible values: 16:9, 4:3, 1:1
 Set this to true if you want the resource to execute (for example video to play) when the element is in view.
 
 ## Changelog
+* v1.1.901 betterify example page
 * v1.1.9 remove gulp and rollup and use webpack instead
     * use Babel 7
     * add changelog to README
diff --git a/index.html b/index.html
index c5a2703..d5c0460 100644
--- a/index.html
+++ b/index.html
@@ -1,24 +1,13 @@
 <!doctype html>
 <html lang="en">
+
 <head>
   <meta charset="utf-8">
   <title>Lazyframe Demo</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="dist/lazyframe.css">
+  <link rel="stylesheet" href="https://cdn.tailwindcdn.com/1.1.4/tailwind.min.css">
   <style>
-    .container{
-      max-width: 500px;
-      margin: 0 auto;
-      width: 100%;
-    }
-
-    p {
-      font-family: "Helvetica Neue", Helvetica, Arial;
-    }
-
-    .lazyframe {
-      margin-bottom: 200px;
-    }
     .lazyframe--custom {
       background: #bada55;
       display: -webkit-box;
@@ -32,6 +21,7 @@
       -ms-flex-pack: center;
       justify-content: center;
     }
+
     .lazyframe--custom .lazyframe__title {
       position: relative;
       width: 100%;
@@ -40,60 +30,176 @@
       font-family: Arial;
       color: #fff;
     }
-    .lazyframe--custom::before{
+
+    .lazyframe--custom::before {
       width: auto;
     }
   </style>
 </head>
-<body>
-  <div class="container">
-    <p>Youtube video with thumbnail and title from API</p>
-    <div
-      class="lazyframe"
-      data-src="https://www.youtube.com/embed/6hgVihWjK2c"
-      data-vendor="youtube">
-    </div>
-
-    <p>Youtube video with custom thumbnail and title</p>
-    <div
-      class="lazyframe"
-      data-src="https://www.youtube.com/embed/6hgVihWjK2c"
-      data-vendor="youtube"
-      data-title="Custom title"
-      data-thumbnail="https://placekitten.com/500/281">
-    </div>
-
-    <p>Vimeo video with thumbnail and title from API</p>
-    <div
-      class="lazyframe"
-      data-src="https://vimeo.com/45915667"
-      data-vendor="vimeo">
-    </div>
-
-    <p>Vimeo video with custom thumbnail and title</p>
-    <div
-      class="lazyframe"
-      data-src="https://vimeo.com/183524061"
-      data-vendor="vimeo"
-      data-title="Custom title"
-      data-thumbnail="https://placekitten.com/500/281">
-    </div>
-
-    <p>Iframe with custom theme and title</p>
-    <div
-      class="lazyframe lazyframe--custom"
-      data-src="https://www.surveymonkey.com/r/?sm=%2bd%2bdWobuoz7irMV%2fpzKPcJmrKosuGWSraJtIrFQ4wBQ%3d"
-      data-title="Something completely different">
-    </div>
-
-    <p>Google maps iframe with custom thumbnail and title that gets executed when in view</p>
-    <div
-      class="lazyframe lazyframe--custom"
-      data-src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJ8fA1bTmyXEYRYm-tjaLruCI&key=AIzaSyDQxRfx3HQrE0_oTFI2WHzoiGL_CM0JJfQ"
-      data-title="Something completely different"
-      data-initinview="true">
-    </div>
-  </div>
+
+<body class="overflow-x-hidden font-sans antialiased text-gray-900 bg-white">
+
+  <main>
+
+    <!-- start hero section -->
+    <section class="relative px-4 pt-10 pb-10 text-center bg-blue-500 md:text-center text-white">
+      <div>
+        <h1 class="text-5xl font-bold leading-tight">Lazyframe</h1>
+        <p class="mt-4">Dependency-free library for lazyloading iframes</p>
+        <p class="mt-4"><a href="https://github.com/vb/lazyframe">https://github.com/vb/lazyframe</a></p>
+      </div>
+    </section>
+    <!-- end hero section -->
+
+    <!-- start how it works -->
+    <section class="px-4 py-16 text-center bg-gray-100">
+      <h2 class="text-2xl font-bold leading-tight lg:text-3xl">What does it do? It turns blue.</h2>
+      <p class="mt-5 mt-5 text-2xl text-center">Lazyframe creates a responsive placeholder for embedded content and only
+        requests it when the user
+        interacts with
+        it. This decreases the page load and idle time. Lazyframe comes with brand-like themes for YouTube, Vimeo and
+        Vine.</p>
+      <h2 class="text-2xl font-bold leading-tight lg:text-3xl mt-10">Why?</h2>
+      <p class="mt-5 mt-5 text-2xl text-center">Because the JavaScript loaded from the external providers is big and
+        takes much time to load. This
+        slows down your site, even if your visitors don't want to see your beautiful videos.
+      </p>
+      <p>For example here are the number of requests and filesizes of some well-known services.</p>
+      <ul class="list-unstyled mt-10">
+
+        <li>
+          YouTube – 11 requests ≈ 580kb
+        </li>
+        <li>
+          Google maps – 52 requests ≈ 580kb
+        </li>
+        <li>
+          Vimeo – 8 requests ≈ 145kb
+        </li>
+      </ul>
+
+    </section>
+    <!-- end how it works -->
+
+    <section class="bg-blue-300 p-10 text-center ">
+      <h2 class="text-2xl font-bold leading-tight lg:text-3xl">Examples</h2>
+
+      <div class="mt-8 md:flex">
+        <div class="w-full  bg-white  shadow-lg sm:w-1/2 sm:mx-2 lg:mx-6">
+          <div class="lazyframe" data-src="https://www.youtube.com/watch?v=izDzsFe1o4I" data-vendor="youtube">
+          </div>
+          <div class="px-4 py-8">
+            <h4 class="text-lg font-bold tracking-wide">Embed YouTube video with thumbnail and title from
+              API
+            </h4>
+            <p>This demo only works at https://vb.github.io/lazyframe/, so we have to wait, until this is merged into
+              the
+              master repo</p>
+          </div>
+        </div>
+
+        <div class="w-full bg-white shadow-lg sm:w-1/2 sm:mx-2 lg:mx-6 mt-5 md:mt-0">
+          <div>
+            <div class="lazyframe" data-src="https://www.youtube.com/embed/6hgVihWjK2c" data-vendor="youtube"
+              data-title="Custom title" data-thumbnail="https://placekitten.com/500/281">
+            </div>
+
+            <h4 class="px-4 py-8 text-lg font-bold tracking-wide">Embed YouTube video with custom preview image
+              and
+              custom title
+            </h4>
+
+          </div>
+        </div>
+      </div>
+      <div class="mt-8 md:flex">
+        <div class="w-full bg-white  shadow-lg sm:w-1/2 sm:mx-2 lg:mx-6">
+          <div>
+            <div class="lazyframe" data-src="https://vimeo.com/45915667" data-vendor="vimeo">
+            </div>
+          </div>
+          <h4 class="px-4 py-8 text-lg font-bold tracking-wide">Embed Vimeo video with thumbnail and title from
+            API
+          </h4>
+        </div>
+
+        <div class="w-full bg-white  shadow-lg sm:w-1/2 sm:mx-2 lg:mx-6 mt-5 md:mt-0">
+          <div>
+            <div class="lazyframe" data-src="https://www.youtube.com/embed/6hgVihWjK2c" data-vendor="youtube"
+              data-title="Custom title" data-thumbnail="https://placekitten.com/500/281">
+            </div>
+            <h4 class="px-4 py-8 text-lg font-bold tracking-wide">Embed Vimeo video with custom thumbnail and
+              title
+            </h4>
+          </div>
+        </div>
+      </div>
+
+      <div class="mt-8 md:flex">
+        <div class="w-full  bg-white  shadow-lg sm:w-1/2 sm:mx-2 lg:mx-6">
+          <div>
+            <div class="lazyframe lazyframe--custom"
+              data-src="https://www.surveymonkey.com/r/?sm=%2bd%2bdWobuoz7irMV%2fpzKPcJmrKosuGWSraJtIrFQ4wBQ%3d"
+              data-title="Something completely different">
+            </div>
+          </div>
+          <h4 class="px-4 py-8 text-lg font-bold tracking-wide">Custom Iframe
+          </h4>
+        </div>
+
+        <div class="w-full bg-white  shadow-lg sm:w-1/2 sm:mx-2 lg:mx-6 mt-5 md:mt-0">
+          <div>
+            <div class="lazyframe lazyframe--custom"
+              data-src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJ8fA1bTmyXEYRYm-tjaLruCI&key=AIzaSyDQxRfx3HQrE0_oTFI2WHzoiGL_CM0JJfQ"
+              data-title="Something completely different" data-initinview="true">
+            </div>
+            <div class="px-4 py-8">
+              <h4 class="text-lg font-bold tracking-wide uppercase">Google maps iframe with custom thumbnail and
+                title that gets executed when in view
+              </h4>
+              <p class="mt-2 text-base text-gray-700">This demo only works at https://vb.github.io/lazyframe/, so we
+                have
+                to wait, until this is merged into the
+                master repo
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- start features -->
+    <section class="flex flex-col px-4 py-12 text-center bg-blue-500 lg:px-16 md:px-8 xl:px-24 xxl:px-40">
+      <div>
+        <h2 class="text-2xl font-bold leading-tight text-white lg:text-3xl">Lazyframe is small, beautiful and easy to
+          apply.
+          My website loads now much faster. Thank you very much for creating this impressive script!”
+        </h2>
+        <p class="mt-4 text-xl font-bold text-white">Random guy</p>
+        <p class="text-gray-300">on the internet</p>
+      </div>
+
+
+    </section>
+    <!-- end features -->
+
+    <!-- start cta -->
+    <section class="px-4 py-12 text-center bg-white lg:px-16 md:px-8 xl:px-24 xxl:px-40">
+      <div>
+        <h2 class="text-2xl font-bold lg:text-3xl ">Need Help? Found a bug?</h2>
+        <p class="w-full mx-auto mt-6 text-base text-gray-700 lg:w-1/2">File an issue on GitHub</p>
+        <a href="https://github.com/vb/lazyframe/issues"
+          class="block mt-4 text-xl font-semibold text-blue-500">https://github.com/vb/lazyframe/issues</a>
+      </div>
+    </section>
+    <!-- end cta -->
+
+
+
+  </main>
+
+
+
   <script src="dist/lazyframe.min.js"></script>
   <script>
     lazyframe('.lazyframe', {
@@ -101,4 +207,5 @@
     });
   </script>
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/package.json b/package.json
index ccb7eed..fa522e6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lazyframe",
-  "version": "1.1.9",
+  "version": "1.1.901",
   "description": "Dependency-free library for lazyloading iframes",
   "main": "dist/lazyframe.min.js",
   "jsnext:main": "src/lazyframe.js",
