tailwind_dsl 0.0.3 → 0.0.4

data/.components/tui/marketing/page/pricing/01.html

@@ -0,0 +1,1608 @@
+<!--
+  This example requires some changes to your config:
+  
+  ```
+  // tailwind.config.js
+  const colors = require('tailwindcss/colors')
+  
+  module.exports = {
+    // ...
+    theme: {
+      extend: {
+        colors: {
+          orange: colors.orange,
+        },
+      },
+    },
+    plugins: [
+      // ...
+      require('@tailwindcss/forms'),
+      require('@tailwindcss/aspect-ratio'),
+    ],
+  }
+  ```
+-->
+<div class="bg-white">
+  <div class="bg-indigo-900">
+    <!-- Header -->
+    <div class="relative">
+      <div class="mx-auto max-w-7xl px-4 sm:px-6">
+        <div class="flex items-center justify-between border-b border-indigo-400 border-opacity-25 py-6 md:justify-start md:space-x-10">
+          <div class="flex justify-start lg:w-0 lg:flex-1">
+            <a href="#">
+              <span class="sr-only">Your Company</span>
+              <img class="h-8 w-auto sm:h-10" src="https://tailwindui.com/img/logos/mark.svg?from-color=orange&from-shade=400&to-color=pink&to-shade=500&toShade=500" alt="">
+            </a>
+          </div>
+          <div class="-my-2 -mr-2 md:hidden">
+            <button type="button" class="inline-flex items-center justify-center rounded-md bg-indigo-900 p-2 text-indigo-300 hover:bg-indigo-800 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-expanded="false">
+              <span class="sr-only">Open menu</span>
+              <!-- Heroicon name: outline/bars-3 -->
+              <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+              </svg>
+            </button>
+          </div>
+          <nav class="hidden space-x-10 md:flex">
+            <div class="relative">
+              <!-- Item active: "text-white", Item inactive: "text-indigo-300" -->
+              <button type="button" class="text-indigo-300 group inline-flex items-center rounded-md bg-indigo-900 text-base font-medium hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-indigo-900" aria-expanded="false">
+                <span>Solutions</span>
+                <!--
+                  Heroicon name: mini/chevron-down
+
+                  Item active: "text-white", Item inactive: "text-indigo-300"
+                -->
+                <svg class="text-indigo-300 ml-2 h-5 w-5 group-hover:text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
+                </svg>
+              </button>
+
+              <!--
+                'Solutions' flyout menu, show/hide based on flyout menu state.
+
+                Entering: "transition ease-out duration-200"
+                  From: "opacity-0 translate-y-1"
+                  To: "opacity-100 translate-y-0"
+                Leaving: "transition ease-in duration-150"
+                  From: "opacity-100 translate-y-0"
+                  To: "opacity-0 translate-y-1"
+              -->
+              <div class="absolute z-10 -ml-4 mt-3 w-screen max-w-md transform px-2 sm:px-0 lg:left-1/2 lg:ml-0 lg:-translate-x-1/2">
+                <div class="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
+                  <div class="relative grid gap-6 bg-white py-6 px-5 sm:gap-8 sm:p-8">
+                    <a href="#" class="-m-3 flex items-start rounded-lg p-3 hover:bg-gray-50">
+                      <!-- Heroicon name: outline/chart-bar -->
+                      <svg class="h-6 w-6 flex-shrink-0 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
+                      </svg>
+                      <div class="ml-4">
+                        <p class="text-base font-medium text-gray-900">Analytics</p>
+                        <p class="mt-1 text-sm text-gray-500">Get a better understanding of where your traffic is coming from.</p>
+                      </div>
+                    </a>
+
+                    <a href="#" class="-m-3 flex items-start rounded-lg p-3 hover:bg-gray-50">
+                      <!-- Heroicon name: outline/cursor-arrow-rays -->
+                      <svg class="h-6 w-6 flex-shrink-0 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.042 21.672L13.684 16.6m0 0l-2.51 2.225.569-9.47 5.227 7.917-3.286-.672zM12 2.25V4.5m5.834.166l-1.591 1.591M20.25 10.5H18M7.757 14.743l-1.59 1.59M6 10.5H3.75m4.007-4.243l-1.59-1.59" />
+                      </svg>
+                      <div class="ml-4">
+                        <p class="text-base font-medium text-gray-900">Engagement</p>
+                        <p class="mt-1 text-sm text-gray-500">Speak directly to your customers in a more meaningful way.</p>
+                      </div>
+                    </a>
+
+                    <a href="#" class="-m-3 flex items-start rounded-lg p-3 hover:bg-gray-50">
+                      <!-- Heroicon name: outline/shield-check -->
+                      <svg class="h-6 w-6 flex-shrink-0 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
+                      </svg>
+                      <div class="ml-4">
+                        <p class="text-base font-medium text-gray-900">Security</p>
+                        <p class="mt-1 text-sm text-gray-500">Your customers&#039; data will be safe and secure.</p>
+                      </div>
+                    </a>
+
+                    <a href="#" class="-m-3 flex items-start rounded-lg p-3 hover:bg-gray-50">
+                      <!-- Heroicon name: outline/squares-2x2 -->
+                      <svg class="h-6 w-6 flex-shrink-0 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" />
+                      </svg>
+                      <div class="ml-4">
+                        <p class="text-base font-medium text-gray-900">Integrations</p>
+                        <p class="mt-1 text-sm text-gray-500">Connect with third-party tools that you&#039;re already using.</p>
+                      </div>
+                    </a>
+
+                    <a href="#" class="-m-3 flex items-start rounded-lg p-3 hover:bg-gray-50">
+                      <!-- Heroicon name: outline/arrow-path -->
+                      <svg class="h-6 w-6 flex-shrink-0 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12c0-1.232.046-2.453.138-3.662a4.006 4.006 0 013.7-3.7 48.678 48.678 0 017.324 0 4.006 4.006 0 013.7 3.7c.017.22.032.441.046.662M4.5 12l-3-3m3 3l3-3m12 3c0 1.232-.046 2.453-.138 3.662a4.006 4.006 0 01-3.7 3.7 48.657 48.657 0 01-7.324 0 4.006 4.006 0 01-3.7-3.7c-.017-.22-.032-.441-.046-.662M19.5 12l-3 3m3-3l3 3" />
+                      </svg>
+                      <div class="ml-4">
+                        <p class="text-base font-medium text-gray-900">Automations</p>
+                        <p class="mt-1 text-sm text-gray-500">Build strategic funnels that will drive your customers to convert</p>
+                      </div>
+                    </a>
+                  </div>
+                  <div class="space-y-6 bg-gray-50 px-5 py-5 sm:flex sm:space-y-0 sm:space-x-10 sm:px-8">
+                    <div class="flow-root">
+                      <a href="#" class="-m-3 flex items-center rounded-md p-3 text-base font-medium text-gray-900 hover:bg-gray-100">
+                        <!-- Heroicon name: outline/play -->
+                        <svg class="h-6 w-6 flex-shrink-0 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                          <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z" />
+                        </svg>
+                        <span class="ml-3">Watch Demo</span>
+                      </a>
+                    </div>
+
+                    <div class="flow-root">
+                      <a href="#" class="-m-3 flex items-center rounded-md p-3 text-base font-medium text-gray-900 hover:bg-gray-100">
+                        <!-- Heroicon name: outline/phone -->
+                        <svg class="h-6 w-6 flex-shrink-0 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                          <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z" />
+                        </svg>
+                        <span class="ml-3">Contact Sales</span>
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <a href="#" class="text-base font-medium text-indigo-300 hover:text-white">Pricing</a>
+            <a href="#" class="text-base font-medium text-indigo-300 hover:text-white">Docs</a>
+
+            <div class="relative">
+              <!-- Item active: "text-white", Item inactive: "text-indigo-300" -->
+              <button type="button" class="text-indigo-300 group inline-flex items-center rounded-md bg-indigo-900 text-base font-medium hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-indigo-900" aria-expanded="false">
+                <span>More</span>
+                <!--
+                  Heroicon name: mini/chevron-down
+
+                  Item active: "text-white", Item inactive: "text-indigo-300"
+                -->
+                <svg class="text-indigo-300 ml-2 h-5 w-5 group-hover:text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
+                </svg>
+              </button>
+
+              <!--
+                'More' flyout menu, show/hide based on flyout menu state.
+
+                Entering: "transition ease-out duration-200"
+                  From: "opacity-0 translate-y-1"
+                  To: "opacity-100 translate-y-0"
+                Leaving: "transition ease-in duration-150"
+                  From: "opacity-100 translate-y-0"
+                  To: "opacity-0 translate-y-1"
+              -->
+              <div class="absolute left-1/2 z-10 mt-3 w-screen max-w-md -translate-x-1/2 transform px-2 sm:px-0">
+                <div class="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
+                  <div class="relative grid gap-6 bg-white py-6 px-5 sm:gap-8 sm:p-8">
+                    <a href="#" class="-m-3 flex items-start rounded-lg p-3 hover:bg-gray-50">
+                      <!-- Heroicon name: outline/lifebuoy -->
+                      <svg class="h-6 w-6 flex-shrink-0 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M16.712 4.33a9.027 9.027 0 011.652 1.306c.51.51.944 1.064 1.306 1.652M16.712 4.33l-3.448 4.138m3.448-4.138a9.014 9.014 0 00-9.424 0M19.67 7.288l-4.138 3.448m4.138-3.448a9.014 9.014 0 010 9.424m-4.138-5.976a3.736 3.736 0 00-.88-1.388 3.737 3.737 0 00-1.388-.88m2.268 2.268a3.765 3.765 0 010 2.528m-2.268-4.796a3.765 3.765 0 00-2.528 0m4.796 4.796c-.181.506-.475.982-.88 1.388a3.736 3.736 0 01-1.388.88m2.268-2.268l4.138 3.448m0 0a9.027 9.027 0 01-1.306 1.652c-.51.51-1.064.944-1.652 1.306m0 0l-3.448-4.138m3.448 4.138a9.014 9.014 0 01-9.424 0m5.976-4.138a3.765 3.765 0 01-2.528 0m0 0a3.736 3.736 0 01-1.388-.88 3.737 3.737 0 01-.88-1.388m2.268 2.268L7.288 19.67m0 0a9.024 9.024 0 01-1.652-1.306 9.027 9.027 0 01-1.306-1.652m0 0l4.138-3.448M4.33 16.712a9.014 9.014 0 010-9.424m4.138 5.976a3.765 3.765 0 010-2.528m0 0c.181-.506.475-.982.88-1.388a3.736 3.736 0 011.388-.88m-2.268 2.268L4.33 7.288m6.406 1.18L7.288 4.33m0 0a9.024 9.024 0 00-1.652 1.306A9.025 9.025 0 004.33 7.288" />
+                      </svg>
+                      <div class="ml-4">
+                        <p class="text-base font-medium text-gray-900">Help Center</p>
+                        <p class="mt-1 text-sm text-gray-500">Get all of your questions answered in our forums or contact support.</p>
+                      </div>
+                    </a>
+
+                    <a href="#" class="-m-3 flex items-start rounded-lg p-3 hover:bg-gray-50">
+                      <!-- Heroicon name: outline/bookmark-square -->
+                      <svg class="h-6 w-6 flex-shrink-0 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 3.75V16.5L12 14.25 7.5 16.5V3.75m9 0H18A2.25 2.25 0 0120.25 6v12A2.25 2.25 0 0118 20.25H6A2.25 2.25 0 013.75 18V6A2.25 2.25 0 016 3.75h1.5m9 0h-9" />
+                      </svg>
+                      <div class="ml-4">
+                        <p class="text-base font-medium text-gray-900">Guides</p>
+                        <p class="mt-1 text-sm text-gray-500">Learn how to maximize our platform to get the most out of it.</p>
+                      </div>
+                    </a>
+
+                    <a href="#" class="-m-3 flex items-start rounded-lg p-3 hover:bg-gray-50">
+                      <!-- Heroicon name: outline/calendar -->
+                      <svg class="h-6 w-6 flex-shrink-0 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" />
+                      </svg>
+                      <div class="ml-4">
+                        <p class="text-base font-medium text-gray-900">Events</p>
+                        <p class="mt-1 text-sm text-gray-500">See what meet-ups and other events we might be planning near you.</p>
+                      </div>
+                    </a>
+
+                    <a href="#" class="-m-3 flex items-start rounded-lg p-3 hover:bg-gray-50">
+                      <!-- Heroicon name: outline/shield-check -->
+                      <svg class="h-6 w-6 flex-shrink-0 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
+                      </svg>
+                      <div class="ml-4">
+                        <p class="text-base font-medium text-gray-900">Security</p>
+                        <p class="mt-1 text-sm text-gray-500">Understand how we take your privacy seriously.</p>
+                      </div>
+                    </a>
+                  </div>
+                  <div class="bg-gray-50 px-5 py-5 sm:px-8 sm:py-8">
+                    <div>
+                      <h3 class="text-base font-medium text-gray-500">Recent Posts</h3>
+                      <ul role="list" class="mt-4 space-y-4">
+                        <li class="truncate text-base">
+                          <a href="#" class="font-medium text-gray-900 hover:text-gray-700">Boost your conversion rate</a>
+                        </li>
+
+                        <li class="truncate text-base">
+                          <a href="#" class="font-medium text-gray-900 hover:text-gray-700">How to use search engine optimization to drive traffic to your site</a>
+                        </li>
+
+                        <li class="truncate text-base">
+                          <a href="#" class="font-medium text-gray-900 hover:text-gray-700">Improve your customer experience</a>
+                        </li>
+                      </ul>
+                    </div>
+                    <div class="mt-5 text-sm">
+                      <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500">
+                        View all posts
+                        <span aria-hidden="true"> &rarr;</span>
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </nav>
+          <div class="hidden items-center justify-end space-x-8 md:flex md:flex-1 lg:w-0">
+            <a href="#" class="whitespace-nowrap text-base font-medium text-indigo-300 hover:text-white">Sign in</a>
+            <a href="#" class="inline-flex items-center justify-center whitespace-nowrap rounded-md border border-transparent bg-white py-2 px-4 text-base font-medium text-indigo-600 shadow-sm hover:bg-indigo-50">Sign up</a>
+          </div>
+        </div>
+      </div>
+
+      <!--
+        Mobile menu, show/hide based on mobile menu state.
+
+        Entering: "duration-200 ease-out"
+          From: "opacity-0 scale-95"
+          To: "opacity-100 scale-100"
+        Leaving: "duration-100 ease-in"
+          From: "opacity-100 scale-100"
+          To: "opacity-0 scale-95"
+      -->
+      <div class="absolute inset-x-0 top-0 z-10 origin-top-right transform p-2 transition md:hidden">
+        <div class="divide-y-2 divide-gray-50 rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">
+          <div class="space-y-6 px-5 pt-5 pb-6">
+            <div class="flex items-center justify-between">
+              <div>
+                <img class="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?from-color=orange&from-shade=400&to-color=pink&to-shade=500&toShade=500" alt="Your Company">
+              </div>
+              <div class="-mr-2">
+                <button type="button" class="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
+                  <span class="sr-only">Close menu</span>
+                  <!-- Heroicon name: outline/x-mark -->
+                  <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                  </svg>
+                </button>
+              </div>
+            </div>
+            <div class="mt-6">
+              <nav class="grid gap-y-8">
+                <a href="#" class="-m-3 flex items-center rounded-md p-3 hover:bg-gray-50">
+                  <!-- Heroicon name: outline/chart-bar -->
+                  <svg class="h-6 w-6 flex-shrink-0 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
+                  </svg>
+                  <span class="ml-3 text-base font-medium text-gray-900">Analytics</span>
+                </a>
+
+                <a href="#" class="-m-3 flex items-center rounded-md p-3 hover:bg-gray-50">
+                  <!-- Heroicon name: outline/cursor-arrow-rays -->
+                  <svg class="h-6 w-6 flex-shrink-0 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M15.042 21.672L13.684 16.6m0 0l-2.51 2.225.569-9.47 5.227 7.917-3.286-.672zM12 2.25V4.5m5.834.166l-1.591 1.591M20.25 10.5H18M7.757 14.743l-1.59 1.59M6 10.5H3.75m4.007-4.243l-1.59-1.59" />
+                  </svg>
+                  <span class="ml-3 text-base font-medium text-gray-900">Engagement</span>
+                </a>
+
+                <a href="#" class="-m-3 flex items-center rounded-md p-3 hover:bg-gray-50">
+                  <!-- Heroicon name: outline/shield-check -->
+                  <svg class="h-6 w-6 flex-shrink-0 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
+                  </svg>
+                  <span class="ml-3 text-base font-medium text-gray-900">Security</span>
+                </a>
+
+                <a href="#" class="-m-3 flex items-center rounded-md p-3 hover:bg-gray-50">
+                  <!-- Heroicon name: outline/squares-2x2 -->
+                  <svg class="h-6 w-6 flex-shrink-0 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" />
+                  </svg>
+                  <span class="ml-3 text-base font-medium text-gray-900">Integrations</span>
+                </a>
+
+                <a href="#" class="-m-3 flex items-center rounded-md p-3 hover:bg-gray-50">
+                  <!-- Heroicon name: outline/arrow-path -->
+                  <svg class="h-6 w-6 flex-shrink-0 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12c0-1.232.046-2.453.138-3.662a4.006 4.006 0 013.7-3.7 48.678 48.678 0 017.324 0 4.006 4.006 0 013.7 3.7c.017.22.032.441.046.662M4.5 12l-3-3m3 3l3-3m12 3c0 1.232-.046 2.453-.138 3.662a4.006 4.006 0 01-3.7 3.7 48.657 48.657 0 01-7.324 0 4.006 4.006 0 01-3.7-3.7c-.017-.22-.032-.441-.046-.662M19.5 12l-3 3m3-3l3 3" />
+                  </svg>
+                  <span class="ml-3 text-base font-medium text-gray-900">Automations</span>
+                </a>
+              </nav>
+            </div>
+          </div>
+          <div class="space-y-6 py-6 px-5">
+            <div class="grid grid-cols-2 gap-y-4 gap-x-8">
+              <a href="#" class="text-base font-medium text-gray-900 hover:text-gray-700">Pricing</a>
+
+              <a href="#" class="text-base font-medium text-gray-900 hover:text-gray-700">Docs</a>
+
+              <a href="#" class="text-base font-medium text-gray-900 hover:text-gray-700">Blog</a>
+
+              <a href="#" class="text-base font-medium text-gray-900 hover:text-gray-700">Contact Sales</a>
+
+              <a href="#" class="text-base font-medium text-gray-900 hover:text-gray-700">Help Center</a>
+
+              <a href="#" class="text-base font-medium text-gray-900 hover:text-gray-700">Guides</a>
+
+              <a href="#" class="text-base font-medium text-gray-900 hover:text-gray-700">Events</a>
+
+              <a href="#" class="text-base font-medium text-gray-900 hover:text-gray-700">Security</a>
+            </div>
+            <div>
+              <a href="#" class="flex w-full items-center justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700">Sign up</a>
+              <p class="mt-6 text-center text-base font-medium text-gray-500">
+                Existing customer?
+                <a href="#" class="text-indigo-600 hover:text-indigo-500">Sign in</a>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Header section with select menu -->
+    <div class="mx-auto max-w-2xl py-16 px-4 sm:py-24 sm:px-6 lg:max-w-7xl lg:px-8">
+      <div class="px-0 sm:px-4 lg:flex lg:items-center lg:justify-between lg:px-0">
+        <div class="max-w-xl">
+          <h2 class="text-4xl font-bold tracking-tight text-white sm:text-5xl lg:text-6xl">Pricing Plans</h2>
+          <p class="mt-5 text-xl text-indigo-300">Start building for free, then add a site plan to go live. Account plans unlock additional features.</p>
+        </div>
+        <div class="mt-10 w-full max-w-xs lg:mt-0">
+          <label for="currency" class="block text-base font-medium text-indigo-300">Currency</label>
+          <div class="relative mt-1.5">
+            <select id="currency" name="currency" class="block w-full rounded-md border border-transparent bg-indigo-400 bg-opacity-25 bg-none text-white focus:border-white focus:ring-white">
+              <option class="bg-gray-900">Argentina (ARS)</option>
+              <option class="bg-gray-900">Australia (AUD)</option>
+              <option class="bg-gray-900" selected>United States (USD)</option>
+              <option class="bg-gray-900">Canada (CAD)</option>
+              <option class="bg-gray-900">France (EUR)</option>
+              <option class="bg-gray-900">Japan (JPY)</option>
+              <option class="bg-gray-900">Nigeria (NGN)</option>
+              <option class="bg-gray-900">Switzerland (CHF)</option>
+              <option class="bg-gray-900">United Kingdom (GBP)</option>
+            </select>
+            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2">
+              <!-- Heroicon name: mini/chevron-down -->
+              <svg class="h-4 w-4 text-indigo-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Comparison table -->
+  <div class="mx-auto max-w-2xl bg-white py-16 sm:py-24 sm:px-6 lg:max-w-7xl lg:px-8">
+    <!-- xs to lg -->
+    <div class="space-y-24 lg:hidden">
+      <section>
+        <div class="mb-8 px-4">
+          <h2 class="text-lg font-medium leading-6 text-gray-900">Basic</h2>
+          <p class="mt-4">
+            <span class="text-4xl font-bold tracking-tight text-gray-900">$9</span>
+            <span class="text-base font-medium text-gray-500">/mo</span>
+          </p>
+          <p class="mt-4 text-sm text-gray-500">Quis suspendisse ut fermentum neque vivamus non tellus.</p>
+          <a href="#" class="mt-6 block w-full rounded-md border border-transparent bg-gradient-to-r from-orange-500 to-pink-500 py-2 text-center text-sm font-semibold text-white shadow hover:to-pink-600">Buy Basic</a>
+        </div>
+
+        <table class="w-full">
+          <caption class="border-t border-gray-200 bg-gray-50 py-3 px-4 text-left text-sm font-medium text-gray-900">
+            Features
+          </caption>
+          <thead>
+            <tr>
+              <th class="sr-only" scope="col">Feature</th>
+              <th class="sr-only" scope="col">Included</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-gray-200">
+            <tr class="border-t border-gray-200">
+              <th class="py-5 px-4 text-left text-sm font-normal text-gray-500" scope="row">Molestie lobortis massa.</th>
+              <td class="py-5 pr-4">
+                <!-- Heroicon name: mini/check -->
+                <svg class="ml-auto h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+                </svg>
+                <span class="sr-only">Yes</span>
+              </td>
+            </tr>
+
+            <tr class="border-t border-gray-200">
+              <th class="py-5 px-4 text-left text-sm font-normal text-gray-500" scope="row">Urna purus felis.</th>
+              <td class="py-5 pr-4">
+                <!-- Heroicon name: mini/check -->
+                <svg class="ml-auto h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+                </svg>
+                <span class="sr-only">Yes</span>
+              </td>
+            </tr>
+
+            <tr class="border-t border-gray-200">
+              <th class="py-5 px-4 text-left text-sm font-normal text-gray-500" scope="row">Tellus pulvinar sit dictum.</th>
+              <td class="py-5 pr-4">
+                <!-- Heroicon name: mini/minus -->
+                <svg class="ml-auto h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H3.75A.75.75 0 013 10z" clip-rule="evenodd" />
+                </svg>
+                <span class="sr-only">No</span>
+              </td>
+            </tr>
+
+            <tr class="border-t border-gray-200">
+              <th class="py-5 px-4 text-left text-sm font-normal text-gray-500" scope="row">Convallis.</th>
+              <td class="py-5 pr-4">
+                <!-- Heroicon name: mini/minus -->
+                <svg class="ml-auto h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H3.75A.75.75 0 013 10z" clip-rule="evenodd" />
+                </svg>
+                <span class="sr-only">No</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+
+        <table class="w-full">
+          <caption class="border-t border-gray-200 bg-gray-50 py-3 px-4 text-left text-sm font-medium text-gray-900">
+            Reporting
+          </caption>
+          <thead>
+            <tr>
+              <th class="sr-only" scope="col">Feature</th>
+              <th class="sr-only" scope="col">Included</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-gray-200">
+            <tr class="border-t border-gray-200">
+              <th class="py-5 px-4 text-left text-sm font-normal text-gray-500" scope="row">Adipiscing.</th>
+              <td class="py-5 pr-4">
+                <!-- Heroicon name: mini/check -->
+                <svg class="ml-auto h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+                </svg>
+                <span class="sr-only">Yes</span>
+              </td>
+            </tr>
+
+            <tr class="border-t border-gray-200">
+              <th class="py-5 px-4 text-left text-sm font-normal text-gray-500" scope="row">Eget risus integer.</th>
+              <td class="py-5 pr-4">
+                <!-- Heroicon name: mini/minus -->
+                <svg class="ml-auto h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H3.75A.75.75 0 013 10z" clip-rule="evenodd" />
+                </svg>
+                <span class="sr-only">No</span>
+              </td>
+            </tr>
+
+            <tr class="border-t border-gray-200">
+              <th class="py-5 px-4 text-left text-sm font-normal text-gray-500" scope="row">Gravida leo urna velit.</th>
+              <td class="py-5 pr-4">
+                <!-- Heroicon name: mini/minus -->
+                <svg class="ml-auto h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H3.75A.75.75 0 013 10z" clip-rule="evenodd" />
+                </svg>
+                <span class="sr-only">No</span>
+              </td>
+            </tr>
+
+            <tr class="border-t border-gray-200">
+              <th class="py-5 px-4 text-left text-sm font-normal text-gray-500" scope="row">Elementum ut dapibus mi feugiat cras nisl.</th>
+              <td class="py-5 pr-4">
+                <!-- Heroicon name: mini/minus -->
+                <svg class="ml-auto h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H3.75A.75.75 0 013 10z" clip-rule="evenodd" />
+                </svg>
+                <span class="sr-only">No</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+
+        <table class="w-full">
+          <caption class="border-t border-gray-200 bg-gray-50 py-3 px-4 text-left text-sm font-medium text-gray-900">
+            Support
+          </caption>
+          <thead>
+            <tr>
+              <th class="sr-only" scope="col">Feature</th>
+              <th class="sr-only" scope="col">Included</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-gray-200">
+            <tr class="border-t border-gray-200">
+              <th class="py-5 px-4 text-left text-sm font-normal text-gray-500" scope="row">Sit dignissim.</th>
+              <td class="py-5 pr-4">
+                <!-- Heroicon name: mini/check -->
+                <svg class="ml-auto h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+                </svg>
+                <span class="sr-only">Yes</span>
+              </td>
+            </tr>
+
+            <tr class="border-t border-gray-200">
+              <th class="py-5 px-4 text-left text-sm font-normal text-gray-500" scope="row">Congue at nibh et.</th>
+              <td class="py-5 pr-4">
+                <!-- Heroicon name: mini/minus -->
+                <svg class="ml-auto h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H3.75A.75.75 0 013 10z" clip-rule="evenodd" />
+                </svg>
+                <span class="sr-only">No</span>
+              </td>
+            </tr>
+
+            <tr class="border-t border-gray-200">
+              <th class="py-5 px-4 text-left text-sm font-normal text-gray-500" scope="row">Volutpat feugiat mattis.</th>
+              <td class="py-5 pr-4">
+                <!-- Heroicon name: mini/minus -->
+                <svg class="ml-auto h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H3.75A.75.75 0 013 10z" clip-rule="evenodd" />
+                </svg>
+                <span class="sr-only">No</span>
+              </td>
+            </tr>
+
+            <tr class="border-t border-gray-200">
+              <th class="py-5 px-4 text-left text-sm font-normal text-gray-500" scope="row">Tristique pellentesque ornare diam sapien.</th>
+              <td class="py-5 pr-4">
+                <!-- Heroicon name: mini/minus -->
+                <svg class="ml-auto h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H3.75A.75.75 0 013 10z" clip-rule="evenodd" />
+                </svg>
+                <span class="sr-only">No</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+
+        <div class="border-t border-gray-200 px-4 pt-5">
+          <a href="#" class="block w-full rounded-md border border-transparent bg-gradient-to-r from-orange-500 to-pink-500 py-2 text-center text-sm font-semibold text-white shadow hover:to-pink-600">Buy Basic</a>
+        </div>
+      </section>
+
+      <section>
+        <div class="mb-8 px-4">
+          <h2 class="text-lg font-medium leading-6 text-gray-900">Essential</h2>
+          <p class="mt-4">
+            <span class="text-4xl font-bold tracking-tight text-gray-900">$29</span>
+            <span class="text-base font-medium text-gray-500">/mo</span>
+          </p>
+          <p class="mt-4 text-sm text-gray-500">Quis eleifend a tincidunt pellentesque. A tempor in sed.</p>
+          <a href="#" class="mt-6 block w-full rounded-md border border-transparent bg-gradient-to-r from-orange-500 to-pink-500 py-2 text-center text-sm font-semibold text-white shadow hover:to-pink-600">Buy Essential</a>
+        </div>
+
+        <table class="w-full">
+          <caption class="border-t border-gray-200 bg-gray-50 py-3 px-4 text-left text-sm font-medium text-gray-900">
+            Features
+          </caption>
+          <thead>
+            <tr>
+              <th class="sr-only" scope="col">Feature</th>
+              <th class="sr-only" scope="col">Included</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-gray-200">
+            <tr class="border-t border-gray-200">
+              <th class="py-5 px-4 text-left text-sm font-normal text-gray-500" scope="row">Molestie lobortis massa.</th>
+              <td class="py-5 pr-4">
+                <!-- Heroicon name: mini/check -->
+                <svg class="ml-auto h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+                </svg>
+                <span class="sr-only">Yes</span>
+              </td>
+            </tr>
+
+            <tr class="border-t border-gray-200">
+              <th class="py-5 px-4 text-left text-sm font-normal text-gray-500" scope="row">Urna purus felis.</th>
+              <td class="py-5 pr-4">
+                <!-- Heroicon name: mini/check -->
+                <svg class="ml-auto h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+                </svg>
+                <span class="sr-only">Yes</span>
+              </td>
+            </tr>
+
+            <tr class="border-t border-gray-200">
+              <th class="py-5 px-4 text-left text-sm font-normal text-gray-500" scope="row">Tellus pulvinar sit dictum.</th>
+              <td class="py-5 pr-4">
+                <!-- Heroicon name: mini/check -->
+                <svg class="ml-auto h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+                </svg>
+                <span class="sr-only">Yes</span>
+              </td>
+            </tr>
+
+            <tr class="border-t border-gray-200">
+              <th class="py-5 px-4 text-left text-sm font-normal text-gray-500" scope="row">Convallis.</th>
+              <td class="py-5 pr-4">
+                <span class="block text-right text-sm text-gray-700">Up to 20 users</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+
+        <table class="w-full">
+          <caption class="border-t border-gray-200 bg-gray-50 py-3 px-4 text-left text-sm font-medium text-gray-900">
+            Reporting
+          </caption>
+          <thead>
+            <tr>
+              <th class="sr-only" scope="col">Feature</th>
+              <th class="sr-only" scope="col">Included</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-gray-200">
+            <tr class="border-t border-gray-200">
+              <th class="py-5 px-4 text-left text-sm font-normal text-gray-500" scope="row">Adipiscing.</th>
+              <td class="py-5 pr-4">
+                <!-- Heroicon name: mini/check -->
+                <svg class="ml-auto h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+                </svg>
+                <span class="sr-only">Yes</span>
+              </td>
+            </tr>
+
+            <tr class="border-t border-gray-200">
+              <th class="py-5 px-4 text-left text-sm font-normal text-gray-500" scope="row">Eget risus integer.</th>
+              <td class="py-5 pr-4">
+                <!-- Heroicon name: mini/check -->
+                <svg class="ml-auto h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+                </svg>
+                <span class="sr-only">Yes</span>
+              </td>
+            </tr>
+
+            <tr class="border-t border-gray-200">
+              <th class="py-5 px-4 text-left text-sm font-normal text-gray-500" scope="row">Gravida leo urna velit.</th>
+              <td class="py-5 pr-4">
+                <!-- Heroicon name: mini/minus -->
+                <svg class="ml-auto h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H3.75A.75.75 0 013 10z" clip-rule="evenodd" />
+                </svg>
+                <span class="sr-only">No</span>
+              </td>
+            </tr>
+
+            <tr class="border-t border-gray-200">
+              <th class="py-5 px-4 text-left text-sm font-normal text-gray-500" scope="row">Elementum ut dapibus mi feugiat cras nisl.</th>
+              <td class="py-5 pr-4">
+                <!-- Heroicon name: mini/minus -->
+                <svg class="ml-auto h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H3.75A.75.75 0 013 10z" clip-rule="evenodd" />
+                </svg>
+                <span class="sr-only">No</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+
+        <table class="w-full">
+          <caption class="border-t border-gray-200 bg-gray-50 py-3 px-4 text-left text-sm font-medium text-gray-900">
+            Support
+          </caption>
+          <thead>
+            <tr>
+              <th class="sr-only" scope="col">Feature</th>
+              <th class="sr-only" scope="col">Included</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-gray-200">
+            <tr class="border-t border-gray-200">
+              <th class="py-5 px-4 text-left text-sm font-normal text-gray-500" scope="row">Sit dignissim.</th>
+              <td class="py-5 pr-4">
+                <!-- Heroicon name: mini/check -->
+                <svg class="ml-auto h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+                </svg>
+                <span class="sr-only">Yes</span>
+              </td>
+            </tr>
+
+            <tr class="border-t border-gray-200">
+              <th class="py-5 px-4 text-left text-sm font-normal text-gray-500" scope="row">Congue at nibh et.</th>
+              <td class="py-5 pr-4">
+                <!-- Heroicon name: mini/check -->
+                <svg class="ml-auto h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+                </svg>
+                <span class="sr-only">Yes</span>
+              </td>
+            </tr>
+
+            <tr class="border-t border-gray-200">
+              <th class="py-5 px-4 text-left text-sm font-normal text-gray-500" scope="row">Volutpat feugiat mattis.</th>
+              <td class="py-5 pr-4">
+                <!-- Heroicon name: mini/check -->
+                <svg class="ml-auto h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+                </svg>
+                <span class="sr-only">Yes</span>
+              </td>
+            </tr>
+
+            <tr class="border-t border-gray-200">
+              <th class="py-5 px-4 text-left text-sm font-normal text-gray-500" scope="row">Tristique pellentesque ornare diam sapien.</th>
+              <td class="py-5 pr-4">
+                <!-- Heroicon name: mini/minus -->
+                <svg class="ml-auto h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H3.75A.75.75 0 013 10z" clip-rule="evenodd" />
+                </svg>
+                <span class="sr-only">No</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+
+        <div class="border-t border-gray-200 px-4 pt-5">
+          <a href="#" class="block w-full rounded-md border border-transparent bg-gradient-to-r from-orange-500 to-pink-500 py-2 text-center text-sm font-semibold text-white shadow hover:to-pink-600">Buy Essential</a>
+        </div>
+      </section>
+
+      <section>
+        <div class="mb-8 px-4">
+          <h2 class="text-lg font-medium leading-6 text-gray-900">Premium</h2>
+          <p class="mt-4">
+            <span class="text-4xl font-bold tracking-tight text-gray-900">$59</span>
+            <span class="text-base font-medium text-gray-500">/mo</span>
+          </p>
+          <p class="mt-4 text-sm text-gray-500">Orci volutpat ut sed sed neque, dui eget. Quis tristique non.</p>
+          <a href="#" class="mt-6 block w-full rounded-md border border-transparent bg-gradient-to-r from-orange-500 to-pink-500 py-2 text-center text-sm font-semibold text-white shadow hover:to-pink-600">Buy Premium</a>
+        </div>
+
+        <table class="w-full">
+          <caption class="border-t border-gray-200 bg-gray-50 py-3 px-4 text-left text-sm font-medium text-gray-900">
+            Features
+          </caption>
+          <thead>
+            <tr>
+              <th class="sr-only" scope="col">Feature</th>
+              <th class="sr-only" scope="col">Included</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-gray-200">
+            <tr class="border-t border-gray-200">
+              <th class="py-5 px-4 text-left text-sm font-normal text-gray-500" scope="row">Molestie lobortis massa.</th>
+              <td class="py-5 pr-4">
+                <!-- Heroicon name: mini/check -->
+                <svg class="ml-auto h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+                </svg>
+                <span class="sr-only">Yes</span>
+              </td>
+            </tr>
+
+            <tr class="border-t border-gray-200">
+              <th class="py-5 px-4 text-left text-sm font-normal text-gray-500" scope="row">Urna purus felis.</th>
+              <td class="py-5 pr-4">
+                <!-- Heroicon name: mini/check -->
+                <svg class="ml-auto h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+                </svg>
+                <span class="sr-only">Yes</span>
+              </td>
+            </tr>
+
+            <tr class="border-t border-gray-200">
+              <th class="py-5 px-4 text-left text-sm font-normal text-gray-500" scope="row">Tellus pulvinar sit dictum.</th>
+              <td class="py-5 pr-4">
+                <!-- Heroicon name: mini/check -->
+                <svg class="ml-auto h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+                </svg>
+                <span class="sr-only">Yes</span>
+              </td>
+            </tr>
+
+            <tr class="border-t border-gray-200">
+              <th class="py-5 px-4 text-left text-sm font-normal text-gray-500" scope="row">Convallis.</th>
+              <td class="py-5 pr-4">
+                <span class="block text-right text-sm text-gray-700">Up to 50 users</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+
+        <table class="w-full">
+          <caption class="border-t border-gray-200 bg-gray-50 py-3 px-4 text-left text-sm font-medium text-gray-900">
+            Reporting
+          </caption>
+          <thead>
+            <tr>
+              <th class="sr-only" scope="col">Feature</th>
+              <th class="sr-only" scope="col">Included</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-gray-200">
+            <tr class="border-t border-gray-200">
+              <th class="py-5 px-4 text-left text-sm font-normal text-gray-500" scope="row">Adipiscing.</th>
+              <td class="py-5 pr-4">
+                <!-- Heroicon name: mini/check -->
+                <svg class="ml-auto h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+                </svg>
+                <span class="sr-only">Yes</span>
+              </td>
+            </tr>
+
+            <tr class="border-t border-gray-200">
+              <th class="py-5 px-4 text-left text-sm font-normal text-gray-500" scope="row">Eget risus integer.</th>
+              <td class="py-5 pr-4">
+                <!-- Heroicon name: mini/check -->
+                <svg class="ml-auto h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+                </svg>
+                <span class="sr-only">Yes</span>
+              </td>
+            </tr>
+
+            <tr class="border-t border-gray-200">
+              <th class="py-5 px-4 text-left text-sm font-normal text-gray-500" scope="row">Gravida leo urna velit.</th>
+              <td class="py-5 pr-4">
+                <!-- Heroicon name: mini/check -->
+                <svg class="ml-auto h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+                </svg>
+                <span class="sr-only">Yes</span>
+              </td>
+            </tr>
+
+            <tr class="border-t border-gray-200">
+              <th class="py-5 px-4 text-left text-sm font-normal text-gray-500" scope="row">Elementum ut dapibus mi feugiat cras nisl.</th>
+              <td class="py-5 pr-4">
+                <!-- Heroicon name: mini/check -->
+                <svg class="ml-auto h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+                </svg>
+                <span class="sr-only">Yes</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+
+        <table class="w-full">
+          <caption class="border-t border-gray-200 bg-gray-50 py-3 px-4 text-left text-sm font-medium text-gray-900">
+            Support
+          </caption>
+          <thead>
+            <tr>
+              <th class="sr-only" scope="col">Feature</th>
+              <th class="sr-only" scope="col">Included</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-gray-200">
+            <tr class="border-t border-gray-200">
+              <th class="py-5 px-4 text-left text-sm font-normal text-gray-500" scope="row">Sit dignissim.</th>
+              <td class="py-5 pr-4">
+                <!-- Heroicon name: mini/check -->
+                <svg class="ml-auto h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+                </svg>
+                <span class="sr-only">Yes</span>
+              </td>
+            </tr>
+
+            <tr class="border-t border-gray-200">
+              <th class="py-5 px-4 text-left text-sm font-normal text-gray-500" scope="row">Congue at nibh et.</th>
+              <td class="py-5 pr-4">
+                <!-- Heroicon name: mini/check -->
+                <svg class="ml-auto h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+                </svg>
+                <span class="sr-only">Yes</span>
+              </td>
+            </tr>
+
+            <tr class="border-t border-gray-200">
+              <th class="py-5 px-4 text-left text-sm font-normal text-gray-500" scope="row">Volutpat feugiat mattis.</th>
+              <td class="py-5 pr-4">
+                <!-- Heroicon name: mini/check -->
+                <svg class="ml-auto h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+                </svg>
+                <span class="sr-only">Yes</span>
+              </td>
+            </tr>
+
+            <tr class="border-t border-gray-200">
+              <th class="py-5 px-4 text-left text-sm font-normal text-gray-500" scope="row">Tristique pellentesque ornare diam sapien.</th>
+              <td class="py-5 pr-4">
+                <!-- Heroicon name: mini/check -->
+                <svg class="ml-auto h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+                </svg>
+                <span class="sr-only">Yes</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+
+        <div class="border-t border-gray-200 px-4 pt-5">
+          <a href="#" class="block w-full rounded-md border border-transparent bg-gradient-to-r from-orange-500 to-pink-500 py-2 text-center text-sm font-semibold text-white shadow hover:to-pink-600">Buy Premium</a>
+        </div>
+      </section>
+    </div>
+
+    <!-- lg+ -->
+    <div class="hidden lg:block">
+      <table class="h-px w-full table-fixed">
+        <caption class="sr-only">
+          Pricing plan comparison
+        </caption>
+        <thead>
+          <tr>
+            <th class="pb-4 pl-6 pr-6 text-left text-sm font-medium text-gray-900" scope="col">
+              <span class="sr-only">Feature by</span>
+              <span>Plans</span>
+            </th>
+
+            <th class="w-1/4 px-6 pb-4 text-left text-lg font-medium leading-6 text-gray-900" scope="col">Basic</th>
+
+            <th class="w-1/4 px-6 pb-4 text-left text-lg font-medium leading-6 text-gray-900" scope="col">Essential</th>
+
+            <th class="w-1/4 px-6 pb-4 text-left text-lg font-medium leading-6 text-gray-900" scope="col">Premium</th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-gray-200 border-t border-gray-200">
+          <tr>
+            <th class="py-8 pl-6 pr-6 text-left align-top text-sm font-medium text-gray-900" scope="row">Pricing</th>
+
+            <td class="h-full py-8 px-6 align-top">
+              <div class="flex h-full flex-col justify-between">
+                <div>
+                  <p>
+                    <span class="text-4xl font-bold tracking-tight text-gray-900">$9</span>
+                    <span class="text-base font-medium text-gray-500">/mo</span>
+                  </p>
+                  <p class="mt-4 text-sm text-gray-500">Quis suspendisse ut fermentum neque vivamus non tellus.</p>
+                </div>
+                <a href="#" class="mt-6 block w-full rounded-md border border-transparent bg-gradient-to-r from-orange-500 to-pink-500 py-2 text-center text-sm font-semibold text-white shadow hover:to-pink-600">Buy Basic</a>
+              </div>
+            </td>
+
+            <td class="h-full py-8 px-6 align-top">
+              <div class="flex h-full flex-col justify-between">
+                <div>
+                  <p>
+                    <span class="text-4xl font-bold tracking-tight text-gray-900">$29</span>
+                    <span class="text-base font-medium text-gray-500">/mo</span>
+                  </p>
+                  <p class="mt-4 text-sm text-gray-500">Quis eleifend a tincidunt pellentesque. A tempor in sed.</p>
+                </div>
+                <a href="#" class="mt-6 block w-full rounded-md border border-transparent bg-gradient-to-r from-orange-500 to-pink-500 py-2 text-center text-sm font-semibold text-white shadow hover:to-pink-600">Buy Essential</a>
+              </div>
+            </td>
+
+            <td class="h-full py-8 px-6 align-top">
+              <div class="flex h-full flex-col justify-between">
+                <div>
+                  <p>
+                    <span class="text-4xl font-bold tracking-tight text-gray-900">$59</span>
+                    <span class="text-base font-medium text-gray-500">/mo</span>
+                  </p>
+                  <p class="mt-4 text-sm text-gray-500">Orci volutpat ut sed sed neque, dui eget. Quis tristique non.</p>
+                </div>
+                <a href="#" class="mt-6 block w-full rounded-md border border-transparent bg-gradient-to-r from-orange-500 to-pink-500 py-2 text-center text-sm font-semibold text-white shadow hover:to-pink-600">Buy Premium</a>
+              </div>
+            </td>
+          </tr>
+
+          <tr>
+            <th class="bg-gray-50 py-3 pl-6 text-left text-sm font-medium text-gray-900" colspan="4" scope="colgroup">Features</th>
+          </tr>
+
+          <tr>
+            <th class="py-5 pl-6 pr-6 text-left text-sm font-normal text-gray-500" scope="row">Molestie lobortis massa.</th>
+
+            <td class="py-5 px-6">
+              <!-- Heroicon name: mini/check -->
+              <svg class="h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+              </svg>
+              <span class="sr-only">Included in Basic</span>
+            </td>
+
+            <td class="py-5 px-6">
+              <!-- Heroicon name: mini/check -->
+              <svg class="h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+              </svg>
+              <span class="sr-only">Included in Essential</span>
+            </td>
+
+            <td class="py-5 px-6">
+              <!-- Heroicon name: mini/check -->
+              <svg class="h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+              </svg>
+              <span class="sr-only">Included in Premium</span>
+            </td>
+          </tr>
+
+          <tr>
+            <th class="py-5 pl-6 pr-6 text-left text-sm font-normal text-gray-500" scope="row">Urna purus felis.</th>
+
+            <td class="py-5 px-6">
+              <!-- Heroicon name: mini/check -->
+              <svg class="h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+              </svg>
+              <span class="sr-only">Included in Basic</span>
+            </td>
+
+            <td class="py-5 px-6">
+              <!-- Heroicon name: mini/check -->
+              <svg class="h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+              </svg>
+              <span class="sr-only">Included in Essential</span>
+            </td>
+
+            <td class="py-5 px-6">
+              <!-- Heroicon name: mini/check -->
+              <svg class="h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+              </svg>
+              <span class="sr-only">Included in Premium</span>
+            </td>
+          </tr>
+
+          <tr>
+            <th class="py-5 pl-6 pr-6 text-left text-sm font-normal text-gray-500" scope="row">Tellus pulvinar sit dictum.</th>
+
+            <td class="py-5 px-6">
+              <!-- Heroicon name: mini/minus -->
+              <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H3.75A.75.75 0 013 10z" clip-rule="evenodd" />
+              </svg>
+              <span class="sr-only">Not included in Basic</span>
+            </td>
+
+            <td class="py-5 px-6">
+              <!-- Heroicon name: mini/check -->
+              <svg class="h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+              </svg>
+              <span class="sr-only">Included in Essential</span>
+            </td>
+
+            <td class="py-5 px-6">
+              <!-- Heroicon name: mini/check -->
+              <svg class="h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+              </svg>
+              <span class="sr-only">Included in Premium</span>
+            </td>
+          </tr>
+
+          <tr>
+            <th class="py-5 pl-6 pr-6 text-left text-sm font-normal text-gray-500" scope="row">Convallis.</th>
+
+            <td class="py-5 px-6">
+              <!-- Heroicon name: mini/minus -->
+              <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H3.75A.75.75 0 013 10z" clip-rule="evenodd" />
+              </svg>
+              <span class="sr-only">Not included in Basic</span>
+            </td>
+
+            <td class="py-5 px-6">
+              <span class="block text-sm text-gray-700">Up to 20 users</span>
+            </td>
+
+            <td class="py-5 px-6">
+              <span class="block text-sm text-gray-700">Up to 50 users</span>
+            </td>
+          </tr>
+
+          <tr>
+            <th class="bg-gray-50 py-3 pl-6 text-left text-sm font-medium text-gray-900" colspan="4" scope="colgroup">Reporting</th>
+          </tr>
+
+          <tr>
+            <th class="py-5 pl-6 pr-6 text-left text-sm font-normal text-gray-500" scope="row">Adipiscing.</th>
+
+            <td class="py-5 px-6">
+              <!-- Heroicon name: mini/check -->
+              <svg class="h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+              </svg>
+              <span class="sr-only">Included in Basic</span>
+            </td>
+
+            <td class="py-5 px-6">
+              <!-- Heroicon name: mini/check -->
+              <svg class="h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+              </svg>
+              <span class="sr-only">Included in Essential</span>
+            </td>
+
+            <td class="py-5 px-6">
+              <!-- Heroicon name: mini/check -->
+              <svg class="h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+              </svg>
+              <span class="sr-only">Included in Premium</span>
+            </td>
+          </tr>
+
+          <tr>
+            <th class="py-5 pl-6 pr-6 text-left text-sm font-normal text-gray-500" scope="row">Eget risus integer.</th>
+
+            <td class="py-5 px-6">
+              <!-- Heroicon name: mini/minus -->
+              <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H3.75A.75.75 0 013 10z" clip-rule="evenodd" />
+              </svg>
+              <span class="sr-only">Not included in Basic</span>
+            </td>
+
+            <td class="py-5 px-6">
+              <!-- Heroicon name: mini/check -->
+              <svg class="h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+              </svg>
+              <span class="sr-only">Included in Essential</span>
+            </td>
+
+            <td class="py-5 px-6">
+              <!-- Heroicon name: mini/check -->
+              <svg class="h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+              </svg>
+              <span class="sr-only">Included in Premium</span>
+            </td>
+          </tr>
+
+          <tr>
+            <th class="py-5 pl-6 pr-6 text-left text-sm font-normal text-gray-500" scope="row">Gravida leo urna velit.</th>
+
+            <td class="py-5 px-6">
+              <!-- Heroicon name: mini/minus -->
+              <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H3.75A.75.75 0 013 10z" clip-rule="evenodd" />
+              </svg>
+              <span class="sr-only">Not included in Basic</span>
+            </td>
+
+            <td class="py-5 px-6">
+              <!-- Heroicon name: mini/minus -->
+              <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H3.75A.75.75 0 013 10z" clip-rule="evenodd" />
+              </svg>
+              <span class="sr-only">Not included in Essential</span>
+            </td>
+
+            <td class="py-5 px-6">
+              <!-- Heroicon name: mini/check -->
+              <svg class="h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+              </svg>
+              <span class="sr-only">Included in Premium</span>
+            </td>
+          </tr>
+
+          <tr>
+            <th class="py-5 pl-6 pr-6 text-left text-sm font-normal text-gray-500" scope="row">Elementum ut dapibus mi feugiat cras nisl.</th>
+
+            <td class="py-5 px-6">
+              <!-- Heroicon name: mini/minus -->
+              <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H3.75A.75.75 0 013 10z" clip-rule="evenodd" />
+              </svg>
+              <span class="sr-only">Not included in Basic</span>
+            </td>
+
+            <td class="py-5 px-6">
+              <!-- Heroicon name: mini/minus -->
+              <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H3.75A.75.75 0 013 10z" clip-rule="evenodd" />
+              </svg>
+              <span class="sr-only">Not included in Essential</span>
+            </td>
+
+            <td class="py-5 px-6">
+              <!-- Heroicon name: mini/check -->
+              <svg class="h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+              </svg>
+              <span class="sr-only">Included in Premium</span>
+            </td>
+          </tr>
+
+          <tr>
+            <th class="bg-gray-50 py-3 pl-6 text-left text-sm font-medium text-gray-900" colspan="4" scope="colgroup">Support</th>
+          </tr>
+
+          <tr>
+            <th class="py-5 pl-6 pr-6 text-left text-sm font-normal text-gray-500" scope="row">Sit dignissim.</th>
+
+            <td class="py-5 px-6">
+              <!-- Heroicon name: mini/check -->
+              <svg class="h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+              </svg>
+              <span class="sr-only">Included in Basic</span>
+            </td>
+
+            <td class="py-5 px-6">
+              <!-- Heroicon name: mini/check -->
+              <svg class="h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+              </svg>
+              <span class="sr-only">Included in Essential</span>
+            </td>
+
+            <td class="py-5 px-6">
+              <!-- Heroicon name: mini/check -->
+              <svg class="h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+              </svg>
+              <span class="sr-only">Included in Premium</span>
+            </td>
+          </tr>
+
+          <tr>
+            <th class="py-5 pl-6 pr-6 text-left text-sm font-normal text-gray-500" scope="row">Congue at nibh et.</th>
+
+            <td class="py-5 px-6">
+              <!-- Heroicon name: mini/minus -->
+              <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H3.75A.75.75 0 013 10z" clip-rule="evenodd" />
+              </svg>
+              <span class="sr-only">Not included in Basic</span>
+            </td>
+
+            <td class="py-5 px-6">
+              <!-- Heroicon name: mini/check -->
+              <svg class="h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+              </svg>
+              <span class="sr-only">Included in Essential</span>
+            </td>
+
+            <td class="py-5 px-6">
+              <!-- Heroicon name: mini/check -->
+              <svg class="h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+              </svg>
+              <span class="sr-only">Included in Premium</span>
+            </td>
+          </tr>
+
+          <tr>
+            <th class="py-5 pl-6 pr-6 text-left text-sm font-normal text-gray-500" scope="row">Volutpat feugiat mattis.</th>
+
+            <td class="py-5 px-6">
+              <!-- Heroicon name: mini/minus -->
+              <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H3.75A.75.75 0 013 10z" clip-rule="evenodd" />
+              </svg>
+              <span class="sr-only">Not included in Basic</span>
+            </td>
+
+            <td class="py-5 px-6">
+              <!-- Heroicon name: mini/check -->
+              <svg class="h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+              </svg>
+              <span class="sr-only">Included in Essential</span>
+            </td>
+
+            <td class="py-5 px-6">
+              <!-- Heroicon name: mini/check -->
+              <svg class="h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+              </svg>
+              <span class="sr-only">Included in Premium</span>
+            </td>
+          </tr>
+
+          <tr>
+            <th class="py-5 pl-6 pr-6 text-left text-sm font-normal text-gray-500" scope="row">Tristique pellentesque ornare diam sapien.</th>
+
+            <td class="py-5 px-6">
+              <!-- Heroicon name: mini/minus -->
+              <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H3.75A.75.75 0 013 10z" clip-rule="evenodd" />
+              </svg>
+              <span class="sr-only">Not included in Basic</span>
+            </td>
+
+            <td class="py-5 px-6">
+              <!-- Heroicon name: mini/minus -->
+              <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H3.75A.75.75 0 013 10z" clip-rule="evenodd" />
+              </svg>
+              <span class="sr-only">Not included in Essential</span>
+            </td>
+
+            <td class="py-5 px-6">
+              <!-- Heroicon name: mini/check -->
+              <svg class="h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+              </svg>
+              <span class="sr-only">Included in Premium</span>
+            </td>
+          </tr>
+        </tbody>
+        <tfoot>
+          <tr class="border-t border-gray-200">
+            <th class="sr-only" scope="row">Choose your plan</th>
+
+            <td class="px-6 pt-5">
+              <a href="#" class="block w-full rounded-md border border-transparent bg-gradient-to-r from-orange-500 to-pink-500 py-2 text-center text-sm font-semibold text-white shadow hover:to-pink-600">Buy Basic</a>
+            </td>
+
+            <td class="px-6 pt-5">
+              <a href="#" class="block w-full rounded-md border border-transparent bg-gradient-to-r from-orange-500 to-pink-500 py-2 text-center text-sm font-semibold text-white shadow hover:to-pink-600">Buy Essential</a>
+            </td>
+
+            <td class="px-6 pt-5">
+              <a href="#" class="block w-full rounded-md border border-transparent bg-gradient-to-r from-orange-500 to-pink-500 py-2 text-center text-sm font-semibold text-white shadow hover:to-pink-600">Buy Premium</a>
+            </td>
+          </tr>
+        </tfoot>
+      </table>
+    </div>
+  </div>
+
+  <!-- Logo cloud -->
+  <div class="mx-auto max-w-7xl border-t border-gray-200 py-12 px-4 sm:px-6 lg:py-20 lg:px-8">
+    <div class="grid grid-cols-2 gap-8 md:grid-cols-6 lg:grid-cols-5">
+      <div class="col-span-1 flex justify-center md:col-span-2 lg:col-span-1">
+        <img class="h-12" src="https://tailwindui.com/img/logos/tuple-logo-gray-400.svg" alt="Tuple">
+      </div>
+      <div class="col-span-1 flex justify-center md:col-span-2 lg:col-span-1">
+        <img class="h-12" src="https://tailwindui.com/img/logos/mirage-logo-gray-400.svg" alt="Mirage">
+      </div>
+      <div class="col-span-1 flex justify-center md:col-span-2 lg:col-span-1">
+        <img class="h-12" src="https://tailwindui.com/img/logos/statickit-logo-gray-400.svg" alt="StaticKit">
+      </div>
+      <div class="col-span-1 flex justify-center md:col-span-3 lg:col-span-1">
+        <img class="h-12" src="https://tailwindui.com/img/logos/transistor-logo-gray-400.svg" alt="Transistor">
+      </div>
+      <div class="col-span-2 flex justify-center md:col-span-3 lg:col-span-1">
+        <img class="h-12" src="https://tailwindui.com/img/logos/workcation-logo-gray-400.svg" alt="Workcation">
+      </div>
+    </div>
+  </div>
+
+  <div class="bg-gray-50">
+    <!-- FAQ -->
+    <div class="mx-auto max-w-7xl py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
+      <h2 class="text-center text-3xl font-bold tracking-tight text-gray-900">Frequently asked questions</h2>
+      <div class="mt-12">
+        <dl class="space-y-10 md:grid md:grid-cols-2 md:grid-rows-2 md:gap-x-8 md:gap-y-12 md:space-y-0 lg:grid-cols-3">
+          <div class="space-y-2">
+            <dt class="text-lg font-medium leading-6 text-gray-900">What&#039;s the best thing about Switzerland?</dt>
+            <dd class="text-base text-gray-500">I don&#039;t know, but the flag is a big plus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.</dd>
+          </div>
+
+          <div class="space-y-2">
+            <dt class="text-lg font-medium leading-6 text-gray-900">How do you make holy water?</dt>
+            <dd class="text-base text-gray-500">You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.</dd>
+          </div>
+
+          <div class="space-y-2">
+            <dt class="text-lg font-medium leading-6 text-gray-900">Why do you never see elephants hiding in trees?</dt>
+            <dd class="text-base text-gray-500">Because they&#039;re so good at it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.</dd>
+          </div>
+
+          <div class="space-y-2">
+            <dt class="text-lg font-medium leading-6 text-gray-900">What do you call someone with no body and no nose?</dt>
+            <dd class="text-base text-gray-500">Nobody knows. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.</dd>
+          </div>
+
+          <div class="space-y-2">
+            <dt class="text-lg font-medium leading-6 text-gray-900">Why can&#039;t you hear a pterodactyl go to the bathroom?</dt>
+            <dd class="text-base text-gray-500">Because the pee is silent. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.</dd>
+          </div>
+
+          <div class="space-y-2">
+            <dt class="text-lg font-medium leading-6 text-gray-900">Why did the invisible man turn down the job offer?</dt>
+            <dd class="text-base text-gray-500">He couldn&#039;t see himself doing it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.</dd>
+          </div>
+        </dl>
+      </div>
+    </div>
+  </div>
+
+  <!-- Feature section with brand panel -->
+  <div class="relative">
+    <div class="absolute inset-0 flex flex-col" aria-hidden="true">
+      <div class="flex-1 bg-gray-50"></div>
+      <div class="flex-1"></div>
+    </div>
+    <div class="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+      <div class="overflow-hidden rounded-lg bg-gradient-to-r from-orange-400 to-pink-500 shadow-xl lg:grid lg:grid-cols-2 lg:gap-4">
+        <div class="px-6 pt-10 pb-12 sm:px-16 sm:pt-16 lg:py-16 lg:pr-0 xl:py-20 xl:px-20">
+          <div class="lg:self-center">
+            <h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl">
+              <span class="block">Ready to dive in?</span>
+              <span class="block text-red-900">Start your free trial today.</span>
+            </h2>
+            <p class="mt-4 text-lg leading-6 text-orange-50">Ac euismod vel sit maecenas id pellentesque eu sed consectetur. Malesuada adipiscing sagittis vel nulla nec.</p>
+            <a href="#" class="mt-8 inline-flex items-center rounded-md border border-transparent bg-orange-100 py-3 px-6 text-base font-medium text-red-600 shadow hover:text-red-500">Sign up for free</a>
+          </div>
+        </div>
+        <div class="aspect-w-5 aspect-h-3 -mt-6 md:aspect-w-2 md:aspect-h-1">
+          <img class="translate-x-6 translate-y-6 transform rounded-md object-cover object-left-top sm:translate-x-16 lg:translate-y-20" src="https://tailwindui.com/img/component-images/full-width-with-sidebar.jpg" alt="App screenshot">
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Footer -->
+  <footer class="mx-auto mt-12 max-w-7xl py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
+    <h2 class="sr-only">Footer</h2>
+    <div class="xl:grid xl:grid-cols-3 xl:gap-8">
+      <div class="grid grid-cols-2 gap-8 xl:col-span-2">
+        <div class="md:grid md:grid-cols-2 md:gap-8">
+          <div>
+            <h4 class="text-base font-medium text-gray-900">Solutions</h4>
+            <ul role="list" class="mt-4 space-y-4">
+              <li>
+                <a href="#" class="text-base text-gray-500 hover:text-gray-900">Marketing</a>
+              </li>
+
+              <li>
+                <a href="#" class="text-base text-gray-500 hover:text-gray-900">Analytics</a>
+              </li>
+
+              <li>
+                <a href="#" class="text-base text-gray-500 hover:text-gray-900">Commerce</a>
+              </li>
+
+              <li>
+                <a href="#" class="text-base text-gray-500 hover:text-gray-900">Insights</a>
+              </li>
+            </ul>
+          </div>
+          <div class="mt-12 md:mt-0">
+            <h4 class="text-base font-medium text-gray-900">Support</h4>
+            <ul role="list" class="mt-4 space-y-4">
+              <li>
+                <a href="#" class="text-base text-gray-500 hover:text-gray-900">Pricing</a>
+              </li>
+
+              <li>
+                <a href="#" class="text-base text-gray-500 hover:text-gray-900">Documentation</a>
+              </li>
+
+              <li>
+                <a href="#" class="text-base text-gray-500 hover:text-gray-900">Guides</a>
+              </li>
+
+              <li>
+                <a href="#" class="text-base text-gray-500 hover:text-gray-900">API Status</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div class="md:grid md:grid-cols-2 md:gap-8">
+          <div>
+            <h4 class="text-base font-medium text-gray-900">Company</h4>
+            <ul role="list" class="mt-4 space-y-4">
+              <li>
+                <a href="#" class="text-base text-gray-500 hover:text-gray-900">About</a>
+              </li>
+
+              <li>
+                <a href="#" class="text-base text-gray-500 hover:text-gray-900">Blog</a>
+              </li>
+
+              <li>
+                <a href="#" class="text-base text-gray-500 hover:text-gray-900">Jobs</a>
+              </li>
+
+              <li>
+                <a href="#" class="text-base text-gray-500 hover:text-gray-900">Press</a>
+              </li>
+
+              <li>
+                <a href="#" class="text-base text-gray-500 hover:text-gray-900">Partners</a>
+              </li>
+            </ul>
+          </div>
+          <div class="mt-12 md:mt-0">
+            <h4 class="text-base font-medium text-gray-900">Legal</h4>
+            <ul role="list" class="mt-4 space-y-4">
+              <li>
+                <a href="#" class="text-base text-gray-500 hover:text-gray-900">Claim</a>
+              </li>
+
+              <li>
+                <a href="#" class="text-base text-gray-500 hover:text-gray-900">Privacy</a>
+              </li>
+
+              <li>
+                <a href="#" class="text-base text-gray-500 hover:text-gray-900">Terms</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div class="mt-8 xl:mt-0">
+        <h4 class="text-base font-medium text-gray-900">Subscribe to our newsletter</h4>
+        <p class="mt-4 text-base text-gray-500">The latest news, articles, and resources, sent to your inbox weekly.</p>
+        <form class="mt-4 sm:flex sm:max-w-md">
+          <label for="email-address" class="sr-only">Email address</label>
+          <input type="email" name="email-address" id="email-address" autocomplete="email" required class="w-full min-w-0 rounded-md border-gray-300 bg-white py-2 px-4 placeholder-gray-500 shadow-sm focus:border-orange-500 focus:outline-none focus:ring-orange-500" placeholder="Enter your email">
+          <div class="mt-3 rounded-md sm:mt-0 sm:ml-3 sm:flex-shrink-0">
+            <button type="submit" class="flex w-full items-center justify-center rounded-md border border-transparent bg-orange-100 py-2 px-4 text-base font-medium text-red-600 hover:bg-orange-200 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2">Subscribe</button>
+          </div>
+        </form>
+      </div>
+    </div>
+    <div class="mt-8 border-t border-gray-200 pt-8 md:flex md:items-center md:justify-between">
+      <div class="flex space-x-6 md:order-2">
+        <a href="#" class="text-gray-400 hover:text-gray-500">
+          <span class="sr-only">Facebook</span>
+          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+            <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
+          </svg>
+        </a>
+
+        <a href="#" class="text-gray-400 hover:text-gray-500">
+          <span class="sr-only">Instagram</span>
+          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+            <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd" />
+          </svg>
+        </a>
+
+        <a href="#" class="text-gray-400 hover:text-gray-500">
+          <span class="sr-only">Twitter</span>
+          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
+          </svg>
+        </a>
+
+        <a href="#" class="text-gray-400 hover:text-gray-500">
+          <span class="sr-only">GitHub</span>
+          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+            <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
+          </svg>
+        </a>
+
+        <a href="#" class="text-gray-400 hover:text-gray-500">
+          <span class="sr-only">Dribbble</span>
+          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+            <path fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z" clip-rule="evenodd" />
+          </svg>
+        </a>
+      </div>
+      <p class="mt-8 text-base text-gray-400 md:order-1 md:mt-0">&copy; 2020 Your Company, Inc. All rights reserved.</p>
+    </div>
+  </footer>
+</div>