v1.5.0

htmlstreamofficial · Dec 5, 2022 · f3240a4 · f3240a4
1 parent 5915304
commit f3240a4
Show file tree

Hide file tree

Showing 64 changed files with 4,067 additions and 76 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/examples/.DS_Store b/examples/.DS_Store
diff --git a/examples/html/ab-center-aligned-in-container-size-with-bg-elements.html b/examples/html/ab-center-aligned-in-container-size-with-bg-elements.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <!-- Required Meta Tags Always Come First -->
+  <meta charset="utf-8">
+  <meta name="robots" content="max-snippet:-1, max-image-preview:large, max-video-preview:-1">
+  <link rel="canonical" href="https://preline.co/">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="description" content="Announcement Banner example using Tailwind CSS for Preline UI, a product of Htmlstream.">
+
+  <meta name="twitter:site" content="@preline">
+  <meta name="twitter:creator" content="@htmlstream">
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="Center Aligned Announcement Banner in Container Size with Background Elements using Tailwind CSS | Preline UI, crafted with Tailwind CSS">
+  <meta name="twitter:description" content="Announcement Banner example using Tailwind CSS for Preline UI, a product of Htmlstream.">
+  <meta name="twitter:image" content="../../assets/img/og-image.png">
+
+  <meta property="og:url" content="https://preline.co/">
+  <meta property="og:locale" content="en_US">
+  <meta property="og:type" content="website">
+  <meta property="og:site_name" content="Preline">
+  <meta property="og:title" content="Center Aligned Announcement Banner in Container Size with Background Elements using Tailwind CSS | Preline UI, crafted with Tailwind CSS">
+  <meta property="og:description" content="Announcement Banner example using Tailwind CSS for Preline UI, a product of Htmlstream.">
+  <meta property="og:image" content="../../assets/img/og-image.png">
+
+  <!-- Title -->
+  <title>Center Aligned Announcement Banner in Container Size with Background Elements using Tailwind CSS | Preline UI, crafted with Tailwind CSS</title>
+
+  <!-- Favicon -->
+  <link rel="shortcut icon" href="../../favicon.ico">
+
+  <!-- Font -->
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+
+  <!-- Link your Tailwind CSS file -->
+  <link rel="stylesheet" href="your_file.css">
+</head>
+
+<body class="dark:bg-slate-900">
+  <script src="../../assets/js/hs.theme-appearance.js"></script>
+
+  <!-- ========== MAIN CONTENT ========== -->
+  <main id="content" role="main">
+    <!-- Announcement Banner -->
+    <div class="max-w-[85rem] px-4 sm:px-6 lg:px-8 mx-auto">
+      <div class="bg-blue-600 bg-[url('../svg/component/abstract-1.svg')] bg-no-repeat bg-cover bg-center p-4 rounded-md text-center">
+        <p class="mr-2 inline-block text-white">
+          Preline UI Figma is live.
+        </p>
+        <a class="py-2 px-3 inline-flex justify-center items-center gap-2 rounded-full border-2 border-white font-semibold text-white hover:bg-white/[.1] hover:border-white/[.1] focus:outline-none focus:ring-2 focus:ring-blue-900 focus:ring-offset-2 transition-all text-sm" href="../../figma.html">
+          Learn more
+          <svg class="w-2.5 h-2.5" width="16" height="16" viewBox="0 0 16 16" fill="none">
+            <path d="M5.27921 2L10.9257 7.64645C11.1209 7.84171 11.1209 8.15829 10.9257 8.35355L5.27921 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+          </svg>
+        </a>
+      </div>
+    </div>
+    <!-- End Announcement Banner -->
+  </main>
+  <!-- ========== END MAIN CONTENT ========== -->
+
+  <!-- JS Implementing Plugins -->
+  <script src="./assets/vendor/preline/dist/preline.js"></script>
+</body>
+</html>
diff --git a/examples/html/ab-full-width-center-aligned-link-on-gray-bg.html b/examples/html/ab-full-width-center-aligned-link-on-gray-bg.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <!-- Required Meta Tags Always Come First -->
+  <meta charset="utf-8">
+  <meta name="robots" content="max-snippet:-1, max-image-preview:large, max-video-preview:-1">
+  <link rel="canonical" href="https://preline.co/">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="description" content="Announcement Banner example using Tailwind CSS for Preline UI, a product of Htmlstream.">
+
+  <meta name="twitter:site" content="@preline">
+  <meta name="twitter:creator" content="@htmlstream">
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="Full Width Center Aligned Link on Gray Background using Tailwind CSS | Preline UI, crafted with Tailwind CSS">
+  <meta name="twitter:description" content="Announcement Banner example using Tailwind CSS for Preline UI, a product of Htmlstream.">
+  <meta name="twitter:image" content="../../assets/img/og-image.png">
+
+  <meta property="og:url" content="https://preline.co/">
+  <meta property="og:locale" content="en_US">
+  <meta property="og:type" content="website">
+  <meta property="og:site_name" content="Preline">
+  <meta property="og:title" content="Full Width Center Aligned Link on Gray Background using Tailwind CSS | Preline UI, crafted with Tailwind CSS">
+  <meta property="og:description" content="Announcement Banner example using Tailwind CSS for Preline UI, a product of Htmlstream.">
+  <meta property="og:image" content="../../assets/img/og-image.png">
+
+  <!-- Title -->
+  <title>Full Width Center Aligned Link on Gray Background using Tailwind CSS | Preline UI, crafted with Tailwind CSS</title>
+
+  <!-- Favicon -->
+  <link rel="shortcut icon" href="../../favicon.ico">
+
+  <!-- Font -->
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+
+  <!-- Link your Tailwind CSS file -->
+  <link rel="stylesheet" href="your_file.css">
+</head>
+
+<body class="dark:bg-slate-900">
+  <script src="../../assets/js/hs.theme-appearance.js"></script>
+
+  <!-- ========== MAIN CONTENT ========== -->
+  <main id="content" role="main">
+    <!-- Announcement Banner -->
+    <a class="group block bg-gray-100 hover:bg-gray-200 p-4 rounded-md text-center transition-all duration-300 dark:bg-white/[.05] dark:hover:bg-white/[.075]" href="#">
+      <div class="max-w-[85rem] px-4 sm:px-6 lg:px-8 mx-auto">
+        <p class="mr-2 inline-block text-sm text-gray-800 dark:text-gray-200">
+          Shop for everyone on your list with the Preline Guide.
+        </p>
+        <span class="group-hover:underline decoration-2 inline-flex justify-center items-center gap-x-2 font-semibold text-blue-600 text-sm dark:text-blue-500">
+          Shop now
+          <svg class="w-2.5 h-2.5" width="16" height="16" viewBox="0 0 16 16" fill="none">
+            <path d="M5.27921 2L10.9257 7.64645C11.1209 7.84171 11.1209 8.15829 10.9257 8.35355L5.27921 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+          </svg>
+        </span>
+      </div>
+    </a>
+    <!-- End Announcement Banner -->
+  </main>
+  <!-- ========== END MAIN CONTENT ========== -->
+
+  <!-- JS Implementing Plugins -->
+  <script src="./assets/vendor/preline/dist/preline.js"></script>
+</body>
+</html>
diff --git a/examples/html/ab-full-width-with-dismiss-button-on-blue-bg.html b/examples/html/ab-full-width-with-dismiss-button-on-blue-bg.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <!-- Required Meta Tags Always Come First -->
+  <meta charset="utf-8">
+  <meta name="robots" content="max-snippet:-1, max-image-preview:large, max-video-preview:-1">
+  <link rel="canonical" href="https://preline.co/">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="description" content="Announcement Banner example using Tailwind CSS for Preline UI, a product of Htmlstream.">
+
+  <meta name="twitter:site" content="@preline">
+  <meta name="twitter:creator" content="@htmlstream">
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="Full Width Announcement Banner with Dismiss Button on Blue Background using Tailwind CSS | Preline UI, crafted with Tailwind CSS">
+  <meta name="twitter:description" content="Announcement Banner example using Tailwind CSS for Preline UI, a product of Htmlstream.">
+  <meta name="twitter:image" content="../../assets/img/og-image.png">
+
+  <meta property="og:url" content="https://preline.co/">
+  <meta property="og:locale" content="en_US">
+  <meta property="og:type" content="website">
+  <meta property="og:site_name" content="Preline">
+  <meta property="og:title" content="Full Width Announcement Banner with Dismiss Button on Blue Background using Tailwind CSS | Preline UI, crafted with Tailwind CSS">
+  <meta property="og:description" content="Announcement Banner example using Tailwind CSS for Preline UI, a product of Htmlstream.">
+  <meta property="og:image" content="../../assets/img/og-image.png">
+
+  <!-- Title -->
+  <title>Full Width Announcement Banner with Dismiss Button on Blue Background using Tailwind CSS | Preline UI, crafted with Tailwind CSS</title>
+
+  <!-- Favicon -->
+  <link rel="shortcut icon" href="../../favicon.ico">
+
+  <!-- Font -->
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+
+  <!-- Link your Tailwind CSS file -->
+  <link rel="stylesheet" href="your_file.css">
+</head>
+
+<body class="dark:bg-slate-900">
+  <script src="../../assets/js/hs.theme-appearance.js"></script>
+
+  <!-- ========== MAIN CONTENT ========== -->
+  <main id="content" role="main">
+    <!-- Announcement Banner -->
+    <div id="ab-full-width-with-dismiss-button-on-blue-bg" class="hs-removing:-translate-y-full bg-blue-600">
+      <div class="max-w-[85rem] px-4 py-4 sm:px-6 lg:px-8 mx-auto">
+        <div class="flex">
+          <p class="text-white">
+            Preline Figma is live. <a class="decoration-2 underline font-medium hover:text-white/[.8]" href="../../figma.html">Learn more</a>
+          </p>
+
+          <div class="pl-3 ml-auto">
+            <button type="button" class="inline-flex rounded-md p-1.5 text-white/[.8] hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-600 focus:ring-white" data-hs-remove-element="#ab-full-width-with-dismiss-button-on-blue-bg">
+              <span class="sr-only">Dismiss</span>
+              <svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                <path d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z" fill="currentColor" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- End Announcement Banner -->
+  </main>
+  <!-- ========== END MAIN CONTENT ========== -->
+
+  <!-- JS Implementing Plugins -->
+  <script src="./assets/vendor/preline/dist/preline.js"></script>
+</body>
+</html>
diff --git a/examples/html/ab-light-pilled-style-link.html b/examples/html/ab-light-pilled-style-link.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <!-- Required Meta Tags Always Come First -->
+  <meta charset="utf-8">
+  <meta name="robots" content="max-snippet:-1, max-image-preview:large, max-video-preview:-1">
+  <link rel="canonical" href="https://preline.co/">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="description" content="Announcement Banner example using Tailwind CSS for Preline UI, a product of Htmlstream.">
+
+  <meta name="twitter:site" content="@preline">
+  <meta name="twitter:creator" content="@htmlstream">
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="Light Pilled Style Link using Tailwind CSS | Preline UI, crafted with Tailwind CSS">
+  <meta name="twitter:description" content="Announcement Banner example using Tailwind CSS for Preline UI, a product of Htmlstream.">
+  <meta name="twitter:image" content="../../assets/img/og-image.png">
+
+  <meta property="og:url" content="https://preline.co/">
+  <meta property="og:locale" content="en_US">
+  <meta property="og:type" content="website">
+  <meta property="og:site_name" content="Preline">
+  <meta property="og:title" content="Light Pilled Style Link using Tailwind CSS | Preline UI, crafted with Tailwind CSS">
+  <meta property="og:description" content="Announcement Banner example using Tailwind CSS for Preline UI, a product of Htmlstream.">
+  <meta property="og:image" content="../../assets/img/og-image.png">
+
+  <!-- Title -->
+  <title>Light Pilled Style Link using Tailwind CSS | Preline UI, crafted with Tailwind CSS</title>
+
+  <!-- Favicon -->
+  <link rel="shortcut icon" href="../../favicon.ico">
+
+  <!-- Font -->
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+
+  <!-- Link your Tailwind CSS file -->
+  <link rel="stylesheet" href="your_file.css">
+</head>
+
+<body class="bg-slate-900">
+  <script src="../../assets/js/hs.theme-appearance.js"></script>
+
+  <!-- ========== MAIN CONTENT ========== -->
+  <main id="content" role="main">
+    <div class="max-w-[85rem] px-4 py-4 sm:px-6 lg:px-8 mx-auto text-center">
+      <!-- Announcement Banner -->
+      <a class="group inline-block bg-white/[.05] hover:bg-white/[.1] border border-white/[.05] p-1 pl-4 rounded-full shadow-md" href="../../figma.html">
+        <p class="mr-2 inline-block text-white text-sm">
+          Preline UI Figma is live.
+        </p>
+        <span class="group-hover:bg-white/[.1] py-2 px-3 inline-flex justify-center items-center gap-x-2 rounded-full bg-white/[.075] font-semibold text-white text-sm">
+          <svg class="w-2.5 h-2.5" width="16" height="16" viewBox="0 0 16 16" fill="none">
+            <path d="M5.27921 2L10.9257 7.64645C11.1209 7.84171 11.1209 8.15829 10.9257 8.35355L5.27921 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+          </svg>
+        </span>
+      </a>
+      <!-- End Announcement Banner -->
+    </div>
+  </main>
+  <!-- ========== END MAIN CONTENT ========== -->
+
+  <!-- JS Implementing Plugins -->
+  <script src="./assets/vendor/preline/dist/preline.js"></script>
+</body>
+</html>
diff --git a/examples/html/ab-links-in-gradient-bg.html b/examples/html/ab-links-in-gradient-bg.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <!-- Required Meta Tags Always Come First -->
+  <meta charset="utf-8">
+  <meta name="robots" content="max-snippet:-1, max-image-preview:large, max-video-preview:-1">
+  <link rel="canonical" href="https://preline.co/">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="description" content="Announcement Banner example using Tailwind CSS for Preline UI, a product of Htmlstream.">
+
+  <meta name="twitter:site" content="@preline">
+  <meta name="twitter:creator" content="@htmlstream">
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="Links in Gradient Background using Tailwind CSS | Preline UI, crafted with Tailwind CSS">
+  <meta name="twitter:description" content="Announcement Banner example using Tailwind CSS for Preline UI, a product of Htmlstream.">
+  <meta name="twitter:image" content="../../assets/img/og-image.png">
+
+  <meta property="og:url" content="https://preline.co/">
+  <meta property="og:locale" content="en_US">
+  <meta property="og:type" content="website">
+  <meta property="og:site_name" content="Preline">
+  <meta property="og:title" content="Links in Gradient Background using Tailwind CSS | Preline UI, crafted with Tailwind CSS">
+  <meta property="og:description" content="Announcement Banner example using Tailwind CSS for Preline UI, a product of Htmlstream.">
+  <meta property="og:image" content="../../assets/img/og-image.png">
+
+  <!-- Title -->
+  <title>Links in Gradient Background using Tailwind CSS | Preline UI, crafted with Tailwind CSS</title>
+
+  <!-- Favicon -->
+  <link rel="shortcut icon" href="../../favicon.ico">
+
+  <!-- Font -->
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+
+  <!-- Link your Tailwind CSS file -->
+  <link rel="stylesheet" href="your_file.css">
+</head>
+
+<body class="dark:bg-slate-900">
+  <script src="../../assets/js/hs.theme-appearance.js"></script>
+
+  <!-- ========== MAIN CONTENT ========== -->
+  <main id="content" role="main">
+    <!-- Announcement Banner -->
+    <div class="bg-gradient-to-r from-purple-600 to-blue-400">
+      <div class="max-w-[85rem] px-4 py-4 sm:px-6 lg:px-8 mx-auto">
+        <!-- Grid -->
+        <div class="grid justify-center md:grid-cols-2 md:justify-between md:items-center gap-2">
+          <div class="text-center md:text-left md:order-2 md:flex md:justify-end md:items-center">
+            <p class="mr-5 inline-block text-sm font-semibold text-white">
+              Ready to get started?
+            </p>
+            <a class="py-2 px-3 inline-flex justify-center items-center gap-2 rounded-md border-2 border-white font-medium text-white hover:bg-white hover:text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 transition-all text-sm" href="#">
+              Sign up
+            </a>
+          </div>
+          <!-- End Col -->
+
+          <div class="flex items-center">
+            <a class="py-2 px-3 inline-flex justify-center items-center gap-2 rounded-md font-medium text-white hover:bg-white/[.1] focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 transition-all text-sm" href="#">
+              <svg class="w-3 h-3" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z" />
+              </svg>
+              Watch demo
+            </a>
+            <span class="inline-block border-r border-white/[.3] w-px h-5 mx-2"></span>
+            <a class="py-2 px-3 inline-flex justify-center items-center gap-2 rounded-md font-medium text-white hover:bg-white/[.1] focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 transition-all text-sm" href="#">
+              Explore what's new
+            </a>
+          </div>
+          <!-- End Col -->
+        </div>
+        <!-- End Grid -->
+      </div>
+    </div>
+    <!-- End Announcement Banner -->
+  </main>
+  <!-- ========== END MAIN CONTENT ========== -->
+
+  <!-- JS Implementing Plugins -->
+  <script src="./assets/vendor/preline/dist/preline.js"></script>
+</body>
+</html>