init
This commit is contained in:
@@ -0,0 +1,46 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="fixed bottom-0 inset-x-0 pb-2 sm:pb-5">
|
||||
<div class="max-w-screen-xl mx-auto px-2 sm:px-6 lg:px-8">
|
||||
<div class="p-2 rounded-lg bg-indigo-600 shadow-lg sm:p-3">
|
||||
<div class="flex items-center justify-between flex-wrap">
|
||||
<div class="w-0 flex-1 flex items-center">
|
||||
<span class="flex p-2 rounded-lg bg-indigo-800">
|
||||
<!-- Heroicon name: speakerphone -->
|
||||
<svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" />
|
||||
</svg>
|
||||
</span>
|
||||
<p class="ml-3 font-medium text-white truncate">
|
||||
<span class="md:hidden">
|
||||
We announced a new product!
|
||||
</span>
|
||||
<span class="hidden md:inline">
|
||||
Big news! We're excited to announce a brand new product.
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="order-3 mt-2 flex-shrink-0 w-full sm:order-2 sm:mt-0 sm:w-auto">
|
||||
<div class="rounded-md shadow-sm">
|
||||
<a href="#" class="flex items-center justify-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-indigo-600 bg-white hover:text-indigo-500 focus:outline-none focus:shadow-outline transition ease-in-out duration-150">
|
||||
Learn more
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-2 flex-shrink-0 sm:order-3 sm:ml-2">
|
||||
<button type="button" class="-mr-1 flex p-2 rounded-md hover:bg-indigo-500 focus:outline-none focus:bg-indigo-500 transition ease-in-out duration-150" aria-label="Dismiss">
|
||||
<!-- Heroicon name: x -->
|
||||
<svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,44 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="bg-indigo-600">
|
||||
<div class="max-w-screen-xl mx-auto py-3 px-3 sm:px-6 lg:px-8">
|
||||
<div class="flex items-center justify-between flex-wrap">
|
||||
<div class="w-0 flex-1 flex items-center">
|
||||
<span class="flex p-2 rounded-lg bg-indigo-800">
|
||||
<!-- Heroicon name: speakerphone -->
|
||||
<svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" />
|
||||
</svg>
|
||||
</span>
|
||||
<p class="ml-3 font-medium text-white truncate">
|
||||
<span class="md:hidden">
|
||||
We announced a new product!
|
||||
</span>
|
||||
<span class="hidden md:inline">
|
||||
Big news! We're excited to announce a brand new product.
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="order-3 mt-2 flex-shrink-0 w-full sm:order-2 sm:mt-0 sm:w-auto">
|
||||
<div class="rounded-md shadow-sm">
|
||||
<a href="#" class="flex items-center justify-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-indigo-600 bg-white hover:text-indigo-500 focus:outline-none focus:shadow-outline transition ease-in-out duration-150">
|
||||
Learn more
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-2 flex-shrink-0 sm:order-3 sm:ml-3">
|
||||
<button type="button" class="-mr-1 flex p-2 rounded-md hover:bg-indigo-500 focus:outline-none focus:bg-indigo-500 sm:-mr-2 transition ease-in-out duration-150" aria-label="Dismiss">
|
||||
<!-- Heroicon name: x -->
|
||||
<svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,34 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="relative bg-indigo-600">
|
||||
<div class="max-w-screen-xl mx-auto py-3 px-3 sm:px-6 lg:px-8">
|
||||
<div class="pr-16 sm:text-center sm:px-16">
|
||||
<p class="font-medium text-white">
|
||||
<span class="md:hidden">
|
||||
We announced a new product!
|
||||
</span>
|
||||
<span class="hidden md:inline">
|
||||
Big news! We're excited to announce a brand new product.
|
||||
</span>
|
||||
<span class="block sm:ml-2 sm:inline-block">
|
||||
<a href="#" class="text-white font-bold underline">
|
||||
Learn more →
|
||||
</a>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="absolute inset-y-0 right-0 pt-1 pr-1 flex items-start sm:pt-1 sm:pr-2 sm:items-start">
|
||||
<button type="button" class="flex p-2 rounded-md hover:bg-indigo-500 focus:outline-none focus:bg-indigo-500 transition ease-in-out duration-150" aria-label="Dismiss">
|
||||
<!-- Heroicon name: x -->
|
||||
<svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
322
tailwindui/components/marketing/elements/banners/index.html
Normal file
322
tailwindui/components/marketing/elements/banners/index.html
Normal file
@@ -0,0 +1,322 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Tailwind UI Components</title>
|
||||
<link href="https://fonts.googleapis.com/css?family=Inter&display=swap" rel="stylesheet"/>
|
||||
<link href="https://cdn.jsdelivr.net/npm/@tailwindcss/ui@latest/dist/tailwind-ui.min.css" rel="stylesheet"/>
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.0.1/dist/alpine.js" defer></script>
|
||||
<link href="https://cdn.jsdelivr.net/npm/highlightjs-themes@1.0.0/darkula.css" rel="stylesheet"/>
|
||||
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/highlight.min.js"></script>
|
||||
<style>
|
||||
* { box-sizing: border-box; }
|
||||
.font-sans { font-family: "Inter", sans-serif; }
|
||||
.hljs {
|
||||
background: #252f3f;
|
||||
color: white;
|
||||
}
|
||||
.hljs-tag {
|
||||
color: white;
|
||||
}
|
||||
.hljs-name {
|
||||
color: #ff8383;
|
||||
}
|
||||
.hljs-attr {
|
||||
color: #ffe484;
|
||||
font-style: italic;
|
||||
}
|
||||
.hljs-string {
|
||||
color: #b5f4a5;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="font-sans antialiased text-gray-900">
|
||||
<main>
|
||||
<div class="py-4 sm:py-12">
|
||||
<div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="pb-2">
|
||||
<nav class="flex items-center text-sm leading-5 font-medium">
|
||||
<a href="/#marketing" class="text-gray-500 hover:text-gray-700 focus:outline-none focus:underline transition duration-150 ease-in-out">
|
||||
Marketing
|
||||
</a>
|
||||
<svg class="flex-shrink-0 mx-2 h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<a href="/#marketing-elements" class="text-gray-500 hover:text-gray-700 focus:outline-none focus:underline transition duration-150 ease-in-out">
|
||||
Elements
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
<h2 class="text-2xl leading-8 font-semibold font-display text-gray-900 sm:text-3xl sm:leading-9">
|
||||
Banners
|
||||
</h2>
|
||||
</div>
|
||||
<div class="mt-6 bg-white max-w-8xl mx-auto sm:px-6 lg:px-8">
|
||||
<div class="max-w-8xl mx-auto">
|
||||
|
||||
<div id="component-94f91271ab2734f5a592a208527825272a44ce56" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-94f91271ab2734f5a592a208527825272a44ce56">Floating at bottom</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/elements/banners/floating_at_bottom.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-4be7d32efb202809e50467abda097ecb45e7d096" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-4be7d32efb202809e50467abda097ecb45e7d096">Header banner</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/elements/banners/header_banner.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-3f1934efebd4192f2376a1095e196deb4147ce84" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-3f1934efebd4192f2376a1095e196deb4147ce84">Header centered</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/elements/banners/header_centered.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-e1c729aed7d858aa4c47f3c00e0d5584edeb0ac0" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-e1c729aed7d858aa4c47f3c00e0d5584edeb0ac0">Sticky footer</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/elements/banners/sticky_footer.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
(function() {
|
||||
const getDocHeight = doc => {
|
||||
doc = doc || document;
|
||||
const body = doc.body;
|
||||
const html = doc.documentElement;
|
||||
const height = Math.max(
|
||||
body.scrollHeight,
|
||||
body.offsetHeight,
|
||||
html.clientHeight,
|
||||
html.scrollHeight,
|
||||
html.offsetHeight
|
||||
);
|
||||
return height;
|
||||
};
|
||||
|
||||
window.resizableIFrame = function() {
|
||||
return {
|
||||
resizing: !1,
|
||||
width: "100%",
|
||||
init: function() {}
|
||||
};
|
||||
};
|
||||
const iframes = document.querySelectorAll("iframe");
|
||||
Array.from(iframes).forEach(iframe => {
|
||||
iframe.addEventListener("load", e => {
|
||||
const iframe = e.srcElement;
|
||||
const doc = iframe.contentDocument || iframe.contentWindow.document;
|
||||
doc.body.classList.add("antialiased", "font-sans", "bg-white")
|
||||
iframe.style.visibility = "hidden";
|
||||
iframe.style.height = "10px";
|
||||
const height = Math.max(getDocHeight(doc), 256) + "px";
|
||||
iframe.style.height = height;
|
||||
iframe.style.visibility = "visible";
|
||||
|
||||
const html = doc.body.innerHTML.trim();
|
||||
const container = iframe.parentElement.parentElement.parentElement;
|
||||
hljs.configure({useBR: false, tabReplace: ' '});
|
||||
const highlighted = hljs.highlight('html', html);
|
||||
const codeElem = container.children[1].querySelector("code");
|
||||
codeElem.innerHTML = highlighted.value;
|
||||
});
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,49 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><!--
|
||||
Make sure you add some bottom padding to pages that include a sticky banner like this to prevent
|
||||
your content from being obscured when the user scrolls to the bottom of the page.
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="fixed inset-x-0 bottom-0">
|
||||
<div class="bg-indigo-600">
|
||||
<div class="max-w-screen-xl mx-auto py-3 px-3 sm:px-6 lg:px-8">
|
||||
<div class="flex items-center justify-between flex-wrap">
|
||||
<div class="w-0 flex-1 flex items-center">
|
||||
<span class="flex p-2 rounded-lg bg-indigo-800">
|
||||
<!-- Heroicon name: speakerphone -->
|
||||
<svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" />
|
||||
</svg>
|
||||
</span>
|
||||
<p class="ml-3 font-medium text-white truncate">
|
||||
<span class="md:hidden">
|
||||
We announced a new product!
|
||||
</span>
|
||||
<span class="hidden md:inline">
|
||||
Big news! We're excited to announce a brand new product.
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="order-3 mt-2 flex-shrink-0 w-full sm:order-2 sm:mt-0 sm:w-auto">
|
||||
<div class="rounded-md shadow-sm">
|
||||
<a href="#" class="flex items-center justify-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-indigo-600 bg-white hover:text-indigo-500 focus:outline-none focus:shadow-outline transition ease-in-out duration-150">
|
||||
Learn more
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-2 flex-shrink-0 sm:order-3 sm:ml-3">
|
||||
<button type="button" class="-mr-1 flex p-2 rounded-md hover:bg-indigo-500 focus:outline-none focus:bg-indigo-500 sm:-mr-2 transition ease-in-out duration-150" aria-label="Dismiss">
|
||||
<!-- Heroicon name: x -->
|
||||
<svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,174 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><!-- This example requires Tailwind CSS v1.4.0+ --><html>
|
||||
<head /><body>
|
||||
<div class="z-0 relative">
|
||||
<div class="relative z-10 bg-white shadow">
|
||||
<div class="max-w-7xl mx-auto flex px-4 py-6 sm:px-6 lg:px-8">
|
||||
<!-- Item active: "text-gray-900", Item inactive: "text-gray-500" -->
|
||||
<button type="button" class="text-gray-500 group inline-flex items-center space-x-2 text-base leading-6 font-medium hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
|
||||
<span>Solutions</span>
|
||||
<!--
|
||||
Heroicon name: chevron-down
|
||||
|
||||
Item active: "text-gray-600", Item inactive: "text-gray-400"
|
||||
-->
|
||||
<svg class="text-gray-400 h-5 w-5 group-hover:text-gray-500 group-focus:text-gray-500 transition ease-in-out duration-150" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
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 inset-x-0 transform shadow-lg">
|
||||
<div class="bg-white">
|
||||
<div class="max-w-7xl mx-auto grid gap-y-6 px-4 py-6 sm:grid-cols-2 sm:gap-8 sm:px-6 sm:py-8 lg:grid-cols-4 lg:px-8 lg:py-12 xl:py-16">
|
||||
<a href="#" class="-m-3 p-3 flex flex-col justify-between space-y-6 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<div class="space-x-4 flex md:h-full lg:flex-col lg:space-x-0 lg:space-y-4">
|
||||
<div class="flex-shrink-0">
|
||||
<span class="inline-flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
|
||||
<!-- Heroicon name: chart-bar -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div class="space-y-2 md:flex-1 md:flex md:flex-col md:justify-between lg:space-y-4">
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Analytics
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Get a better understanding of where your traffic is coming from.
|
||||
</p>
|
||||
</div>
|
||||
<p class="text-sm leading-5 font-medium text-indigo-600">
|
||||
Learn more →
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 flex flex-col justify-between space-y-6 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<div class="space-x-4 flex md:h-full lg:flex-col lg:space-x-0 lg:space-y-4">
|
||||
<div class="flex-shrink-0">
|
||||
<span class="inline-flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
|
||||
<!-- Heroicon name: cursor-click -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122" />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div class="space-y-2 md:flex-1 md:flex md:flex-col md:justify-between lg:space-y-4">
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Engagement
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Speak directly to your customers in a more meaningful way.
|
||||
</p>
|
||||
</div>
|
||||
<p class="text-sm leading-5 font-medium text-indigo-600">
|
||||
Learn more →
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 flex flex-col justify-between space-y-6 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<div class="space-x-4 flex md:h-full lg:flex-col lg:space-x-0 lg:space-y-4">
|
||||
<div class="flex-shrink-0">
|
||||
<span class="inline-flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
|
||||
<!-- Heroicon name: shield-check -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div class="space-y-2 md:flex-1 md:flex md:flex-col md:justify-between lg:space-y-4">
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Security
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Your customer data will be safe and secure.
|
||||
</p>
|
||||
</div>
|
||||
<p class="text-sm leading-5 font-medium text-indigo-600">
|
||||
Learn more →
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 flex flex-col justify-between space-y-6 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<div class="space-x-4 flex md:h-full lg:flex-col lg:space-x-0 lg:space-y-4">
|
||||
<div class="flex-shrink-0">
|
||||
<span class="inline-flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
|
||||
<!-- Heroicon name: view-grid -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div class="space-y-2 md:flex-1 md:flex md:flex-col md:justify-between lg:space-y-4">
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Integrations
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Connect with third-party tools that you're already using.
|
||||
</p>
|
||||
</div>
|
||||
<p class="text-sm leading-5 font-medium text-indigo-600">
|
||||
Learn more →
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gray-50">
|
||||
<div class="max-w-7xl mx-auto space-y-6 px-4 py-5 sm:flex sm:space-y-0 sm:space-x-10 sm:px-6 lg:px-8">
|
||||
<div class="flow-root">
|
||||
<a href="#" class="-m-3 p-3 space-x-3 flex items-center rounded-md text-base leading-6 font-medium text-gray-900 hover:bg-gray-100 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: play -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span>Watch Demo</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flow-root">
|
||||
<a href="#" class="-m-3 p-3 space-x-3 flex items-center rounded-md text-base leading-6 font-medium text-gray-900 hover:bg-gray-100 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: check-circle -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span>View all products</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flow-root">
|
||||
<a href="#" class="-m-3 p-3 space-x-3 flex items-center rounded-md text-base leading-6 font-medium text-gray-900 hover:bg-gray-100 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: phone -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
|
||||
</svg>
|
||||
<span>Contact Sales</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,185 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><!-- This example requires Tailwind CSS v1.4.0+ --><html>
|
||||
<head /><body>
|
||||
<div class="z-0 relative">
|
||||
<div class="relative z-10 bg-white shadow">
|
||||
<div class="max-w-7xl mx-auto flex px-4 py-6 sm:px-6 lg:px-8">
|
||||
<!-- Item active: "text-gray-900", Item inactive: "text-gray-500" -->
|
||||
<button type="button" class="text-gray-500 group inline-flex items-center space-x-2 text-base leading-6 font-medium hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
|
||||
<span>Solutions</span>
|
||||
<!--
|
||||
Heroicon name: chevron-down
|
||||
|
||||
Item active: "text-gray-600", Item inactive: "text-gray-400"
|
||||
-->
|
||||
<svg class="text-gray-400 h-5 w-5 group-hover:text-gray-500 group-focus:text-gray-500 transition ease-in-out duration-150" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
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 inset-x-0 transform shadow-lg">
|
||||
<div class="absolute inset-0 flex">
|
||||
<div class="bg-white w-1/2"></div>
|
||||
<div class="bg-gray-50 w-1/2"></div>
|
||||
</div>
|
||||
<div class="relative max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2">
|
||||
<nav class="grid gap-y-10 px-4 py-8 bg-white sm:grid-cols-2 sm:gap-x-8 sm:py-12 sm:px-6 lg:px-8 xl:pr-12">
|
||||
<div class="space-y-5">
|
||||
<h3 class="text-sm leading-5 font-medium tracking-wide text-gray-500 uppercase">
|
||||
Company
|
||||
</h3>
|
||||
<ul class="space-y-6">
|
||||
<li class="flow-root">
|
||||
<a href="#" class="-m-3 p-3 flex items-center space-x-4 rounded-md text-base leading-6 font-medium text-gray-900 hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: information-circle -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span>About</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="flow-root">
|
||||
<a href="#" class="-m-3 p-3 flex items-center space-x-4 rounded-md text-base leading-6 font-medium text-gray-900 hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: office-building -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
||||
</svg>
|
||||
<span>Customers</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="flow-root">
|
||||
<a href="#" class="-m-3 p-3 flex items-center space-x-4 rounded-md text-base leading-6 font-medium text-gray-900 hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: newspaper -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z" />
|
||||
</svg>
|
||||
<span>Press</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="flow-root">
|
||||
<a href="#" class="-m-3 p-3 flex items-center space-x-4 rounded-md text-base leading-6 font-medium text-gray-900 hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: briefcase -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<span>Careers</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="flow-root">
|
||||
<a href="#" class="-m-3 p-3 flex items-center space-x-4 rounded-md text-base leading-6 font-medium text-gray-900 hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: shield-check -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
<span>Privacy</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="space-y-5">
|
||||
<h3 class="text-sm leading-5 font-medium tracking-wide text-gray-500 uppercase">
|
||||
Resources
|
||||
</h3>
|
||||
<ul class="space-y-6">
|
||||
<li class="flow-root">
|
||||
<a href="#" class="-m-3 p-3 flex items-center space-x-4 rounded-md text-base leading-6 font-medium text-gray-900 hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: user-group -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
|
||||
</svg>
|
||||
<span>Community</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="flow-root">
|
||||
<a href="#" class="-m-3 p-3 flex items-center space-x-4 rounded-md text-base leading-6 font-medium text-gray-900 hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: globe-alt -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
|
||||
</svg>
|
||||
<span>Partners</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="flow-root">
|
||||
<a href="#" class="-m-3 p-3 flex items-center space-x-4 rounded-md text-base leading-6 font-medium text-gray-900 hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: bookmark-alt -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 4v12l-4-2-4 2V4M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<span>Guides</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="flow-root">
|
||||
<a href="#" class="-m-3 p-3 flex items-center space-x-4 rounded-md text-base leading-6 font-medium text-gray-900 hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: desktop-computer -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<span>Webinars</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="space-y-6 bg-gray-50 px-4 py-8 sm:py-12 sm:px-6 lg:px-8 xl:pl-12">
|
||||
<div class="space-y-6">
|
||||
<h3 class="text-sm leading-5 font-medium tracking-wide text-gray-500 uppercase">
|
||||
From the blog
|
||||
</h3>
|
||||
<ul class="space-y-6">
|
||||
<li class="flow-root">
|
||||
<a href="#" class="-m-3 p-3 flex rounded-lg hover:bg-gray-100 transition ease-in-out duration-150 sm:space-x-8">
|
||||
<div class="hidden sm:block flex-shrink-0">
|
||||
<img class="w-32 h-20 object-cover rounded-md" src="https://images.unsplash.com/photo-1558478551-1a378f63328e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2849&q=80" alt="" />
|
||||
</div>
|
||||
<div class="space-y-1 min-w-0 flex-1">
|
||||
<h4 class="text-base leading-6 font-medium text-gray-900 truncate">
|
||||
Boost your conversion rate
|
||||
</h4>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Eget ullamcorper ac ut vulputate fames nec mattis pellentesque elementum. Viverra tempor id mus.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="flow-root">
|
||||
<a href="#" class="-m-3 p-3 flex rounded-lg hover:bg-gray-100 transition ease-in-out duration-150 sm:space-x-8">
|
||||
<div class="hidden sm:block flex-shrink-0">
|
||||
<img class="w-32 h-20 object-cover rounded-md" src="https://images.unsplash.com/1/apple-gear-looking-pretty.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80" alt="" />
|
||||
</div>
|
||||
<div class="space-y-1 min-w-0 flex-1">
|
||||
<h4 class="text-base leading-6 font-medium text-gray-900 truncate">
|
||||
How to use search engine optimization to drive traffic to your site
|
||||
</h4>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Eget ullamcorper ac ut vulputate fames nec mattis pellentesque elementum. Viverra tempor id mus.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="text-sm leading-5 font-medium">
|
||||
<a href="#" class="text-indigo-600 hover:text-indigo-500 transition ease-in-out duration-150">
|
||||
View all posts →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
430
tailwindui/components/marketing/elements/flyout-menus/index.html
Normal file
430
tailwindui/components/marketing/elements/flyout-menus/index.html
Normal file
@@ -0,0 +1,430 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Tailwind UI Components</title>
|
||||
<link href="https://fonts.googleapis.com/css?family=Inter&display=swap" rel="stylesheet"/>
|
||||
<link href="https://cdn.jsdelivr.net/npm/@tailwindcss/ui@latest/dist/tailwind-ui.min.css" rel="stylesheet"/>
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.0.1/dist/alpine.js" defer></script>
|
||||
<link href="https://cdn.jsdelivr.net/npm/highlightjs-themes@1.0.0/darkula.css" rel="stylesheet"/>
|
||||
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/highlight.min.js"></script>
|
||||
<style>
|
||||
* { box-sizing: border-box; }
|
||||
.font-sans { font-family: "Inter", sans-serif; }
|
||||
.hljs {
|
||||
background: #252f3f;
|
||||
color: white;
|
||||
}
|
||||
.hljs-tag {
|
||||
color: white;
|
||||
}
|
||||
.hljs-name {
|
||||
color: #ff8383;
|
||||
}
|
||||
.hljs-attr {
|
||||
color: #ffe484;
|
||||
font-style: italic;
|
||||
}
|
||||
.hljs-string {
|
||||
color: #b5f4a5;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="font-sans antialiased text-gray-900">
|
||||
<main>
|
||||
<div class="py-4 sm:py-12">
|
||||
<div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="pb-2">
|
||||
<nav class="flex items-center text-sm leading-5 font-medium">
|
||||
<a href="/#marketing" class="text-gray-500 hover:text-gray-700 focus:outline-none focus:underline transition duration-150 ease-in-out">
|
||||
Marketing
|
||||
</a>
|
||||
<svg class="flex-shrink-0 mx-2 h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<a href="/#marketing-elements" class="text-gray-500 hover:text-gray-700 focus:outline-none focus:underline transition duration-150 ease-in-out">
|
||||
Elements
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
<h2 class="text-2xl leading-8 font-semibold font-display text-gray-900 sm:text-3xl sm:leading-9">
|
||||
Flyout Menus
|
||||
</h2>
|
||||
</div>
|
||||
<div class="mt-6 bg-white max-w-8xl mx-auto sm:px-6 lg:px-8">
|
||||
<div class="max-w-8xl mx-auto">
|
||||
|
||||
<div id="component-60bfee138db93a4e0c99456af24ef0c40e4422be" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-60bfee138db93a4e0c99456af24ef0c40e4422be">Full-width two-columns</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/elements/flyout-menus/full_width_two_columns.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-08057420fc97b1eebc3232e87b1e3202a04fcf79" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-08057420fc97b1eebc3232e87b1e3202a04fcf79">Full-width</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/elements/flyout-menus/full_width.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-c014f9048b8da02e05b5973e99e6cf94a1d8779e" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-c014f9048b8da02e05b5973e99e6cf94a1d8779e">Simple</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/elements/flyout-menus/simple.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-f2fb7aee19349d29a00f72940dee4f8e89cd3f5e" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-f2fb7aee19349d29a00f72940dee4f8e89cd3f5e">Stacked with footer actions</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/elements/flyout-menus/stacked_with_footer_actions.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-ff2c904e503db85f6f564fcb2963d9f59dfe88b9" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-ff2c904e503db85f6f564fcb2963d9f59dfe88b9">Stacked with footer list</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/elements/flyout-menus/stacked_with_footer_list.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-864cb55fb4a0cbdfc5515ade520a221ade132f7f" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-864cb55fb4a0cbdfc5515ade520a221ade132f7f">Two-column with solid icons</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/elements/flyout-menus/two_column_with_solid_icons.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
(function() {
|
||||
const getDocHeight = doc => {
|
||||
doc = doc || document;
|
||||
const body = doc.body;
|
||||
const html = doc.documentElement;
|
||||
const height = Math.max(
|
||||
body.scrollHeight,
|
||||
body.offsetHeight,
|
||||
html.clientHeight,
|
||||
html.scrollHeight,
|
||||
html.offsetHeight
|
||||
);
|
||||
return height;
|
||||
};
|
||||
|
||||
window.resizableIFrame = function() {
|
||||
return {
|
||||
resizing: !1,
|
||||
width: "100%",
|
||||
init: function() {}
|
||||
};
|
||||
};
|
||||
const iframes = document.querySelectorAll("iframe");
|
||||
Array.from(iframes).forEach(iframe => {
|
||||
iframe.addEventListener("load", e => {
|
||||
const iframe = e.srcElement;
|
||||
const doc = iframe.contentDocument || iframe.contentWindow.document;
|
||||
doc.body.classList.add("antialiased", "font-sans", "bg-white")
|
||||
iframe.style.visibility = "hidden";
|
||||
iframe.style.height = "10px";
|
||||
const height = Math.max(getDocHeight(doc), 256) + "px";
|
||||
iframe.style.height = height;
|
||||
iframe.style.visibility = "visible";
|
||||
|
||||
const html = doc.body.innerHTML.trim();
|
||||
const container = iframe.parentElement.parentElement.parentElement;
|
||||
hljs.configure({useBR: false, tabReplace: ' '});
|
||||
const highlighted = hljs.highlight('html', html);
|
||||
const codeElem = container.children[1].querySelector("code");
|
||||
codeElem.innerHTML = highlighted.value;
|
||||
});
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,80 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><!-- This example requires Tailwind CSS v1.4.0+ --><html>
|
||||
<head /><body>
|
||||
<div class="relative">
|
||||
<!-- Item active: "text-gray-900", Item inactive: "text-gray-500" -->
|
||||
<button type="button" class="group text-gray-500 inline-flex items-center space-x-2 text-base leading-6 font-medium hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
|
||||
<span>Solutions</span>
|
||||
<!--
|
||||
Heroicon name: chevron-down
|
||||
|
||||
Item active: "text-gray-600", Item inactive: "text-gray-400"
|
||||
-->
|
||||
<svg class="text-gray-400 h-5 w-5 group-hover:text-gray-500 group-focus:text-gray-500 transition ease-in-out duration-150" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!--
|
||||
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 transform -translate-x-1/2 mt-3 px-2 w-screen max-w-xs sm:px-0">
|
||||
<div class="rounded-lg shadow-lg">
|
||||
<div class="rounded-lg shadow-xs overflow-hidden">
|
||||
<div class="z-20 relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8">
|
||||
<a href="#" class="-m-3 p-3 block space-y-1 rounded-md hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Blog
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Learn about tips, product updates and company culture.
|
||||
</p>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 block space-y-1 rounded-md hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Help Center
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Get all of your questions answered in our forums of contact support.
|
||||
</p>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 block space-y-1 rounded-md hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Guides
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Learn how to maximize our platform to get the most out of it.
|
||||
</p>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 block space-y-1 rounded-md hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Events
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Check out webinars with experts and learn about our annual conference.
|
||||
</p>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 block space-y-1 rounded-md hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Security
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Understand how we take your privacy seriously.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,131 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><!-- This example requires Tailwind CSS v1.4.0+ --><html>
|
||||
<head /><body>
|
||||
<div class="relative">
|
||||
<!-- Item active: "text-gray-900", Item inactive: "text-gray-500" -->
|
||||
<button type="button" class="group text-gray-500 inline-flex items-center space-x-2 text-base leading-6 font-medium hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
|
||||
<span>Solutions</span>
|
||||
<!--
|
||||
Heroicon name: chevron-down
|
||||
|
||||
Item active: "text-gray-600", Item inactive: "text-gray-400"
|
||||
-->
|
||||
<svg class="text-gray-400 h-5 w-5 group-hover:text-gray-500 group-focus:text-gray-500 transition ease-in-out duration-150" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!--
|
||||
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 transform -translate-x-1/2 mt-3 px-2 w-screen max-w-md sm:px-0">
|
||||
<div class="rounded-lg shadow-lg">
|
||||
<div class="rounded-lg shadow-xs overflow-hidden">
|
||||
<div class="z-20 relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8">
|
||||
<a href="#" class="-m-3 p-3 flex items-start space-x-4 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: chart-bar -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||
</svg>
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Analytics
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Get a better understanding of where your traffic is coming from.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 flex items-start space-x-4 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: cursor-click -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122" />
|
||||
</svg>
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Engagement
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Speak directly to your customers in a more meaningful way.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 flex items-start space-x-4 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: shield-check -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Security
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Your customers data will be safe and secure.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 flex items-start space-x-4 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: view-grid -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
|
||||
</svg>
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Integrations
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Connect with third-party tools that you’re already using.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 flex items-start space-x-4 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: refresh -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||
</svg>
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Automations
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Build strategic funnels that will drive your customers to convert
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="px-5 py-5 bg-gray-50 space-y-6 sm:flex sm:space-y-0 sm:space-x-10 sm:px-8">
|
||||
<div class="flow-root">
|
||||
<a href="#" class="-m-3 p-3 flex items-center space-x-3 rounded-md text-base leading-6 font-medium text-gray-900 hover:bg-gray-100 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: play -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span>Watch Demo</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flow-root">
|
||||
<a href="#" class="-m-3 p-3 flex items-center space-x-3 rounded-md text-base leading-6 font-medium text-gray-900 hover:bg-gray-100 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: phone -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
|
||||
</svg>
|
||||
<span>Contact Sales</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,125 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><!-- This example requires Tailwind CSS v1.4.0+ --><html>
|
||||
<head /><body>
|
||||
<div class="relative">
|
||||
<!-- Item active: "text-gray-900", Item inactive: "text-gray-500" -->
|
||||
<button type="button" class="group text-gray-500 inline-flex items-center space-x-2 text-base leading-6 font-medium hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
|
||||
<span>Solutions</span>
|
||||
<!--
|
||||
Heroicon name: chevron-down
|
||||
|
||||
Item active: "text-gray-600", Item inactive: "text-gray-400"
|
||||
-->
|
||||
<svg class="text-gray-400 h-5 w-5 group-hover:text-gray-500 group-focus:text-gray-500 transition ease-in-out duration-150" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!--
|
||||
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 transform -translate-x-1/2 mt-3 px-2 w-screen max-w-md sm:px-0">
|
||||
<div class="rounded-lg shadow-lg">
|
||||
<div class="rounded-lg shadow-xs overflow-hidden">
|
||||
<div class="z-20 relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8">
|
||||
<a href="#" class="-m-3 p-3 flex items-start space-x-4 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: support -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||
</svg>
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Help Center
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Get all of your questions answered in our forums or contact support.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 flex items-start space-x-4 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: bookmark-alt -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 4v12l-4-2-4 2V4M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Guides
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Learn how to maximize our platform to get the most out of it.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 flex items-start space-x-4 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: calendar -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Events
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
See what meet-ups and other events we might be planning near you.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 flex items-start space-x-4 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: shield-check -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Security
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Understand how we take your privacy seriously.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="px-5 py-5 bg-gray-50 space-y-5 sm:px-8 sm:py-8">
|
||||
<div class="space-y-4">
|
||||
<h3 class="text-sm leading-5 tracking-wide font-medium text-gray-500 uppercase">
|
||||
Recent Posts
|
||||
</h3>
|
||||
<ul class="space-y-4">
|
||||
<li class="text-base leading-6 truncate">
|
||||
<a href="#" class="font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
|
||||
Boost your conversion rate
|
||||
</a>
|
||||
</li>
|
||||
<li class="text-base leading-6 truncate">
|
||||
<a href="#" class="font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
|
||||
How to use search engine optimization to drive traffic to your site
|
||||
</a>
|
||||
</li>
|
||||
<li class="text-base leading-6 truncate">
|
||||
<a href="#" class="font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
|
||||
Improve your customer experience
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="text-sm leading-5">
|
||||
<a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 transition ease-in-out duration-150">
|
||||
View all posts →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,151 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><!-- This example requires Tailwind CSS v1.4.0+ --><html>
|
||||
<head /><body>
|
||||
<div class="relative">
|
||||
<!-- Item active: "text-gray-900", Item inactive: "text-gray-500" -->
|
||||
<button type="button" class="group text-gray-500 inline-flex items-center space-x-2 text-base leading-6 font-medium hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
|
||||
<span>Solutions</span>
|
||||
<!--
|
||||
Heroicon name: chevron-down
|
||||
|
||||
Item active: "text-gray-600", Item inactive: "text-gray-400"
|
||||
-->
|
||||
<svg class="text-gray-400 h-5 w-5 group-hover:text-gray-500 group-focus:text-gray-500 transition ease-in-out duration-150" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!--
|
||||
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 transform -translate-x-1/2 mt-3 px-2 w-screen max-w-md sm:px-0 lg:max-w-3xl">
|
||||
<div class="rounded-lg shadow-lg">
|
||||
<div class="rounded-lg shadow-xs overflow-hidden">
|
||||
<div class="z-20 relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8 lg:grid-cols-2">
|
||||
<a href="#" class="-m-3 p-3 flex items-start space-x-4 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
|
||||
<!-- Heroicon name: chart-bar -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Analytics
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Get a better understanding of where your traffic is coming from.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 flex items-start space-x-4 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
|
||||
<!-- Heroicon name: cursor-click -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Engagement
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Speak directly to your customers in a more meaningful way.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 flex items-start space-x-4 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
|
||||
<!-- Heroicon name: shield-check -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Security
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Your customers data will be safe and secure.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 flex items-start space-x-4 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
|
||||
<!-- Heroicon name: view-grid -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Integrations
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Connect with third-party tools that you’re already using.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 flex items-start space-x-4 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
|
||||
<!-- Heroicon name: refresh -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Automations
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Build strategic funnels that will drive your customers to convert
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 flex items-start space-x-4 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
|
||||
<!-- Heroicon name: document-report -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Reports
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Get detailed reports that will help you make more informed decisions
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="p-5 bg-gray-50 sm:p-8">
|
||||
<a href="#" class="-m-3 p-3 flow-root space-y-1 rounded-md hover:bg-gray-100 transition ease-in-out duration-150">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="text-base leading-6 font-medium text-gray-900">
|
||||
Enterprise
|
||||
</div>
|
||||
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium leading-5 bg-indigo-100 text-indigo-800">
|
||||
New
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Empower your entire team with even more advanced tools.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,410 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><!-- This example requires Tailwind CSS v1.4.0+ --><html>
|
||||
<head /><body>
|
||||
<div class="relative bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6">
|
||||
<div class="flex justify-between items-center border-b-2 border-gray-100 py-6 md:justify-start md:space-x-10">
|
||||
<div class="lg:w-0 lg:flex-1">
|
||||
<a href="#" class="flex">
|
||||
<img class="h-8 w-auto sm:h-10" src="https://tailwindui.com/img/logos/v1/workflow-mark-on-white.svg" alt="Workflow" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="-mr-2 -my-2 md:hidden">
|
||||
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
|
||||
<!-- Heroicon name: menu -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<nav class="hidden md:flex space-x-10">
|
||||
<div class="relative">
|
||||
<!-- Item active: "text-gray-900", Item inactive: "text-gray-500" -->
|
||||
<button type="button" class="text-gray-500 group inline-flex items-center space-x-2 text-base leading-6 font-medium hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
|
||||
<span>Solutions</span>
|
||||
<!--
|
||||
Heroicon name: chevron-down
|
||||
|
||||
Item active: "text-gray-600", Item inactive: "text-gray-400"
|
||||
-->
|
||||
<svg class="text-gray-400 h-5 w-5 group-hover:text-gray-500 group-focus:text-gray-500 transition ease-in-out duration-150" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" 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 -ml-4 mt-3 transform px-2 w-screen max-w-md sm:px-0 lg:ml-0 lg:left-1/2 lg:-translate-x-1/2">
|
||||
<div class="rounded-lg shadow-lg">
|
||||
<div class="rounded-lg shadow-xs overflow-hidden">
|
||||
<div class="z-20 relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8">
|
||||
<a href="#" class="-m-3 p-3 flex items-start space-x-4 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: chart-bar -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||
</svg>
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Analytics
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Get a better understanding of where your traffic is coming from.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 flex items-start space-x-4 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: cursor-click -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122" />
|
||||
</svg>
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Engagement
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Speak directly to your customers in a more meaningful way.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 flex items-start space-x-4 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: shield-check -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Security
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Your customers data will be safe and secure.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 flex items-start space-x-4 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: view-grid -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
|
||||
</svg>
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Integrations
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Connect with third-party tools that you’re already using.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 flex items-start space-x-4 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: refresh -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||
</svg>
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Automations
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Build strategic funnels that will drive your customers to convert
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="px-5 py-5 bg-gray-50 space-y-6 sm:flex sm:space-y-0 sm:space-x-10 sm:px-8">
|
||||
<div class="flow-root">
|
||||
<a href="#" class="-m-3 p-3 flex items-center space-x-3 rounded-md text-base leading-6 font-medium text-gray-900 hover:bg-gray-100 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: play -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span>Watch Demo</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flow-root">
|
||||
<a href="#" class="-m-3 p-3 flex items-center space-x-3 rounded-md text-base leading-6 font-medium text-gray-900 hover:bg-gray-100 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: phone -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
|
||||
</svg>
|
||||
<span>Contact Sales</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="#" class="text-base leading-6 font-medium text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
|
||||
Pricing
|
||||
</a>
|
||||
<a href="#" class="text-base leading-6 font-medium text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
|
||||
Docs
|
||||
</a>
|
||||
|
||||
<div class="relative">
|
||||
<!-- Item active: "text-gray-900", Item inactive: "text-gray-500" -->
|
||||
<button type="button" class="text-gray-500 inline-flex items-center space-x-2 text-base leading-6 font-medium hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
|
||||
<span>More</span>
|
||||
<!--
|
||||
Heroicon name: chevron-down
|
||||
|
||||
Item active: "text-gray-600", Item inactive: "text-gray-400"
|
||||
-->
|
||||
<svg class="text-gray-400 h-5 w-5 group-hover:text-gray-500 group-focus:text-gray-500 transition ease-in-out duration-150" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" 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 transform -translate-x-1/2 mt-3 px-2 w-screen max-w-md sm:px-0">
|
||||
<div class="rounded-lg shadow-lg">
|
||||
<div class="rounded-lg shadow-xs overflow-hidden">
|
||||
<div class="z-20 relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8">
|
||||
<a href="#" class="-m-3 p-3 flex items-start space-x-4 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: support -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||
</svg>
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Help Center
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Get all of your questions answered in our forums or contact support.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 flex items-start space-x-4 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: bookmark-alt -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 4v12l-4-2-4 2V4M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Guides
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Learn how to maximize our platform to get the most out of it.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 flex items-start space-x-4 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: calendar -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Events
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
See what meet-ups and other events we might be planning near you.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 flex items-start space-x-4 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: shield-check -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Security
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Understand how we take your privacy seriously.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="px-5 py-5 bg-gray-50 space-y-5 sm:px-8 sm:py-8">
|
||||
<div class="space-y-4">
|
||||
<h3 class="text-sm leading-5 tracking-wide font-medium text-gray-500 uppercase">
|
||||
Recent Posts
|
||||
</h3>
|
||||
<ul class="space-y-4">
|
||||
<li class="text-base leading-6 truncate">
|
||||
<a href="#" class="font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
|
||||
Boost your conversion rate
|
||||
</a>
|
||||
</li>
|
||||
<li class="text-base leading-6 truncate">
|
||||
<a href="#" class="font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
|
||||
How to use search engine optimization to drive traffic to your site
|
||||
</a>
|
||||
</li>
|
||||
<li class="text-base leading-6 truncate">
|
||||
<a href="#" class="font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
|
||||
Improve your customer experience
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="text-sm leading-5">
|
||||
<a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 transition ease-in-out duration-150">
|
||||
View all posts →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="hidden md:flex items-center justify-end space-x-8 md:flex-1 lg:w-0">
|
||||
<a href="#" class="whitespace-no-wrap text-base leading-6 font-medium text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900">
|
||||
Sign in
|
||||
</a>
|
||||
<span class="inline-flex rounded-md shadow-sm">
|
||||
<a href="#" class="whitespace-no-wrap inline-flex items-center justify-center px-4 py-2 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition ease-in-out duration-150">
|
||||
Sign up
|
||||
</a>
|
||||
</span>
|
||||
</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 top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden">
|
||||
<div class="rounded-lg shadow-lg">
|
||||
<div class="rounded-lg shadow-xs bg-white divide-y-2 divide-gray-50">
|
||||
<div class="pt-5 pb-6 px-5 space-y-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/v1/workflow-mark-on-white.svg" alt="Workflow" />
|
||||
</div>
|
||||
<div class="-mr-2">
|
||||
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
|
||||
<!-- Heroicon name: x -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<nav class="grid gap-y-8">
|
||||
<a href="#" class="-m-3 p-3 flex items-center space-x-3 rounded-md hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: chart-bar -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||
</svg>
|
||||
<div class="text-base leading-6 font-medium text-gray-900">
|
||||
Analytics
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 flex items-center space-x-3 rounded-md hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: cursor-click -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122" />
|
||||
</svg>
|
||||
<div class="text-base leading-6 font-medium text-gray-900">
|
||||
Engagement
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 flex items-center space-x-3 rounded-md hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: shield-check -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
<div class="text-base leading-6 font-medium text-gray-900">
|
||||
Security
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 flex items-center space-x-3 rounded-md hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: view-grid -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
|
||||
</svg>
|
||||
<div class="text-base leading-6 font-medium text-gray-900">
|
||||
Integrations
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 flex items-center space-x-3 rounded-md hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: refresh -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||
</svg>
|
||||
<div class="text-base leading-6 font-medium text-gray-900">
|
||||
Automations
|
||||
</div>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="py-6 px-5 space-y-6">
|
||||
<div class="grid grid-cols-2 gap-y-4 gap-x-8">
|
||||
<a href="#" class="text-base leading-6 font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
|
||||
Pricing
|
||||
</a>
|
||||
<a href="#" class="text-base leading-6 font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
|
||||
Docs
|
||||
</a>
|
||||
<a href="#" class="text-base leading-6 font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
|
||||
Enterprise
|
||||
</a>
|
||||
<a href="#" class="text-base leading-6 font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
|
||||
Blog
|
||||
</a>
|
||||
<a href="#" class="text-base leading-6 font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
|
||||
Help Center
|
||||
</a>
|
||||
<a href="#" class="text-base leading-6 font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
|
||||
Guides
|
||||
</a>
|
||||
<a href="#" class="text-base leading-6 font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
|
||||
Security
|
||||
</a>
|
||||
<a href="#" class="text-base leading-6 font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
|
||||
Events
|
||||
</a>
|
||||
</div>
|
||||
<div class="space-y-6">
|
||||
<span class="w-full flex rounded-md shadow-sm">
|
||||
<a href="#" class="w-full flex items-center justify-center px-4 py-2 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition ease-in-out duration-150">
|
||||
Sign up
|
||||
</a>
|
||||
</span>
|
||||
<p class="text-center text-base leading-6 font-medium text-gray-500">
|
||||
Existing customer?
|
||||
<a href="#" class="text-indigo-600 hover:text-indigo-500 transition ease-in-out duration-150">
|
||||
Sign in
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
322
tailwindui/components/marketing/elements/headers/index.html
Normal file
322
tailwindui/components/marketing/elements/headers/index.html
Normal file
@@ -0,0 +1,322 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Tailwind UI Components</title>
|
||||
<link href="https://fonts.googleapis.com/css?family=Inter&display=swap" rel="stylesheet"/>
|
||||
<link href="https://cdn.jsdelivr.net/npm/@tailwindcss/ui@latest/dist/tailwind-ui.min.css" rel="stylesheet"/>
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.0.1/dist/alpine.js" defer></script>
|
||||
<link href="https://cdn.jsdelivr.net/npm/highlightjs-themes@1.0.0/darkula.css" rel="stylesheet"/>
|
||||
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/highlight.min.js"></script>
|
||||
<style>
|
||||
* { box-sizing: border-box; }
|
||||
.font-sans { font-family: "Inter", sans-serif; }
|
||||
.hljs {
|
||||
background: #252f3f;
|
||||
color: white;
|
||||
}
|
||||
.hljs-tag {
|
||||
color: white;
|
||||
}
|
||||
.hljs-name {
|
||||
color: #ff8383;
|
||||
}
|
||||
.hljs-attr {
|
||||
color: #ffe484;
|
||||
font-style: italic;
|
||||
}
|
||||
.hljs-string {
|
||||
color: #b5f4a5;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="font-sans antialiased text-gray-900">
|
||||
<main>
|
||||
<div class="py-4 sm:py-12">
|
||||
<div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="pb-2">
|
||||
<nav class="flex items-center text-sm leading-5 font-medium">
|
||||
<a href="/#marketing" class="text-gray-500 hover:text-gray-700 focus:outline-none focus:underline transition duration-150 ease-in-out">
|
||||
Marketing
|
||||
</a>
|
||||
<svg class="flex-shrink-0 mx-2 h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<a href="/#marketing-elements" class="text-gray-500 hover:text-gray-700 focus:outline-none focus:underline transition duration-150 ease-in-out">
|
||||
Elements
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
<h2 class="text-2xl leading-8 font-semibold font-display text-gray-900 sm:text-3xl sm:leading-9">
|
||||
Headers
|
||||
</h2>
|
||||
</div>
|
||||
<div class="mt-6 bg-white max-w-8xl mx-auto sm:px-6 lg:px-8">
|
||||
<div class="max-w-8xl mx-auto">
|
||||
|
||||
<div id="component-40a500472bcab53699700502af34d1170220d5e8" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-40a500472bcab53699700502af34d1170220d5e8">Centered with bottom border</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/elements/headers/centered_with_bottom_border.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-c2e701938a7a48c4c945617860a9c8860e4e60f2" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-c2e701938a7a48c4c945617860a9c8860e4e60f2">Simple links centered</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/elements/headers/simple_links_centered.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-52291c6cc6d79fc6bf173b41b8dd304934914501" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-52291c6cc6d79fc6bf173b41b8dd304934914501">Simple links on left</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/elements/headers/simple_links_on_left.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-ea50413edcfda3b83cabd2367659d548203f0c52" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-ea50413edcfda3b83cabd2367659d548203f0c52">With full-width flyouts</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/elements/headers/with_full_width_flyouts.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
(function() {
|
||||
const getDocHeight = doc => {
|
||||
doc = doc || document;
|
||||
const body = doc.body;
|
||||
const html = doc.documentElement;
|
||||
const height = Math.max(
|
||||
body.scrollHeight,
|
||||
body.offsetHeight,
|
||||
html.clientHeight,
|
||||
html.scrollHeight,
|
||||
html.offsetHeight
|
||||
);
|
||||
return height;
|
||||
};
|
||||
|
||||
window.resizableIFrame = function() {
|
||||
return {
|
||||
resizing: !1,
|
||||
width: "100%",
|
||||
init: function() {}
|
||||
};
|
||||
};
|
||||
const iframes = document.querySelectorAll("iframe");
|
||||
Array.from(iframes).forEach(iframe => {
|
||||
iframe.addEventListener("load", e => {
|
||||
const iframe = e.srcElement;
|
||||
const doc = iframe.contentDocument || iframe.contentWindow.document;
|
||||
doc.body.classList.add("antialiased", "font-sans", "bg-white")
|
||||
iframe.style.visibility = "hidden";
|
||||
iframe.style.height = "10px";
|
||||
const height = Math.max(getDocHeight(doc), 256) + "px";
|
||||
iframe.style.height = height;
|
||||
iframe.style.visibility = "visible";
|
||||
|
||||
const html = doc.body.innerHTML.trim();
|
||||
const container = iframe.parentElement.parentElement.parentElement;
|
||||
hljs.configure({useBR: false, tabReplace: ' '});
|
||||
const highlighted = hljs.highlight('html', html);
|
||||
const codeElem = container.children[1].querySelector("code");
|
||||
codeElem.innerHTML = highlighted.value;
|
||||
});
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,403 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><!-- This example requires Tailwind CSS v1.4.0+ --><html>
|
||||
<head /><body>
|
||||
<div class="relative bg-white">
|
||||
<div class="flex justify-between items-center px-4 py-6 sm:px-6 md:justify-start md:space-x-10">
|
||||
<div class="lg:w-0 lg:flex-1">
|
||||
<a href="#" class="flex">
|
||||
<img class="h-8 w-auto sm:h-10" src="https://tailwindui.com/img/logos/v1/workflow-mark-on-white.svg" alt="Workflow" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="-mr-2 -my-2 md:hidden">
|
||||
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
|
||||
<!-- Heroicon name: menu -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<nav class="hidden md:flex space-x-10">
|
||||
<div class="relative">
|
||||
<!-- Item active: "text-gray-900", Item inactive: "text-gray-500" -->
|
||||
<button type="button" class="group text-gray-500 inline-flex items-center space-x-2 text-base leading-6 font-medium hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
|
||||
<span>Solutions</span>
|
||||
<!--
|
||||
Heroicon name: chevron-down
|
||||
|
||||
Item active: "text-gray-600", Item inactive: "text-gray-400"
|
||||
-->
|
||||
<svg class="text-gray-400 h-5 w-5 group-hover:text-gray-500 group-focus:text-gray-500 transition ease-in-out duration-150" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" 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 -ml-4 mt-3 transform w-screen max-w-md md:max-w-3xl lg:ml-0 lg:left-1/2 lg:-translate-x-1/2">
|
||||
<div class="rounded-lg shadow-lg">
|
||||
<div class="rounded-lg shadow-xs overflow-hidden">
|
||||
<div class="z-20 relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8 lg:grid-cols-2">
|
||||
<a href="#" class="-m-3 p-3 flex items-start space-x-4 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
|
||||
<!-- Heroicon name: chart-bar -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Analytics
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Get a better understanding of where your traffic is coming from.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 flex items-start space-x-4 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
|
||||
<!-- Heroicon name: cursor-click -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Engagement
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Speak directly to your customers in a more meaningful way.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 flex items-start space-x-4 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
|
||||
<!-- Heroicon name: shield-check -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Security
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Your customers data will be safe and secure.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 flex items-start space-x-4 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
|
||||
<!-- Heroicon name: view-grid -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Integrations
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Connect with third-party tools that you’re already using.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 flex items-start space-x-4 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
|
||||
<!-- Heroicon name: refresh -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Automations
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Build strategic funnels that will drive your customers to convert
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 flex items-start space-x-4 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
|
||||
<!-- Heroicon name: document-report -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Reports
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Get detailed reports that will help you make more informed decisions
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="p-5 bg-gray-50 sm:p-8">
|
||||
<a href="#" class="-m-3 p-3 flow-root space-y-1 rounded-md hover:bg-gray-100 transition ease-in-out duration-150">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="text-base leading-6 font-medium text-gray-900">
|
||||
Enterprise
|
||||
</div>
|
||||
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium leading-5 bg-indigo-100 text-indigo-800">
|
||||
New
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Empower your entire team with even more advanced tools.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="#" class="text-base leading-6 font-medium text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
|
||||
Pricing
|
||||
</a>
|
||||
<a href="#" class="text-base leading-6 font-medium text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
|
||||
Docs
|
||||
</a>
|
||||
|
||||
<div class="relative">
|
||||
<!-- Item active: "text-gray-900", Item inactive: "text-gray-500" -->
|
||||
<button type="button" class="group text-gray-500 inline-flex items-center space-x-2 text-base leading-6 font-medium hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
|
||||
<span>More</span>
|
||||
<!--
|
||||
Heroicon name: chevron-down
|
||||
|
||||
Item active: "text-gray-600", Item inactive: "text-gray-400"
|
||||
-->
|
||||
<svg class="text-gray-400 h-5 w-5 group-hover:text-gray-500 group-focus:text-gray-500 transition ease-in-out duration-150" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" 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 transform -translate-x-1/2 mt-3 px-2 w-screen max-w-xs sm:px-0">
|
||||
<div class="rounded-lg shadow-lg">
|
||||
<div class="rounded-lg shadow-xs overflow-hidden">
|
||||
<div class="z-20 relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8">
|
||||
<a href="#" class="-m-3 p-3 block space-y-1 rounded-md hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Blog
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Learn about tips, product updates and company culture.
|
||||
</p>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 block space-y-1 rounded-md hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Help Center
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Get all of your questions answered in our forums of contact support.
|
||||
</p>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 block space-y-1 rounded-md hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Guides
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Learn how to maximize our platform to get the most out of it.
|
||||
</p>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 block space-y-1 rounded-md hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Events
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Check out webinars with experts and learn about our annual conference.
|
||||
</p>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 block space-y-1 rounded-md hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Security
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Understand how we take your privacy seriously.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="hidden md:flex items-center justify-end space-x-8 md:flex-1 lg:w-0">
|
||||
<a href="#" class="whitespace-no-wrap text-base leading-6 font-medium text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900">
|
||||
Sign in
|
||||
</a>
|
||||
<span class="inline-flex rounded-md shadow-sm">
|
||||
<a href="#" class="whitespace-no-wrap inline-flex items-center justify-center px-4 py-2 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition ease-in-out duration-150">
|
||||
Sign up
|
||||
</a>
|
||||
</span>
|
||||
</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 top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden">
|
||||
<div class="rounded-lg shadow-lg">
|
||||
<div class="rounded-lg shadow-xs bg-white divide-y-2 divide-gray-50">
|
||||
<div class="pt-5 pb-6 px-5 space-y-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/v1/workflow-mark-on-white.svg" alt="Workflow" />
|
||||
</div>
|
||||
<div class="-mr-2">
|
||||
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
|
||||
<!-- Heroicon name: x -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<nav class="grid grid-cols-1 gap-7">
|
||||
<a href="#" class="-m-3 p-3 flex items-center space-x-4 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white">
|
||||
<!-- Heroicon name: chart-bar -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="text-base leading-6 font-medium text-gray-900">
|
||||
Analytics
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 flex items-center space-x-4 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white">
|
||||
<!-- Heroicon name: cursor-click -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="text-base leading-6 font-medium text-gray-900">
|
||||
Engagement
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 flex items-center space-x-4 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white">
|
||||
<!-- Heroicon name: shield-check -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="text-base leading-6 font-medium text-gray-900">
|
||||
Security
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 flex items-center space-x-4 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white">
|
||||
<!-- Heroicon name: view-grid -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="text-base leading-6 font-medium text-gray-900">
|
||||
Integrations
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 flex items-center space-x-4 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white">
|
||||
<!-- Heroicon name: refresh -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="text-base leading-6 font-medium text-gray-900">
|
||||
Automations
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 flex items-center space-x-4 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white">
|
||||
<!-- Heroicon name: document-report -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="text-base leading-6 font-medium text-gray-900">
|
||||
Reports
|
||||
</div>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="py-6 px-5 space-y-6">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<a href="#" class="text-base leading-6 font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
|
||||
Pricing
|
||||
</a>
|
||||
<a href="#" class="text-base leading-6 font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
|
||||
Docs
|
||||
</a>
|
||||
<a href="#" class="text-base leading-6 font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
|
||||
Enterprise
|
||||
</a>
|
||||
<a href="#" class="text-base leading-6 font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
|
||||
Blog
|
||||
</a>
|
||||
<a href="#" class="text-base leading-6 font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
|
||||
Help Center
|
||||
</a>
|
||||
<a href="#" class="text-base leading-6 font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
|
||||
Guides
|
||||
</a>
|
||||
<a href="#" class="text-base leading-6 font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
|
||||
Security
|
||||
</a>
|
||||
<a href="#" class="text-base leading-6 font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
|
||||
Events
|
||||
</a>
|
||||
</div>
|
||||
<div class="space-y-6">
|
||||
<span class="w-full flex rounded-md shadow-sm">
|
||||
<a href="#" class="w-full flex items-center justify-center px-4 py-2 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition ease-in-out duration-150">
|
||||
Sign up
|
||||
</a>
|
||||
</span>
|
||||
<p class="text-center text-base leading-6 font-medium text-gray-500">
|
||||
Existing customer?
|
||||
<a href="#" class="text-indigo-600 hover:text-indigo-500 transition ease-in-out duration-150">
|
||||
Sign in
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,405 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><!-- This example requires Tailwind CSS v1.4.0+ --><html>
|
||||
<head /><body>
|
||||
<div class="relative bg-white">
|
||||
<div class="flex justify-between items-center px-4 py-6 sm:px-6 md:justify-start md:space-x-10">
|
||||
<div>
|
||||
<a href="#" class="flex">
|
||||
<img class="h-8 w-auto sm:h-10" src="https://tailwindui.com/img/logos/v1/workflow-mark-on-white.svg" alt="Workflow" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="-mr-2 -my-2 md:hidden">
|
||||
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
|
||||
<!-- Heroicon name: menu -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden md:flex-1 md:flex md:items-center md:justify-between md:space-x-12">
|
||||
<nav class="flex space-x-10">
|
||||
<div class="relative">
|
||||
<!-- Item active: "text-gray-900", Item inactive: "text-gray-500" -->
|
||||
<button type="button" class="group text-gray-500 inline-flex items-center space-x-2 text-base leading-6 font-medium hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
|
||||
<span>Solutions</span>
|
||||
<!--
|
||||
Heroicon name: chevron-down
|
||||
|
||||
Item active: "text-gray-600", Item inactive: "text-gray-400"
|
||||
-->
|
||||
<svg class="text-gray-400 h-5 w-5 group-hover:text-gray-500 group-focus:text-gray-500 transition ease-in-out duration-150" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" 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 -ml-4 mt-3 transform w-screen max-w-md lg:max-w-3xl">
|
||||
<div class="rounded-lg shadow-lg">
|
||||
<div class="rounded-lg shadow-xs overflow-hidden">
|
||||
<div class="z-20 relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8 lg:grid-cols-2">
|
||||
<a href="#" class="-m-3 p-3 flex items-start space-x-4 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
|
||||
<!-- Heroicon name: chart-bar -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Analytics
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Get a better understanding of where your traffic is coming from.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 flex items-start space-x-4 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
|
||||
<!-- Heroicon name: cursor-click -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Engagement
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Speak directly to your customers in a more meaningful way.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 flex items-start space-x-4 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
|
||||
<!-- Heroicon name: shield-check -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Security
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Your customers data will be safe and secure.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 flex items-start space-x-4 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
|
||||
<!-- Heroicon name: view-grid -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Integrations
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Connect with third-party tools that you’re already using.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 flex items-start space-x-4 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
|
||||
<!-- Heroicon name: refresh -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Automations
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Build strategic funnels that will drive your customers to convert
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 flex items-start space-x-4 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
|
||||
<!-- Heroicon name: document-report -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Reports
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Get detailed reports that will help you make more informed decisions
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="p-5 bg-gray-50 sm:p-8">
|
||||
<a href="#" class="-m-3 p-3 flow-root space-y-1 rounded-md hover:bg-gray-100 transition ease-in-out duration-150">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="text-base leading-6 font-medium text-gray-900">
|
||||
Enterprise
|
||||
</div>
|
||||
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium leading-5 bg-indigo-100 text-indigo-800">
|
||||
New
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Empower your entire team with even more advanced tools.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" class="text-base leading-6 font-medium text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
|
||||
Pricing
|
||||
</a>
|
||||
<a href="#" class="text-base leading-6 font-medium text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
|
||||
Docs
|
||||
</a>
|
||||
|
||||
<div class="relative">
|
||||
<!-- Item active: "text-gray-900", Item inactive: "text-gray-500" -->
|
||||
<button type="button" class="group text-gray-500 inline-flex items-center space-x-2 text-base leading-6 font-medium hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
|
||||
<span>More</span>
|
||||
<!--
|
||||
Heroicon name: chevron-down
|
||||
|
||||
Item active: "text-gray-600", Item inactive: "text-gray-400"
|
||||
-->
|
||||
<svg class="text-gray-400 h-5 w-5 group-hover:text-gray-500 group-focus:text-gray-500 transition ease-in-out duration-150" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" 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 transform -translate-x-1/2 mt-3 px-2 w-screen max-w-xs sm:px-0">
|
||||
<div class="rounded-lg shadow-lg">
|
||||
<div class="rounded-lg shadow-xs overflow-hidden">
|
||||
<div class="z-20 relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8">
|
||||
<a href="#" class="-m-3 p-3 block space-y-1 rounded-md hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Blog
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Learn about tips, product updates and company culture.
|
||||
</p>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 block space-y-1 rounded-md hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Help Center
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Get all of your questions answered in our forums of contact support.
|
||||
</p>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 block space-y-1 rounded-md hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Guides
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Learn how to maximize our platform to get the most out of it.
|
||||
</p>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 block space-y-1 rounded-md hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Events
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Check out webinars with experts and learn about our annual conference.
|
||||
</p>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 block space-y-1 rounded-md hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Security
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Understand how we take your privacy seriously.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="flex items-center space-x-8">
|
||||
<a href="#" class="text-base leading-6 font-medium text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
|
||||
Sign in
|
||||
</a>
|
||||
<span class="inline-flex rounded-md shadow-sm">
|
||||
<a href="#" class="inline-flex items-center justify-center px-4 py-2 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition ease-in-out duration-150">
|
||||
Sign up
|
||||
</a>
|
||||
</span>
|
||||
</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 top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden">
|
||||
<div class="rounded-lg shadow-lg">
|
||||
<div class="rounded-lg shadow-xs bg-white divide-y-2 divide-gray-50">
|
||||
<div class="pt-5 pb-6 px-5 space-y-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/v1/workflow-mark-on-white.svg" alt="Workflow" />
|
||||
</div>
|
||||
<div class="-mr-2">
|
||||
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
|
||||
<!-- Heroicon name: x -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<nav class="grid gap-6">
|
||||
<a href="#" class="-m-3 p-3 flex items-center space-x-4 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white">
|
||||
<!-- Heroicon name: chart-bar -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="text-base leading-6 font-medium text-gray-900">
|
||||
Analytics
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 flex items-center space-x-4 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white">
|
||||
<!-- Heroicon name: cursor-click -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="text-base leading-6 font-medium text-gray-900">
|
||||
Engagement
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 flex items-center space-x-4 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white">
|
||||
<!-- Heroicon name: shield-check -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="text-base leading-6 font-medium text-gray-900">
|
||||
Security
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 flex items-center space-x-4 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white">
|
||||
<!-- Heroicon name: view-grid -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="text-base leading-6 font-medium text-gray-900">
|
||||
Integrations
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 flex items-center space-x-4 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white">
|
||||
<!-- Heroicon name: refresh -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="text-base leading-6 font-medium text-gray-900">
|
||||
Automations
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 flex items-center space-x-4 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white">
|
||||
<!-- Heroicon name: document-report -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="text-base leading-6 font-medium text-gray-900">
|
||||
Reports
|
||||
</div>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="py-6 px-5 space-y-6">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<a href="#" class="text-base leading-6 font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
|
||||
Pricing
|
||||
</a>
|
||||
<a href="#" class="text-base leading-6 font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
|
||||
Docs
|
||||
</a>
|
||||
<a href="#" class="text-base leading-6 font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
|
||||
Enterprise
|
||||
</a>
|
||||
<a href="#" class="text-base leading-6 font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
|
||||
Blog
|
||||
</a>
|
||||
<a href="#" class="text-base leading-6 font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
|
||||
Help Center
|
||||
</a>
|
||||
<a href="#" class="text-base leading-6 font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
|
||||
Guides
|
||||
</a>
|
||||
<a href="#" class="text-base leading-6 font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
|
||||
Security
|
||||
</a>
|
||||
<a href="#" class="text-base leading-6 font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
|
||||
Events
|
||||
</a>
|
||||
</div>
|
||||
<div class="space-y-6">
|
||||
<span class="w-full flex rounded-md shadow-sm">
|
||||
<a href="#" class="w-full flex items-center justify-center px-4 py-2 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition ease-in-out duration-150">
|
||||
Sign up
|
||||
</a>
|
||||
</span>
|
||||
<p class="text-center text-base leading-6 font-medium text-gray-500">
|
||||
Existing customer?
|
||||
<a href="#" class="text-indigo-600 hover:text-indigo-500 transition ease-in-out duration-150">
|
||||
Sign in
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,507 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><!-- This example requires Tailwind CSS v1.4.0+ --><html>
|
||||
<head /><body>
|
||||
<div class="z-0 relative bg-white">
|
||||
<div class="relative z-10 shadow">
|
||||
<div class="max-w-7xl mx-auto flex justify-between items-center px-4 py-5 sm:px-6 sm:py-4 lg:px-8 md:justify-start md:space-x-10">
|
||||
<div>
|
||||
<a href="#" class="flex">
|
||||
<img class="h-8 w-auto sm:h-10" src="https://tailwindui.com/img/logos/v1/workflow-mark-on-white.svg" alt="Workflow" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="-mr-2 -my-2 md:hidden">
|
||||
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
|
||||
<!-- Heroicon name: menu -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden md:flex-1 md:flex md:items-center md:justify-between md:space-x-12">
|
||||
<nav class="flex space-x-10">
|
||||
<div class="relative">
|
||||
<!-- Item active: "text-gray-900", Item inactive: "text-gray-500" -->
|
||||
<button type="button" class="text-gray-500 group inline-flex items-center space-x-2 text-base leading-6 font-medium hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
|
||||
<span>Solutions</span>
|
||||
<!--
|
||||
Heroicon name: chevron-down
|
||||
|
||||
Item active: "text-gray-600", Item inactive: "text-gray-400"
|
||||
-->
|
||||
<svg class="text-gray-400 h-5 w-5 group-hover:text-gray-500 group-focus:text-gray-500 transition ease-in-out duration-150" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<a href="#" class="text-base leading-6 font-medium text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
|
||||
Pricing
|
||||
</a>
|
||||
<a href="#" class="text-base leading-6 font-medium text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
|
||||
Docs
|
||||
</a>
|
||||
<div class="relative">
|
||||
<!-- Item active: "text-gray-900", Item inactive: "text-gray-500" -->
|
||||
<button type="button" class="text-gray-500 group inline-flex items-center space-x-2 text-base leading-6 font-medium hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
|
||||
<span>Menu</span>
|
||||
<!--
|
||||
Heroicon name: chevron-down
|
||||
|
||||
Item active: "text-gray-600", Item inactive: "text-gray-400"
|
||||
-->
|
||||
<svg class="text-gray-400 h-5 w-5 group-hover:text-gray-500 group-focus:text-gray-500 transition ease-in-out duration-150" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="flex items-center space-x-8">
|
||||
<a href="#" class="text-base leading-6 font-medium text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
|
||||
Sign in
|
||||
</a>
|
||||
<span class="inline-flex rounded-md shadow-sm">
|
||||
<a href="#" class="inline-flex items-center justify-center px-4 py-2 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition ease-in-out duration-150">
|
||||
Sign up
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Solutions menu -->
|
||||
<!--
|
||||
'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="hidden md:block absolute inset-x-0 transform shadow-lg">
|
||||
<div class="bg-white">
|
||||
<div class="max-w-7xl mx-auto grid gap-y-6 px-4 py-6 sm:grid-cols-2 sm:gap-8 sm:px-6 sm:py-8 lg:grid-cols-4 lg:px-8 lg:py-12 xl:py-16">
|
||||
<a href="#" class="-m-3 p-3 flex flex-col justify-between space-y-6 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<div class="space-x-4 flex md:h-full lg:flex-col lg:space-x-0 lg:space-y-4">
|
||||
<div class="flex-shrink-0">
|
||||
<span class="inline-flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
|
||||
<!-- Heroicon name: chart-bar -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div class="space-y-2 md:flex-1 md:flex md:flex-col md:justify-between lg:space-y-4">
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Analytics
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Get a better understanding of where your traffic is coming from.
|
||||
</p>
|
||||
</div>
|
||||
<p class="text-sm leading-5 font-medium text-indigo-600">
|
||||
Learn more →
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 flex flex-col justify-between space-y-6 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<div class="space-x-4 flex md:h-full lg:flex-col lg:space-x-0 lg:space-y-4">
|
||||
<div class="flex-shrink-0">
|
||||
<span class="inline-flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
|
||||
<!-- Heroicon name: cursor-click -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122" />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div class="space-y-2 md:flex-1 md:flex md:flex-col md:justify-between lg:space-y-4">
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Engagement
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Speak directly to your customers in a more meaningful way.
|
||||
</p>
|
||||
</div>
|
||||
<p class="text-sm leading-5 font-medium text-indigo-600">
|
||||
Learn more →
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 flex flex-col justify-between space-y-6 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<div class="space-x-4 flex md:h-full lg:flex-col lg:space-x-0 lg:space-y-4">
|
||||
<div class="flex-shrink-0">
|
||||
<span class="inline-flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
|
||||
<!-- Heroicon name: shield-check -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div class="space-y-2 md:flex-1 md:flex md:flex-col md:justify-between lg:space-y-4">
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Security
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Your customer data will be safe and secure.
|
||||
</p>
|
||||
</div>
|
||||
<p class="text-sm leading-5 font-medium text-indigo-600">
|
||||
Learn more →
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 flex flex-col justify-between space-y-6 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<div class="space-x-4 flex md:h-full lg:flex-col lg:space-x-0 lg:space-y-4">
|
||||
<div class="flex-shrink-0">
|
||||
<span class="inline-flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
|
||||
<!-- Heroicon name: view-grid -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div class="space-y-2 md:flex-1 md:flex md:flex-col md:justify-between lg:space-y-4">
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Integrations
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Connect with third-party tools that you're already using.
|
||||
</p>
|
||||
</div>
|
||||
<p class="text-sm leading-5 font-medium text-indigo-600">
|
||||
Learn more →
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gray-50">
|
||||
<div class="max-w-7xl mx-auto space-y-6 px-4 py-5 sm:flex sm:space-y-0 sm:space-x-10 sm:px-6 lg:px-8">
|
||||
<div class="flow-root">
|
||||
<a href="#" class="-m-3 p-3 space-x-3 flex items-center rounded-md text-base leading-6 font-medium text-gray-900 hover:bg-gray-100 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: play -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span>Watch Demo</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flow-root">
|
||||
<a href="#" class="-m-3 p-3 space-x-3 flex items-center rounded-md text-base leading-6 font-medium text-gray-900 hover:bg-gray-100 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: check-circle -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span>View all products</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flow-root">
|
||||
<a href="#" class="-m-3 p-3 space-x-3 flex items-center rounded-md text-base leading-6 font-medium text-gray-900 hover:bg-gray-100 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: phone -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
|
||||
</svg>
|
||||
<span>Contact Sales</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- More menu -->
|
||||
<!--
|
||||
'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="hidden md:block absolute inset-x-0 transform shadow-lg">
|
||||
<div class="absolute inset-0 flex">
|
||||
<div class="bg-white w-1/2"></div>
|
||||
<div class="bg-gray-50 w-1/2"></div>
|
||||
</div>
|
||||
<div class="relative max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2">
|
||||
<nav class="grid gap-y-10 px-4 py-8 bg-white sm:grid-cols-2 sm:gap-x-8 sm:py-12 sm:px-6 lg:px-8 xl:pr-12">
|
||||
<div class="space-y-5">
|
||||
<h3 class="text-sm leading-5 font-medium tracking-wide text-gray-500 uppercase">
|
||||
Company
|
||||
</h3>
|
||||
<ul class="space-y-6">
|
||||
<li class="flow-root">
|
||||
<a href="#" class="-m-3 p-3 flex items-center space-x-4 rounded-md text-base leading-6 font-medium text-gray-900 hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: information-circle -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span>About</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="flow-root">
|
||||
<a href="#" class="-m-3 p-3 flex items-center space-x-4 rounded-md text-base leading-6 font-medium text-gray-900 hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: office-building -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
||||
</svg>
|
||||
<span>Customers</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="flow-root">
|
||||
<a href="#" class="-m-3 p-3 flex items-center space-x-4 rounded-md text-base leading-6 font-medium text-gray-900 hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: newspaper -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z" />
|
||||
</svg>
|
||||
<span>Press</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="flow-root">
|
||||
<a href="#" class="-m-3 p-3 flex items-center space-x-4 rounded-md text-base leading-6 font-medium text-gray-900 hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: briefcase -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<span>Careers</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="flow-root">
|
||||
<a href="#" class="-m-3 p-3 flex items-center space-x-4 rounded-md text-base leading-6 font-medium text-gray-900 hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: shield-check -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
<span>Privacy</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="space-y-5">
|
||||
<h3 class="text-sm leading-5 font-medium tracking-wide text-gray-500 uppercase">
|
||||
Resources
|
||||
</h3>
|
||||
<ul class="space-y-6">
|
||||
<li class="flow-root">
|
||||
<a href="#" class="-m-3 p-3 flex items-center space-x-4 rounded-md text-base leading-6 font-medium text-gray-900 hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: user-group -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
|
||||
</svg>
|
||||
<span>Community</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="flow-root">
|
||||
<a href="#" class="-m-3 p-3 flex items-center space-x-4 rounded-md text-base leading-6 font-medium text-gray-900 hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: globe-alt -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
|
||||
</svg>
|
||||
<span>Partners</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="flow-root">
|
||||
<a href="#" class="-m-3 p-3 flex items-center space-x-4 rounded-md text-base leading-6 font-medium text-gray-900 hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: bookmark-alt -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 4v12l-4-2-4 2V4M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<span>Guides</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="flow-root">
|
||||
<a href="#" class="-m-3 p-3 flex items-center space-x-4 rounded-md text-base leading-6 font-medium text-gray-900 hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: desktop-computer -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<span>Webinars</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="space-y-6 bg-gray-50 px-4 py-8 sm:py-12 sm:px-6 lg:px-8 xl:pl-12">
|
||||
<div class="space-y-6">
|
||||
<h3 class="text-sm leading-5 font-medium tracking-wide text-gray-500 uppercase">
|
||||
From the blog
|
||||
</h3>
|
||||
<ul class="space-y-6">
|
||||
<li class="flow-root">
|
||||
<a href="#" class="-m-3 p-3 flex rounded-lg hover:bg-gray-100 transition ease-in-out duration-150 sm:space-x-8">
|
||||
<div class="hidden sm:block flex-shrink-0">
|
||||
<img class="w-32 h-20 object-cover rounded-md" src="https://images.unsplash.com/photo-1558478551-1a378f63328e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2849&q=80" alt="" />
|
||||
</div>
|
||||
<div class="space-y-1 w-0 flex-1">
|
||||
<h4 class="text-base leading-6 font-medium text-gray-900 truncate">
|
||||
Boost your conversion rate
|
||||
</h4>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Eget ullamcorper ac ut vulputate fames nec mattis pellentesque elementum. Viverra tempor id mus.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="flow-root">
|
||||
<a href="#" class="-m-3 p-3 flex rounded-lg hover:bg-gray-100 transition ease-in-out duration-150 sm:space-x-8">
|
||||
<div class="hidden sm:block flex-shrink-0">
|
||||
<img class="w-32 h-20 object-cover rounded-md" src="https://images.unsplash.com/1/apple-gear-looking-pretty.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80" alt="" />
|
||||
</div>
|
||||
<div class="space-y-1 w-0 flex-1">
|
||||
<h4 class="text-base leading-6 font-medium text-gray-900 truncate">
|
||||
How to use search engine optimization to drive traffic to your site
|
||||
</h4>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Eget ullamcorper ac ut vulputate fames nec mattis pellentesque elementum. Viverra tempor id mus.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="text-sm leading-5 font-medium">
|
||||
<a href="#" class="text-indigo-600 hover:text-indigo-500 transition ease-in-out duration-150">
|
||||
View all posts →
|
||||
</a>
|
||||
</div>
|
||||
</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 z-20 top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden">
|
||||
<div class="rounded-lg shadow-lg">
|
||||
<div class="rounded-lg shadow-xs bg-white divide-y-2 divide-gray-50">
|
||||
<div class="pt-5 pb-6 px-5 space-y-6 sm:space-y-8 sm:pb-8">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/v1/workflow-mark-on-white.svg" alt="Workflow" />
|
||||
</div>
|
||||
<div class="-mr-2">
|
||||
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
|
||||
<!-- Heroicon name: x -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<nav class="space-y-8">
|
||||
<div class="grid gap-7 sm:grid-cols-2 sm:gap-y-8 sm:gap-x-4">
|
||||
<a href="#" class="-m-3 space-x-4 flex items-center p-3 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
|
||||
<!-- Heroicon name: chart-bar -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="text-base leading-6 font-medium text-gray-900">
|
||||
Analytics
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 space-x-4 flex items-center p-3 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
|
||||
<!-- Heroicon name: cursor-click -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="text-base leading-6 font-medium text-gray-900">
|
||||
Engagement
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 space-x-4 flex items-center p-3 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
|
||||
<!-- Heroicon name: shield-check -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="text-base leading-6 font-medium text-gray-900">
|
||||
Security
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 space-x-4 flex items-center p-3 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
|
||||
<!-- Heroicon name: view-grid -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="text-base leading-6 font-medium text-gray-900">
|
||||
Integrations
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="text-base leading-6">
|
||||
<a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 transition ease-in-out duration-150">
|
||||
View all products →
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="py-6 px-5 space-y-6">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<a href="#" class="rounded-md text-base leading-6 font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
|
||||
Pricing
|
||||
</a>
|
||||
<a href="#" class="rounded-md text-base leading-6 font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
|
||||
Docs
|
||||
</a>
|
||||
<a href="#" class="rounded-md text-base leading-6 font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
|
||||
Company
|
||||
</a>
|
||||
<a href="#" class="rounded-md text-base leading-6 font-medium text-gray-900 hover:text-gray-600 transition ease-in-out duration-150">
|
||||
Resources
|
||||
</a>
|
||||
<a href="#" class="rounded-md text-base leading-6 font-medium text-gray-900 hover:text-gray-600 transition ease-in-out duration-150">
|
||||
Blog
|
||||
</a>
|
||||
<a href="#" class="rounded-md text-base leading-6 font-medium text-gray-900 hover:text-gray-600 transition ease-in-out duration-150">
|
||||
Contact Sales
|
||||
</a>
|
||||
</div>
|
||||
<div class="space-y-6">
|
||||
<span class="w-full flex rounded-md shadow-sm">
|
||||
<a href="#" class="w-full flex items-center justify-center px-4 py-2 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition ease-in-out duration-150">
|
||||
Sign up
|
||||
</a>
|
||||
</span>
|
||||
<p class="text-center text-base leading-6 font-medium text-gray-500">
|
||||
Existing customer?
|
||||
<a href="#" class="text-indigo-600 hover:text-indigo-500 transition ease-in-out duration-150">
|
||||
Sign in
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,322 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Tailwind UI Components</title>
|
||||
<link href="https://fonts.googleapis.com/css?family=Inter&display=swap" rel="stylesheet"/>
|
||||
<link href="https://cdn.jsdelivr.net/npm/@tailwindcss/ui@latest/dist/tailwind-ui.min.css" rel="stylesheet"/>
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.0.1/dist/alpine.js" defer></script>
|
||||
<link href="https://cdn.jsdelivr.net/npm/highlightjs-themes@1.0.0/darkula.css" rel="stylesheet"/>
|
||||
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/highlight.min.js"></script>
|
||||
<style>
|
||||
* { box-sizing: border-box; }
|
||||
.font-sans { font-family: "Inter", sans-serif; }
|
||||
.hljs {
|
||||
background: #252f3f;
|
||||
color: white;
|
||||
}
|
||||
.hljs-tag {
|
||||
color: white;
|
||||
}
|
||||
.hljs-name {
|
||||
color: #ff8383;
|
||||
}
|
||||
.hljs-attr {
|
||||
color: #ffe484;
|
||||
font-style: italic;
|
||||
}
|
||||
.hljs-string {
|
||||
color: #b5f4a5;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="font-sans antialiased text-gray-900">
|
||||
<main>
|
||||
<div class="py-4 sm:py-12">
|
||||
<div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="pb-2">
|
||||
<nav class="flex items-center text-sm leading-5 font-medium">
|
||||
<a href="/#marketing" class="text-gray-500 hover:text-gray-700 focus:outline-none focus:underline transition duration-150 ease-in-out">
|
||||
Marketing
|
||||
</a>
|
||||
<svg class="flex-shrink-0 mx-2 h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<a href="/#marketing-page-examples" class="text-gray-500 hover:text-gray-700 focus:outline-none focus:underline transition duration-150 ease-in-out">
|
||||
Page Examples
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
<h2 class="text-2xl leading-8 font-semibold font-display text-gray-900 sm:text-3xl sm:leading-9">
|
||||
Pricing Pages
|
||||
</h2>
|
||||
</div>
|
||||
<div class="mt-6 bg-white max-w-8xl mx-auto sm:px-6 lg:px-8">
|
||||
<div class="max-w-8xl mx-auto">
|
||||
|
||||
<div id="component-f8fd51d24f772fd218b32e94fd2bc5232de529af" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-f8fd51d24f772fd218b32e94fd2bc5232de529af">With comparison table</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/page-examples/pricing-pages/with_comparison_table.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-03675283c304d75a9a831d5288955a34963fc9ca" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-03675283c304d75a9a831d5288955a34963fc9ca">With feature list</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/page-examples/pricing-pages/with_feature_list.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-655c6522cc607072bb6c0b40e673181fdaf511fe" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-655c6522cc607072bb6c0b40e673181fdaf511fe">With four tiers and feature list</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/page-examples/pricing-pages/with_four_tiers_and_feature_list.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-95e666ead129e54dac9e093370eceac64319cd06" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-95e666ead129e54dac9e093370eceac64319cd06">With split brand panel</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/page-examples/pricing-pages/with_split_brand_panel.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
(function() {
|
||||
const getDocHeight = doc => {
|
||||
doc = doc || document;
|
||||
const body = doc.body;
|
||||
const html = doc.documentElement;
|
||||
const height = Math.max(
|
||||
body.scrollHeight,
|
||||
body.offsetHeight,
|
||||
html.clientHeight,
|
||||
html.scrollHeight,
|
||||
html.offsetHeight
|
||||
);
|
||||
return height;
|
||||
};
|
||||
|
||||
window.resizableIFrame = function() {
|
||||
return {
|
||||
resizing: !1,
|
||||
width: "100%",
|
||||
init: function() {}
|
||||
};
|
||||
};
|
||||
const iframes = document.querySelectorAll("iframe");
|
||||
Array.from(iframes).forEach(iframe => {
|
||||
iframe.addEventListener("load", e => {
|
||||
const iframe = e.srcElement;
|
||||
const doc = iframe.contentDocument || iframe.contentWindow.document;
|
||||
doc.body.classList.add("antialiased", "font-sans", "bg-white")
|
||||
iframe.style.visibility = "hidden";
|
||||
iframe.style.height = "10px";
|
||||
const height = Math.max(getDocHeight(doc), 256) + "px";
|
||||
iframe.style.height = height;
|
||||
iframe.style.visibility = "visible";
|
||||
|
||||
const html = doc.body.innerHTML.trim();
|
||||
const container = iframe.parentElement.parentElement.parentElement;
|
||||
hljs.configure({useBR: false, tabReplace: ' '});
|
||||
const highlighted = hljs.highlight('html', html);
|
||||
const codeElem = container.children[1].querySelector("code");
|
||||
codeElem.innerHTML = highlighted.value;
|
||||
});
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,658 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="bg-white">
|
||||
<div class="relative">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6">
|
||||
<div class="flex justify-between items-center py-6 md:justify-start md:space-x-10">
|
||||
<div class="lg:w-0 lg:flex-1">
|
||||
<a href="#" class="flex">
|
||||
<img class="h-8 w-auto sm:h-10" src="https://tailwindui.com/img/logos/v1/workflow-mark-blue-600.svg" alt="Workflow" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="-mr-2 -my-2 md:hidden">
|
||||
<button type="button" class="rounded-md p-2 inline-flex items-center justify-center text-cool-gray-400 hover:text-cool-gray-500 hover:bg-cool-gray-100 focus:outline-none focus:bg-cool-gray-100 focus:text-cool-gray-500 transition duration-150 ease-in-out">
|
||||
<span class="sr-only">Open menu</span>
|
||||
<!-- Heroicon name: menu -->
|
||||
<svg class="h-6 w-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<nav class="hidden md:flex space-x-10">
|
||||
<div class="relative">
|
||||
<!-- Item active: "text-cool-gray-900", Item inactive: "text-cool-gray-500" -->
|
||||
<button type="button" class="group inline-flex items-center space-x-2 text-base leading-6 font-medium text-cool-gray-500 hover:text-cool-gray-900 focus:outline-none focus:text-cool-gray-900 transition ease-in-out duration-150">
|
||||
<span>Solutions</span>
|
||||
<!--
|
||||
Heroicon name: chevron-down
|
||||
|
||||
Item active: "text-cool-gray-600", Item inactive: "text-cool-gray-400"
|
||||
-->
|
||||
<svg class="h-5 w-5 text-cool-gray-400 group-hover:text-cool-gray-500 group-focus:text-cool-gray-500 transition ease-in-out duration-150" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" 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 transform w-screen max-w-md px-2 sm:px-0 lg:ml-0 lg:left-1/2 lg:-translate-x-1/2">
|
||||
<div class="rounded-lg shadow-lg">
|
||||
<div class="rounded-lg shadow-xs overflow-hidden">
|
||||
<div class="relative z-20 bg-white py-6 px-5 grid gap-6 sm:gap-8 sm:p-8">
|
||||
<a href="#" class="-m-3 rounded-lg p-3 flex items-start space-x-4 hover:bg-cool-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: chart-bar -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-blue-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||
</svg>
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-cool-gray-900">
|
||||
Analytics
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-cool-gray-500">
|
||||
Get a better understanding of where your traffic is coming from.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 rounded-lg p-3 flex items-start space-x-4 hover:bg-cool-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: cursor-click -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-blue-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122" />
|
||||
</svg>
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-cool-gray-900">
|
||||
Engagement
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-cool-gray-500">
|
||||
Speak directly to your customers in a more meaningful way.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 rounded-lg p-3 flex items-start space-x-4 hover:bg-cool-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: shield-check -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-blue-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-cool-gray-900">
|
||||
Security
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-cool-gray-500">
|
||||
Your customers data will be safe and secure.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 rounded-lg p-3 flex items-start space-x-4 hover:bg-cool-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: view-grid -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-blue-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
|
||||
</svg>
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-cool-gray-900">
|
||||
Integrations
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-cool-gray-500">
|
||||
Connect with third-party tools that you’re already using.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 rounded-lg p-3 flex items-start space-x-4 hover:bg-cool-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: refresh -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-blue-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||
</svg>
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-cool-gray-900">
|
||||
Automations
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-cool-gray-500">
|
||||
Build strategic funnels that will drive your customers to convert
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="px-5 py-5 bg-cool-gray-50 space-y-6 sm:flex sm:space-y-0 sm:space-x-10 sm:px-8">
|
||||
<div class="flow-root">
|
||||
<a href="#" class="-m-3 rounded-md p-3 flex items-center space-x-3 text-base leading-6 font-medium text-cool-gray-900 hover:bg-cool-gray-100 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: play -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-cool-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span>Watch Demo</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flow-root">
|
||||
<a href="#" class="-m-3 rounded-md p-3 flex items-center space-x-3 text-base leading-6 font-medium text-cool-gray-900 hover:bg-cool-gray-100 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: phone -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-cool-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
|
||||
</svg>
|
||||
<span>Contact Sales</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="#" class="text-base leading-6 font-medium text-cool-gray-500 hover:text-cool-gray-900 focus:outline-none focus:text-cool-gray-900 transition ease-in-out duration-150">
|
||||
Pricing
|
||||
</a>
|
||||
<a href="#" class="text-base leading-6 font-medium text-cool-gray-500 hover:text-cool-gray-900 focus:outline-none focus:text-cool-gray-900 transition ease-in-out duration-150">
|
||||
Docs
|
||||
</a>
|
||||
|
||||
<div class="relative">
|
||||
<!-- Item active: "text-cool-gray-900", Item inactive: "text-cool-gray-500" -->
|
||||
<button type="button" class="inline-flex items-center space-x-2 text-base leading-6 font-medium text-cool-gray-500 hover:text-cool-gray-900 focus:outline-none focus:text-cool-gray-900 transition ease-in-out duration-150">
|
||||
<span>More</span>
|
||||
<!--
|
||||
Heroicon name: chevron-down
|
||||
|
||||
Item active: "text-cool-gray-600", Item inactive: "text-cool-gray-400"
|
||||
-->
|
||||
<svg class="h-5 w-5 text-cool-gray-400 group-hover:text-cool-gray-500 group-focus:text-cool-gray-500 transition ease-in-out duration-150" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" 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 z-10 left-1/2 transform -translate-x-1/2 mt-3 w-screen max-w-md px-2 sm:px-0">
|
||||
<div class="rounded-lg shadow-lg">
|
||||
<div class="rounded-lg shadow-xs overflow-hidden">
|
||||
<div class="relative z-20 bg-white py-6 px-5 grid gap-6 sm:gap-8 sm:p-8">
|
||||
<a href="#" class="-m-3 rounded-lg p-3 flex items-start space-x-4 hover:bg-cool-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: support -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-blue-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||
</svg>
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-cool-gray-900">
|
||||
Help Center
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-cool-gray-500">
|
||||
Get all of your questions answered in our forums or contact support.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 rounded-lg p-3 flex items-start space-x-4 hover:bg-cool-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: bookmark-alt -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-blue-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 4v12l-4-2-4 2V4M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-cool-gray-900">
|
||||
Guides
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-cool-gray-500">
|
||||
Learn how to maximize our platform to get the most out of it.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 rounded-lg p-3 flex items-start space-x-4 hover:bg-cool-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: calendar -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-blue-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-cool-gray-900">
|
||||
Events
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-cool-gray-500">
|
||||
See what meet-ups and other events we might be planning near you.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 rounded-lg p-3 flex items-start space-x-4 hover:bg-cool-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: shield-check -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-blue-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-cool-gray-900">
|
||||
Security
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-cool-gray-500">
|
||||
Understand how we take your privacy seriously.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="py-5 px-5 bg-cool-gray-50 space-y-5 sm:px-8 sm:py-8">
|
||||
<div class="space-y-4">
|
||||
<h3 class="text-sm leading-5 tracking-wide font-medium text-cool-gray-500 uppercase">
|
||||
Recent Posts
|
||||
</h3>
|
||||
<ul class="space-y-4">
|
||||
<li class="text-base leading-6 truncate">
|
||||
<a href="#" class="font-medium text-cool-gray-900 hover:text-cool-gray-700 transition ease-in-out duration-150">
|
||||
Boost your conversion rate
|
||||
</a>
|
||||
</li>
|
||||
<li class="text-base leading-6 truncate">
|
||||
<a href="#" class="font-medium text-cool-gray-900 hover:text-cool-gray-700 transition ease-in-out duration-150">
|
||||
How to use search engine optimization to drive traffic to your site
|
||||
</a>
|
||||
</li>
|
||||
<li class="text-base leading-6 truncate">
|
||||
<a href="#" class="font-medium text-cool-gray-900 hover:text-cool-gray-700 transition ease-in-out duration-150">
|
||||
Improve your customer experience
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="text-sm leading-5">
|
||||
<a href="#" class="font-medium text-blue-600 hover:text-blue-500 transition ease-in-out duration-150">
|
||||
View all posts →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="hidden md:flex items-center justify-end space-x-8 md:flex-1 lg:w-0">
|
||||
<a href="#" class="whitespace-no-wrap text-base leading-6 font-medium text-cool-gray-500 hover:text-cool-gray-900 focus:outline-none focus:text-cool-gray-900">
|
||||
Sign in
|
||||
</a>
|
||||
<a href="#" class="whitespace-no-wrap bg-blue-100 border border-transparent rounded-md py-2 px-4 inline-flex items-center justify-center text-base leading-6 font-medium text-blue-700 hover:text-blue-600 hover:bg-blue-50 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-blue-200 transition ease-in-out duration-150">
|
||||
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 z-10 top-0 inset-x-0 transform origin-top-right p-2 transition md:hidden">
|
||||
<div class="rounded-lg shadow-lg">
|
||||
<div class="bg-white rounded-lg shadow-xs divide-y-2 divide-cool-gray-50">
|
||||
<div class="pt-5 pb-6 px-5 space-y-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/v1/workflow-mark-blue-600.svg" alt="Workflow" />
|
||||
</div>
|
||||
<div class="-mr-2">
|
||||
<button type="button" class="rounded-md p-2 inline-flex items-center justify-center text-cool-gray-400 hover:text-cool-gray-500 hover:bg-cool-gray-100 focus:outline-none focus:bg-cool-gray-100 focus:text-cool-gray-500 transition duration-150 ease-in-out">
|
||||
<div class="sr-only">Open menu</div>
|
||||
<!-- Heroicon name: x -->
|
||||
<svg class="h-6 w-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<nav class="grid gap-y-8">
|
||||
<a href="#" class="-m-3 rounded-md p-3 flex items-center space-x-3 hover:bg-cool-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: chart-bar -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-blue-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||
</svg>
|
||||
<div class="text-base leading-6 font-medium text-cool-gray-900">
|
||||
Analytics
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 rounded-md p-3 flex items-center space-x-3 hover:bg-cool-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: cursor-click -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-blue-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122" />
|
||||
</svg>
|
||||
<div class="text-base leading-6 font-medium text-cool-gray-900">
|
||||
Engagement
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 rounded-md p-3 flex items-center space-x-3 hover:bg-cool-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: shield-check -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-blue-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
<div class="text-base leading-6 font-medium text-cool-gray-900">
|
||||
Security
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 rounded-md p-3 flex items-center space-x-3 hover:bg-cool-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: view-grid -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-blue-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
|
||||
</svg>
|
||||
<div class="text-base leading-6 font-medium text-cool-gray-900">
|
||||
Integrations
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 rounded-md p-3 flex items-center space-x-3 hover:bg-cool-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: refresh -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-blue-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||
</svg>
|
||||
<div class="text-base leading-6 font-medium text-cool-gray-900">
|
||||
Automations
|
||||
</div>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="py-6 px-5 space-y-6">
|
||||
<div class="grid grid-cols-2 gap-y-4 gap-x-8">
|
||||
<a href="#" class="text-base leading-6 font-medium text-cool-gray-900 hover:text-cool-gray-700 transition ease-in-out duration-150">
|
||||
Pricing
|
||||
</a>
|
||||
<a href="#" class="text-base leading-6 font-medium text-cool-gray-900 hover:text-cool-gray-700 transition ease-in-out duration-150">
|
||||
Docs
|
||||
</a>
|
||||
<a href="#" class="text-base leading-6 font-medium text-cool-gray-900 hover:text-cool-gray-700 transition ease-in-out duration-150">
|
||||
Enterprise
|
||||
</a>
|
||||
<a href="#" class="text-base leading-6 font-medium text-cool-gray-900 hover:text-cool-gray-700 transition ease-in-out duration-150">
|
||||
Blog
|
||||
</a>
|
||||
<a href="#" class="text-base leading-6 font-medium text-cool-gray-900 hover:text-cool-gray-700 transition ease-in-out duration-150">
|
||||
Help Center
|
||||
</a>
|
||||
<a href="#" class="text-base leading-6 font-medium text-cool-gray-900 hover:text-cool-gray-700 transition ease-in-out duration-150">
|
||||
Guides
|
||||
</a>
|
||||
<a href="#" class="text-base leading-6 font-medium text-cool-gray-900 hover:text-cool-gray-700 transition ease-in-out duration-150">
|
||||
Security
|
||||
</a>
|
||||
<a href="#" class="text-base leading-6 font-medium text-cool-gray-900 hover:text-cool-gray-700 transition ease-in-out duration-150">
|
||||
Events
|
||||
</a>
|
||||
</div>
|
||||
<div class="space-y-6">
|
||||
<a href="#" class="w-full bg-blue-100 border border-transparent rounded-md py-2 px-4 flex items-center justify-center text-base leading-6 font-medium text-blue-700 hover:text-blue-600 hover:bg-blue-50 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-blue-200 transition ease-in-out duration-150">
|
||||
Sign up
|
||||
</a>
|
||||
<p class="text-center text-base leading-6 font-medium text-cool-gray-500">
|
||||
Existing customer?
|
||||
<a href="#" class="text-blue-600 hover:text-blue-500 transition ease-in-out duration-150">
|
||||
Sign in
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-gradient-to-b from-blue-50 via-white to-white">
|
||||
<!-- Pricing section with single price and feature list -->
|
||||
<div class="max-w-screen-xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
|
||||
<div class="pb-16 xl:flex xl:items-center xl:justify-between">
|
||||
<div>
|
||||
<h1 class="text-4xl leading-10 font-extrabold sm:text-5xl sm:leading-none sm:tracking-tight">
|
||||
<span class="text-cool-gray-900">Everything you need for </span>
|
||||
<span class="text-blue-600">$99 a month</span>
|
||||
</h1>
|
||||
<p class="mt-5 text-xl leading-7 text-cool-gray-500">Includes every feature we offer plus unlimited projects and unlimited users.</p>
|
||||
</div>
|
||||
<a href="#" class="mt-8 w-full bg-blue-600 border border-transparent rounded-md py-3 px-5 inline-flex items-center justify-center text-base leading-6 font-medium text-white hover:bg-blue-500 focus:outline-none focus:shadow-outline transition duration-150 ease-in-out sm:mt-10 sm:w-auto xl:mt-0">Get started today</a>
|
||||
</div>
|
||||
<div class="border-t border-cool-gray-200 pt-16 xl:grid xl:grid-cols-3 xl:gap-x-8">
|
||||
<div>
|
||||
<h2 class="text-base leading-6 font-semibold text-blue-600 uppercase tracking-wide">Everything you need</h2>
|
||||
<p class="mt-2 text-3xl leading-9 font-extrabold text-cool-gray-900">All-in-one platform</p>
|
||||
<p class="mt-4 text-lg leading-7 text-cool-gray-500">Ac euismod vel sit maecenas id pellentesque eu sed consectetur. Malesuada adipiscing sagittis vel nulla nec. Urna, sed a lectus elementum blandit et.</p>
|
||||
</div>
|
||||
<div class="mt-4 sm:mt-8 md:mt-10 md:grid md:grid-cols-2 md:gap-x-8 xl:mt-0 xl:col-span-2">
|
||||
<ul class="divide-y divide-cool-gray-200">
|
||||
<li class="py-4 flex space-x-3 md:py-0 md:pb-4">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span class="text-base leading-6 text-cool-gray-500">Vitae in pulvinar odio id utobortis in inter.</span>
|
||||
</li>
|
||||
<li class="py-4 flex space-x-3">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span class="text-base leading-6 text-cool-gray-500">Sed sed id viverra viverra augue eget massa.</span>
|
||||
</li>
|
||||
<li class="py-4 flex space-x-3">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span class="text-base leading-6 text-cool-gray-500">Urna, gravida amet, a, integer venenatis.</span>
|
||||
</li>
|
||||
<li class="py-4 flex space-x-3">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span class="text-base leading-6 text-cool-gray-500">Lobortis sed pharetra amet vitae eleifend.</span>
|
||||
</li>
|
||||
<li class="py-4 flex space-x-3">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span class="text-base leading-6 text-cool-gray-500">Ullamcorper blandit a consequat donec elit aoreet.</span>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="border-t border-cool-gray-200 divide-y divide-cool-gray-200 md:border-t-0">
|
||||
<li class="py-4 flex space-x-3 md:border-t-0 md:py-0 md:pb-4">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span class="text-base leading-6 text-cool-gray-500">Vitae in pulvinar odio id utobortis in inter.</span>
|
||||
</li>
|
||||
<li class="py-4 flex space-x-3">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span class="text-base leading-6 text-cool-gray-500">Sed sed id viverra viverra augue eget massa.</span>
|
||||
</li>
|
||||
<li class="py-4 flex space-x-3">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span class="text-base leading-6 text-cool-gray-500">Urna, gravida amet, a, integer venenatis.</span>
|
||||
</li>
|
||||
<li class="py-4 flex space-x-3">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span class="text-base leading-6 text-cool-gray-500">Lobortis sed pharetra amet vitae eleifend.</span>
|
||||
</li>
|
||||
<li class="py-4 flex space-x-3">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span class="text-base leading-6 text-cool-gray-500">Ullamcorper blandit a consequat donec elit aoreet.</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Branded FAQ -->
|
||||
<div class="bg-blue-900">
|
||||
<div class="max-w-screen-xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
|
||||
<h2 class="text-3xl leading-9 font-extrabold text-white">
|
||||
Frequently asked questions
|
||||
</h2>
|
||||
<div class="mt-6 border-t border-blue-400 border-opacity-25 pt-10">
|
||||
<dl class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:grid-rows-2 md:gap-x-8 md:gap-y-12">
|
||||
<div class="space-y-2">
|
||||
<dt class="text-lg leading-6 font-medium text-white">
|
||||
What's the best thing about Switzerland?
|
||||
</dt>
|
||||
<dd class="text-base leading-6 text-blue-200">
|
||||
I don'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 leading-6 font-medium text-white">
|
||||
Why do you never see elephants hiding in trees?
|
||||
</dt>
|
||||
<dd class="text-base leading-6 text-blue-200">
|
||||
Because they'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 leading-6 font-medium text-white">
|
||||
How do you make holy water?
|
||||
</dt>
|
||||
<dd class="text-base leading-6 text-blue-200">
|
||||
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 leading-6 font-medium text-white">
|
||||
Why can't you hear a pterodactyl go to the bathroom?
|
||||
</dt>
|
||||
<dd class="text-base leading-6 text-blue-200">
|
||||
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 leading-6 font-medium text-white">
|
||||
What do you call someone with no body and no nose?
|
||||
</dt>
|
||||
<dd class="text-base leading-6 text-blue-200">
|
||||
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 leading-6 font-medium text-white">
|
||||
Why did the invisible man turn down the job offer?
|
||||
</dt>
|
||||
<dd class="text-base leading-6 text-blue-200">
|
||||
He couldn't see himself doing it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CTA section -->
|
||||
<div class="bg-blue-50">
|
||||
<div class="max-w-screen-xl mx-auto py-12 px-4 sm:px-6 lg:py-24 lg:px-8 lg:flex lg:items-center lg:justify-between">
|
||||
<h2 class="text-3xl leading-9 font-extrabold tracking-tight text-blue-900 sm:text-4xl sm:leading-10">
|
||||
<span class="block">Ready to dive in?</span>
|
||||
<span class="block text-blue-600">Start your free trial today.</span>
|
||||
</h2>
|
||||
<div class="mt-8 flex lg:flex-shrink-0 lg:mt-0">
|
||||
<div class="inline-flex rounded-md shadow">
|
||||
<a href="#" class="bg-blue-600 border border-transparent rounded-md py-3 px-5 inline-flex items-center justify-center text-base leading-6 font-medium text-white hover:bg-blue-500 focus:outline-none focus:shadow-outline transition duration-150 ease-in-out">
|
||||
Get started
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Simple footer -->
|
||||
<footer class="max-w-screen-xl mx-auto py-16 px-4 overflow-hidden sm:px-6 lg:px-8">
|
||||
<nav class="-mx-5 -my-2 flex flex-wrap justify-center">
|
||||
<div class="py-2 px-5">
|
||||
<a href="#" class="text-base leading-6 text-cool-gray-500 hover:text-cool-gray-900">
|
||||
About
|
||||
</a>
|
||||
</div>
|
||||
<div class="py-2 px-5">
|
||||
<a href="#" class="text-base leading-6 text-cool-gray-500 hover:text-cool-gray-900">
|
||||
Blog
|
||||
</a>
|
||||
</div>
|
||||
<div class="py-2 px-5">
|
||||
<a href="#" class="text-base leading-6 text-cool-gray-500 hover:text-cool-gray-900">
|
||||
Jobs
|
||||
</a>
|
||||
</div>
|
||||
<div class="py-2 px-5">
|
||||
<a href="#" class="text-base leading-6 text-cool-gray-500 hover:text-cool-gray-900">
|
||||
Press
|
||||
</a>
|
||||
</div>
|
||||
<div class="py-2 px-5">
|
||||
<a href="#" class="text-base leading-6 text-cool-gray-500 hover:text-cool-gray-900">
|
||||
Accessibility
|
||||
</a>
|
||||
</div>
|
||||
<div class="py-2 px-5">
|
||||
<a href="#" class="text-base leading-6 text-cool-gray-500 hover:text-cool-gray-900">
|
||||
Partners
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="mt-8 flex justify-center space-x-6">
|
||||
<a href="#" class="text-cool-gray-400 hover:text-cool-gray-500">
|
||||
<span class="sr-only">Facebook</span>
|
||||
<svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
|
||||
<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-cool-gray-400 hover:text-cool-gray-500">
|
||||
<span class="sr-only">Instagram</span>
|
||||
<svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
|
||||
<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-cool-gray-400 hover:text-cool-gray-500">
|
||||
<span class="sr-only">Twitter</span>
|
||||
<svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
|
||||
<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-cool-gray-400 hover:text-cool-gray-500">
|
||||
<span class="sr-only">GitHub</span>
|
||||
<svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
|
||||
<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-cool-gray-400 hover:text-cool-gray-500">
|
||||
<span class="sr-only">Dribbble</span>
|
||||
<svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
|
||||
<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-center text-base leading-6 text-cool-gray-500">
|
||||
© 2020 Workflow, Inc. All rights reserved.
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,908 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="bg-white">
|
||||
<div class="bg-gray-50">
|
||||
<div class="relative">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6">
|
||||
<div class="flex justify-between items-center border-b-2 border-gray-100 py-6 md:justify-start md:space-x-10">
|
||||
<div class="lg:w-0 lg:flex-1">
|
||||
<a href="#" class="flex">
|
||||
<img class="h-8 w-auto sm:h-10" src="https://tailwindui.com/img/logos/v1/workflow-mark-teal-500.svg" alt="Workflow" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="-mr-2 -my-2 md:hidden">
|
||||
<button type="button" class="rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
|
||||
<span class="sr-only">Open menu</span>
|
||||
<!-- Heroicon name: menu -->
|
||||
<svg class="h-6 w-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<nav class="hidden md:flex space-x-10">
|
||||
<div class="relative">
|
||||
<!-- Item active: "text-gray-900", Item inactive: "text-gray-500" -->
|
||||
<button type="button" class="text-gray-500 group inline-flex items-center space-x-2 text-base leading-6 font-medium hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
|
||||
<span>Solutions</span>
|
||||
<!--
|
||||
Heroicon name: chevron-down
|
||||
|
||||
Item active: "text-gray-600", Item inactive: "text-gray-400"
|
||||
-->
|
||||
<svg class="text-gray-400 h-5 w-5 group-hover:text-gray-500 group-focus:text-gray-500 transition ease-in-out duration-150" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" 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 transform w-screen max-w-md px-2 sm:px-0 lg:ml-0 lg:left-1/2 lg:-translate-x-1/2">
|
||||
<div class="rounded-lg shadow-lg">
|
||||
<div class="rounded-lg shadow-xs overflow-hidden">
|
||||
<div class="relative z-20 bg-white py-6 px-5 grid gap-6 sm:gap-8 sm:p-8">
|
||||
<a href="#" class="-m-3 rounded-lg p-3 flex items-start space-x-4 hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: chart-bar -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-teal-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||
</svg>
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Analytics
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Get a better understanding of where your traffic is coming from.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 rounded-lg p-3 flex items-start space-x-4 hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: cursor-click -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-teal-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122" />
|
||||
</svg>
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Engagement
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Speak directly to your customers in a more meaningful way.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 rounded-lg p-3 flex items-start space-x-4 hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: shield-check -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-teal-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Security
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Your customers data will be safe and secure.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 rounded-lg p-3 flex items-start space-x-4 hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: view-grid -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-teal-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
|
||||
</svg>
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Integrations
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Connect with third-party tools that you’re already using.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 rounded-lg p-3 flex items-start space-x-4 hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: refresh -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-teal-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||
</svg>
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Automations
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Build strategic funnels that will drive your customers to convert
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="bg-gray-50 py-5 px-5 space-y-6 sm:flex sm:space-y-0 sm:space-x-10 sm:px-8">
|
||||
<div class="flow-root">
|
||||
<a href="#" class="-m-3 rounded-md p-3 flex items-center space-x-3 text-base leading-6 font-medium text-gray-900 hover:bg-gray-100 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: play -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span>Watch Demo</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flow-root">
|
||||
<a href="#" class="-m-3 rounded-md p-3 flex items-center space-x-3 text-base leading-6 font-medium text-gray-900 hover:bg-gray-100 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: phone -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
|
||||
</svg>
|
||||
<span>Contact Sales</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="#" class="text-base leading-6 font-medium text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
|
||||
Pricing
|
||||
</a>
|
||||
<a href="#" class="text-base leading-6 font-medium text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
|
||||
Docs
|
||||
</a>
|
||||
|
||||
<div class="relative">
|
||||
<!-- Item active: "text-gray-900", Item inactive: "text-gray-500" -->
|
||||
<button type="button" class="inline-flex items-center space-x-2 text-base leading-6 font-medium text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
|
||||
<span>More</span>
|
||||
<!--
|
||||
Heroicon name: chevron-down
|
||||
|
||||
Item active: "text-gray-600", Item inactive: "text-gray-400"
|
||||
-->
|
||||
<svg class="text-gray-400 h-5 w-5 group-hover:text-gray-500 group-focus:text-gray-500 transition ease-in-out duration-150" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" 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 z-10 left-1/2 transform -translate-x-1/2 mt-3 px-2 w-screen max-w-md sm:px-0">
|
||||
<div class="rounded-lg shadow-lg">
|
||||
<div class="rounded-lg shadow-xs overflow-hidden">
|
||||
<div class="relative z-20 bg-white py-6 px-5 grid gap-6 sm:gap-8 sm:p-8">
|
||||
<a href="#" class="-m-3 rounded-lg p-3 flex items-start space-x-4 hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: support -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-teal-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||
</svg>
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Help Center
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Get all of your questions answered in our forums or contact support.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 rounded-lg p-3 flex items-start space-x-4 hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: bookmark-alt -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-teal-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 4v12l-4-2-4 2V4M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Guides
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Learn how to maximize our platform to get the most out of it.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 rounded-lg p-3 flex items-start space-x-4 hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: calendar -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-teal-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Events
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
See what meet-ups and other events we might be planning near you.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 rounded-lg p-3 flex items-start space-x-4 hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: shield-check -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-teal-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
<div class="space-y-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Security
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Understand how we take your privacy seriously.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="bg-gray-50 py-5 px-5 space-y-5 sm:py-8 sm:px-8">
|
||||
<div class="space-y-4">
|
||||
<h3 class="text-sm leading-5 font-medium text-gray-500 tracking-wide uppercase">
|
||||
Recent Posts
|
||||
</h3>
|
||||
<ul class="space-y-4">
|
||||
<li class="text-base leading-6 truncate">
|
||||
<a href="#" class="font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
|
||||
Boost your conversion rate
|
||||
</a>
|
||||
</li>
|
||||
<li class="text-base leading-6 truncate">
|
||||
<a href="#" class="font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
|
||||
How to use search engine optimization to drive traffic to your site
|
||||
</a>
|
||||
</li>
|
||||
<li class="text-base leading-6 truncate">
|
||||
<a href="#" class="font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
|
||||
Improve your customer experience
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="text-sm leading-5">
|
||||
<a href="#" class="font-medium text-teal-600 hover:text-teal-400 transition ease-in-out duration-150">
|
||||
View all posts →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="hidden md:flex items-center justify-end space-x-8 md:flex-1 lg:w-0">
|
||||
<a href="#" class="whitespace-no-wrap text-base leading-6 font-medium text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900">
|
||||
Sign in
|
||||
</a>
|
||||
<span class="inline-flex rounded-md shadow-sm">
|
||||
<a href="#" class="whitespace-no-wrap bg-teal-500 border border-transparent rounded-md py-2 px-4 inline-flex items-center justify-center text-base leading-6 font-medium text-white hover:bg-teal-400 focus:outline-none focus:border-teal-600 focus:shadow-outline-teal active:bg-teal-600 transition ease-in-out duration-150">
|
||||
Sign up
|
||||
</a>
|
||||
</span>
|
||||
</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 z-10 top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden">
|
||||
<div class="rounded-lg shadow-lg">
|
||||
<div class="bg-white rounded-lg shadow-xs divide-y-2 divide-gray-50">
|
||||
<div class="pt-5 pb-6 px-5 space-y-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/v1/workflow-mark-teal-500.svg" alt="Workflow" />
|
||||
</div>
|
||||
<div class="-mr-2">
|
||||
<button type="button" class="rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
|
||||
<!-- Heroicon name: x -->
|
||||
<svg class="h-6 w-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<nav class="grid gap-y-8">
|
||||
<a href="#" class="-m-3 rounded-md p-3 flex items-center space-x-3 hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: chart-bar -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-teal-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||
</svg>
|
||||
<div class="text-base leading-6 font-medium text-gray-900">
|
||||
Analytics
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 rounded-md p-3 flex items-center space-x-3 hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: cursor-click -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-teal-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122" />
|
||||
</svg>
|
||||
<div class="text-base leading-6 font-medium text-gray-900">
|
||||
Engagement
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 rounded-md p-3 flex items-center space-x-3 hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: shield-check -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-teal-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
<div class="text-base leading-6 font-medium text-gray-900">
|
||||
Security
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 rounded-md p-3 flex items-center space-x-3 hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: view-grid -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-teal-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
|
||||
</svg>
|
||||
<div class="text-base leading-6 font-medium text-gray-900">
|
||||
Integrations
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 rounded-md p-3 flex items-center space-x-3 hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: refresh -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-teal-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||
</svg>
|
||||
<div class="text-base leading-6 font-medium text-gray-900">
|
||||
Automations
|
||||
</div>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="py-6 px-5 space-y-6">
|
||||
<div class="grid grid-cols-2 gap-y-4 gap-x-8">
|
||||
<a href="#" class="text-base leading-6 font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
|
||||
Pricing
|
||||
</a>
|
||||
<a href="#" class="text-base leading-6 font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
|
||||
Docs
|
||||
</a>
|
||||
<a href="#" class="text-base leading-6 font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
|
||||
Enterprise
|
||||
</a>
|
||||
<a href="#" class="text-base leading-6 font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
|
||||
Blog
|
||||
</a>
|
||||
<a href="#" class="text-base leading-6 font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
|
||||
Help Center
|
||||
</a>
|
||||
<a href="#" class="text-base leading-6 font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
|
||||
Guides
|
||||
</a>
|
||||
<a href="#" class="text-base leading-6 font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
|
||||
Security
|
||||
</a>
|
||||
<a href="#" class="text-base leading-6 font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
|
||||
Events
|
||||
</a>
|
||||
</div>
|
||||
<div class="space-y-6">
|
||||
<span class="w-full flex rounded-md shadow-sm">
|
||||
<a href="#" class="w-full bg-teal-500 border border-transparent rounded-md py-2 px-4 flex items-center justify-center text-base leading-6 font-medium text-white hover:bg-teal-400 focus:outline-none focus:border-teal-600 focus:shadow-outline-teal active:bg-teal-600 transition ease-in-out duration-150">
|
||||
Sign up
|
||||
</a>
|
||||
</span>
|
||||
<p class="text-center text-base leading-6 font-medium text-gray-500">
|
||||
Existing customer?
|
||||
<a href="#" class="text-teal-600 hover:text-teal-500 transition ease-in-out duration-150">
|
||||
Sign in
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Header section -->
|
||||
<div class="max-w-screen-xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
|
||||
<div class="text-center">
|
||||
<h1 class="text-base leading-6 font-semibold text-teal-500 uppercase tracking-wide">Pricing</h1>
|
||||
<p class="mt-1 text-4xl leading-10 font-extrabold text-gray-900 sm:text-5xl sm:leading-none sm:tracking-tight lg:text-6xl">Take control of your team.</p>
|
||||
<p class="max-w-xl mx-auto mt-5 text-xl leading-7 text-gray-500">Start building for free, then add a site plan to go live. Account plans unlock additional features.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Split brand panel -->
|
||||
<div class="relative bg-white">
|
||||
<div class="absolute inset-0" aria-hidden="true">
|
||||
<div class="absolute inset-y-0 right-0 w-1/2 bg-gradient-to-r from-teal-500 to-green-400"></div>
|
||||
</div>
|
||||
<div class="relative max-w-screen-xl mx-auto lg:grid lg:grid-cols-2 lg:px-8">
|
||||
<div class="bg-white py-16 px-4 sm:py-24 sm:px-6 lg:px-0 lg:pr-8">
|
||||
<div class="max-w-lg mx-auto lg:mx-0">
|
||||
<h2 class="text-base leading-6 font-semibold tracking-wide text-teal-500 uppercase">
|
||||
Full-featured
|
||||
</h2>
|
||||
<p class="mt-2 text-2xl leading-8 font-extrabold text-gray-900 sm:text-3xl sm:leading-9">Everything you need to talk with your customers</p>
|
||||
<dl class="mt-12 space-y-10">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0 h-12 w-12 bg-gradient-to-r from-teal-500 to-green-400 rounded-md flex items-center justify-center">
|
||||
<!-- Heroicon name: view-list -->
|
||||
<svg class="h-6 w-6 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<dt class="text-lg leading-6 font-medium text-gray-900">
|
||||
List view
|
||||
</dt>
|
||||
<dd class="mt-2 text-base leading-6 text-gray-500">
|
||||
Nunc a, lacinia sed risus neque, arcu, rhoncus. Id mauris justo facilisis aliquam platea vestibulum condimentum morbi.
|
||||
</dd>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0 h-12 w-12 bg-gradient-to-r from-teal-500 to-green-400 rounded-md flex items-center justify-center">
|
||||
<!-- Heroicon name: view-boards -->
|
||||
<svg class="h-6 w-6 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<dt class="text-lg leading-6 font-medium text-gray-900">
|
||||
Boards
|
||||
</dt>
|
||||
<dd class="mt-2 text-base leading-6 text-gray-500">
|
||||
Purus lobortis volutpat posuere id integer nunc tellus. Non mauris malesuada feugiat massa mi pellentesque cum est. Pharetra a varius urna rhoncus, tempor rutrum.
|
||||
</dd>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0 h-12 w-12 bg-gradient-to-r from-teal-500 to-green-400 rounded-md flex items-center justify-center">
|
||||
<!-- Heroicon name: calendar -->
|
||||
<svg class="h-6 w-6 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<dt class="text-lg leading-6 font-medium text-gray-900">
|
||||
Calendar
|
||||
</dt>
|
||||
<dd class="mt-2 text-base leading-6 text-gray-500">
|
||||
Purus lobortis volutpat posuere id integer nunc tellus. Non mauris malesuada feugiat massa mi pellentesque cum est. Pharetra a varius urna rhoncus, tempor rutrum.
|
||||
</dd>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0 h-12 w-12 bg-gradient-to-r from-teal-500 to-green-400 rounded-md flex items-center justify-center">
|
||||
<!-- Heroicon name: users -->
|
||||
<svg class="h-6 w-6 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<dt class="text-lg leading-6 font-medium text-gray-900">
|
||||
Teams
|
||||
</dt>
|
||||
<dd class="mt-2 text-base leading-6 text-gray-500">
|
||||
Tincidunt sollicitudin interdum nunc sit risus at bibendum vitae. Urna, quam ut sit justo non, consectetur et varius.
|
||||
</dd>
|
||||
</div>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gradient-to-r from-teal-500 to-green-400 py-16 px-4 sm:py-24 sm:px-6 lg:bg-none lg:flex lg:items-center lg:justify-end lg:px-0 lg:pl-8">
|
||||
<div class="max-w-lg mx-auto w-full space-y-8 lg:mx-0">
|
||||
<div>
|
||||
<h2 class="sr-only">Price</h2>
|
||||
<p class="relative grid grid-cols-2">
|
||||
<span class="flex flex-col text-center">
|
||||
<span class="text-5xl leading-none font-extrabold text-white tracking-tight">$99</span>
|
||||
<span class="mt-2 text-base leading-6 font-medium text-teal-100">Setup fee</span>
|
||||
<span class="sr-only">plus</span>
|
||||
</span>
|
||||
<span class="pointer-events-none absolute h-12 w-full flex items-center justify-center" aria-hidden="true">
|
||||
<!-- Heroicon name: plus -->
|
||||
<svg class="h-6 w-6 text-teal-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
<span class="flex flex-col text-center">
|
||||
<span class="text-5xl leading-none font-extrabold text-white tracking-tight">$4</span>
|
||||
<span class="mt-2 text-base leading-6 font-medium text-teal-100">Per month</span>
|
||||
</span>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<ul class="bg-teal-600 bg-opacity-50 rounded sm:grid sm:grid-cols-2 sm:grid-rows-3 sm:grid-flow-col">
|
||||
<li class="py-4 px-4 flex items-center space-x-3 text-base leading-6 text-white">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-6 w-6 text-teal-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>Unlimited Projects</span>
|
||||
</li>
|
||||
<li class="border-t border-teal-300 border-opacity-25 py-4 px-4 flex items-center space-x-3 text-base leading-6 text-white">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-6 w-6 text-teal-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>Unlimited storage</span>
|
||||
</li>
|
||||
<li class="border-t border-teal-300 border-opacity-25 py-4 px-4 flex items-center space-x-3 text-base leading-6 text-white">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-6 w-6 text-teal-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>Cancel anytime</span>
|
||||
</li>
|
||||
<li class="border-t border-teal-300 border-opacity-25 py-4 px-4 flex items-center space-x-3 text-base leading-6 text-white sm:border-t-0 sm:border-l">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-6 w-6 text-teal-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>No per user fees</span>
|
||||
</li>
|
||||
<li class="border-t border-teal-300 border-opacity-25 py-4 px-4 flex items-center space-x-3 text-base leading-6 text-white sm:border-l">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-6 w-6 text-teal-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>24/7 support</span>
|
||||
</li>
|
||||
<li class="border-t border-teal-300 border-opacity-25 py-4 px-4 flex items-center space-x-3 text-base leading-6 text-white sm:border-l">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-6 w-6 text-teal-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>Cancel anytime</span>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="#" class="w-full bg-white border border-transparent rounded-md py-4 px-8 flex items-center justify-center text-lg leading-6 font-medium text-teal-500 hover:text-teal-400 transition duration-150 ease-in-out md:px-10">
|
||||
Get started today
|
||||
</a>
|
||||
<a href="#" class="block text-center text-base leading-6 font-medium text-teal-100 hover:text-white transition duration-150 ease-in-out">
|
||||
Try Workflow Lite for free
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Logo cloud -->
|
||||
<div class="bg-teal-200 bg-opacity-25">
|
||||
<div class="max-w-screen-xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
|
||||
<div class="lg:grid lg:grid-cols-2 lg:gap-8">
|
||||
<h2 class="max-w-md mx-auto text-3xl leading-9 font-extrabold text-teal-900 text-center lg:max-w-xl lg:text-left">
|
||||
The world's most innovative companies use Workflow
|
||||
</h2>
|
||||
<div class="mt-8 flow-root lg:mt-0 self-center">
|
||||
<div class="-mt-4 -ml-8 flex flex-wrap justify-between lg:-ml-4">
|
||||
<div class="mt-4 ml-8 flex flex-grow flex-shrink-0 justify-center lg:flex-grow-0 lg:ml-4">
|
||||
<img class="h-12" src="https://tailwindui.com/img/logos/v1/workcation-logo-teal-900.svg" alt="Workcation" />
|
||||
</div>
|
||||
<div class="mt-4 ml-8 flex flex-grow flex-shrink-0 justify-center lg:flex-grow-0 lg:ml-4">
|
||||
<img class="h-12" src="https://tailwindui.com/img/logos/v1/tuple-logo-teal-900.svg" alt="Tuple" />
|
||||
</div>
|
||||
<div class="mt-4 ml-8 flex flex-grow flex-shrink-0 justify-center lg:flex-grow-0 lg:ml-4">
|
||||
<img class="h-12" src="https://tailwindui.com/img/logos/v1/level-logo-teal-900.svg" alt="Level" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- FAQs -->
|
||||
<div class="max-w-screen-xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
|
||||
<h2 class="text-3xl leading-9 font-extrabold text-gray-900 text-center">
|
||||
Frequently asked questions
|
||||
</h2>
|
||||
<div class="mt-12">
|
||||
<dl class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:grid-rows-2 md:gap-x-8 md:gap-y-12 lg:grid-cols-3">
|
||||
<div class="space-y-2">
|
||||
<dt class="text-lg leading-6 font-medium text-gray-900">
|
||||
What's the best thing about Switzerland?
|
||||
</dt>
|
||||
<dd class="text-base leading-6 text-gray-500">
|
||||
I don'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 leading-6 font-medium text-gray-900">
|
||||
How do you make holy water?
|
||||
</dt>
|
||||
<dd class="text-base leading-6 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 leading-6 font-medium text-gray-900">
|
||||
Why do you never see elephants hiding in trees?
|
||||
</dt>
|
||||
<dd class="text-base leading-6 text-gray-500">
|
||||
Because they'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 leading-6 font-medium text-gray-900">
|
||||
What do you call someone with no body and no nose?
|
||||
</dt>
|
||||
<dd class="text-base leading-6 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 leading-6 font-medium text-gray-900">
|
||||
Why can't you hear a pterodactyl go to the bathroom?
|
||||
</dt>
|
||||
<dd class="text-base leading-6 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 leading-6 font-medium text-gray-900">
|
||||
Why did the invisible man turn down the job offer?
|
||||
</dt>
|
||||
<dd class="text-base leading-6 text-gray-500">
|
||||
He couldn't see himself doing it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CTA section -->
|
||||
<div class="bg-gradient-to-r from-teal-500 to-green-400">
|
||||
<div class="max-w-2xl mx-auto py-16 px-4 text-center sm:py-20 sm:px-6 lg:px-8">
|
||||
<h2 class="text-3xl leading-9 font-extrabold text-white sm:text-4xl sm:leading-10">
|
||||
<span class="block">Boost your productivity.</span>
|
||||
<span class="block text-teal-900">Start using Workflow today.</span>
|
||||
</h2>
|
||||
<p class="mt-4 text-lg leading-6 text-teal-100">Ac euismod vel sit maecenas id pellentesque eu sed consectetur. Malesuada adipiscing sagittis vel nulla nec.</p>
|
||||
<a href="#" class="mt-8 w-full bg-white border border-transparent rounded-md py-3 px-5 inline-flex items-center justify-center text-base leading-6 font-medium text-teal-500 hover:text-teal-400 transition duration-150 ease-in-out sm:w-auto">
|
||||
Sign up for free
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer 4-column with newsletter and localization dark -->
|
||||
<footer class="bg-gray-900">
|
||||
<div class="max-w-screen-xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
|
||||
<h2 class="sr-only">Footer</h2>
|
||||
<div class="pb-8 xl:grid xl:grid-cols-5 xl:gap-8">
|
||||
<div class="grid grid-cols-2 gap-8 xl:col-span-4">
|
||||
<div class="md:grid md:grid-cols-2 md:gap-8">
|
||||
<div>
|
||||
<h3 class="text-sm leading-5 font-semibold text-gray-400 tracking-wider uppercase">
|
||||
Solutions
|
||||
</h3>
|
||||
<ul class="mt-4 space-y-4">
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-300 hover:text-white">
|
||||
Marketing
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-300 hover:text-white">
|
||||
Analytics
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-300 hover:text-white">
|
||||
Commerce
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-300 hover:text-white">
|
||||
Insights
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-12 md:mt-0">
|
||||
<h3 class="text-sm leading-5 font-semibold text-gray-400 tracking-wider uppercase">
|
||||
Support
|
||||
</h3>
|
||||
<ul class="mt-4 space-y-4">
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-300 hover:text-white">
|
||||
Pricing
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-300 hover:text-white">
|
||||
Documentation
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-300 hover:text-white">
|
||||
Guides
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-300 hover:text-white">
|
||||
API Status
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:grid md:grid-cols-2 md:gap-8">
|
||||
<div>
|
||||
<h3 class="text-sm leading-5 font-semibold text-gray-400 tracking-wider uppercase">
|
||||
Company
|
||||
</h3>
|
||||
<ul class="mt-4 space-y-4">
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-300 hover:text-white">
|
||||
About
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-300 hover:text-white">
|
||||
Blog
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-300 hover:text-white">
|
||||
Jobs
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-300 hover:text-white">
|
||||
Press
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-300 hover:text-white">
|
||||
Partners
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-12 md:mt-0">
|
||||
<h3 class="text-sm leading-5 font-semibold text-gray-400 tracking-wider uppercase">
|
||||
Legal
|
||||
</h3>
|
||||
<ul class="mt-4 space-y-4">
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-300 hover:text-white">
|
||||
Claim
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-300 hover:text-white">
|
||||
Privacy
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-300 hover:text-white">
|
||||
Terms
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-12 xl:mt-0">
|
||||
<h3 class="text-sm leading-5 font-semibold text-gray-400 tracking-wider uppercase">
|
||||
Language & Currency
|
||||
</h3>
|
||||
<form class="mt-4 space-y-4 sm:max-w-xs">
|
||||
<fieldset class="w-full">
|
||||
<label for="language" class="sr-only">Language</label>
|
||||
<div class="relative">
|
||||
<select id="language" class="appearance-none block w-full bg-gray-800 border border-transparent rounded-md py-2 pl-3 pr-10 text-base leading-6 text-white focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5">
|
||||
<option selected>English</option>
|
||||
<option>French</option>
|
||||
<option>German</option>
|
||||
<option>Japanese</option>
|
||||
<option>Spanish</option>
|
||||
</select>
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 px-2 flex items-center" aria-hidden="true">
|
||||
<!-- Heroicon name: chevron-down -->
|
||||
<svg class="h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="w-full">
|
||||
<label for="currency" class="sr-only">Currency</label>
|
||||
<div class="mt-1.5 relative">
|
||||
<select id="currency" class="appearance-none block w-full bg-gray-800 border border-transparent rounded-md py-2 pl-3 pr-10 text-base leading-6 text-white focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5">
|
||||
<option>ARS</option>
|
||||
<option selected>AUD</option>
|
||||
<option>CAD</option>
|
||||
<option>CHF</option>
|
||||
<option>EUR</option>
|
||||
<option>GBP</option>
|
||||
<option>JPY</option>
|
||||
<option>USD</option>
|
||||
</select>
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 px-2 flex items-center" aria-hidden="true">
|
||||
<!-- Heroicon name: chevron-down -->
|
||||
<svg class="h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-t border-gray-700 pt-8 space-y-4 lg:space-y-0 lg:flex lg:items-center lg:justify-between xl:mt-0">
|
||||
<div class="space-y-2">
|
||||
<h3 class="text-sm leading-5 font-semibold text-gray-400 tracking-wider uppercase">
|
||||
Subscribe to our newsletter
|
||||
</h3>
|
||||
<p class="text-base leading-6 text-gray-300">
|
||||
The latest news, articles, and resources, sent to your inbox weekly.
|
||||
</p>
|
||||
</div>
|
||||
<form class="sm:flex sm:max-w-md">
|
||||
<label for="emailAddress" class="sr-only">Email address</label>
|
||||
<input type="email" id="emailAddress" required class="appearance-none min-w-0 w-full bg-white border border-transparent py-2 px-4 rounded-md text-base leading-6 text-gray-900 placeholder-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue focus:placeholder-gray-400 transition duration-150 ease-in-out sm:max-w-xs" placeholder="Enter your email" />
|
||||
<div class="mt-3 rounded-md sm:mt-0 sm:ml-3 sm:flex-shrink-0">
|
||||
<button type="submit" class="w-full bg-gray-700 border border-transparent rounded-md py-2 px-4 flex items-center justify-center text-base leading-6 font-medium text-teal-100 hover:bg-gray-600 focus:outline-none focus:border-gray-800 focus:shadow-outline-gray active:bg-gray-800 transition duration-150 ease-in-out">
|
||||
Subscribe
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="mt-8 border-t border-gray-700 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-300">
|
||||
<span class="sr-only">Facebook</span>
|
||||
<svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
|
||||
<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-300">
|
||||
<span class="sr-only">Instagram</span>
|
||||
<svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
|
||||
<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-300">
|
||||
<span class="sr-only">Twitter</span>
|
||||
<svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
|
||||
<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-300">
|
||||
<span class="sr-only">GitHub</span>
|
||||
<svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
|
||||
<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-300">
|
||||
<span class="sr-only">Dribbble</span>
|
||||
<svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
|
||||
<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 leading-6 text-gray-400 md:mt-0 md:order-1">
|
||||
© 2020 Workflow, Inc. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,103 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="bg-white pt-16 pb-20 px-4 sm:px-6 lg:pt-24 lg:pb-28 lg:px-8">
|
||||
<div class="relative max-w-lg mx-auto lg:max-w-7xl">
|
||||
<div>
|
||||
<h2 class="text-3xl leading-9 tracking-tight font-extrabold text-gray-900 sm:text-4xl sm:leading-10">
|
||||
Press
|
||||
</h2>
|
||||
<div class="mt-3 sm:mt-4 lg:grid lg:grid-cols-2 lg:gap-5 lg:items-center">
|
||||
<p class="text-xl leading-7 text-gray-500">
|
||||
Get weekly articles in your inbox on how to grow your business.
|
||||
</p>
|
||||
<form class="mt-6 flex lg:mt-0 lg:justify-end">
|
||||
<input aria-label="Email address" type="email" required class="appearance-none w-full px-4 py-2 border border-gray-300 text-base leading-6 rounded-md text-gray-900 bg-white placeholder-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out lg:max-w-xs" placeholder="Enter your email" />
|
||||
<span class="ml-3 flex-shrink-0 inline-flex rounded-md shadow-sm">
|
||||
<button type="button" class="inline-flex items-center px-4 py-2 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition ease-in-out duration-150">
|
||||
Notify me
|
||||
</button>
|
||||
</span>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 grid gap-16 border-t-2 border-gray-100 pt-10 lg:grid-cols-2 lg:gap-x-5 lg:gap-y-12">
|
||||
<div>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
<time datetime="2020-03-16">Mar 16, 2020</time>
|
||||
</p>
|
||||
<a href="#" class="block">
|
||||
<h3 class="mt-2 text-xl leading-7 font-semibold text-gray-900">
|
||||
Boost your conversion rate
|
||||
</h3>
|
||||
<p class="mt-3 text-base leading-6 text-gray-500">
|
||||
Illo sint voluptas. Error voluptates culpa eligendi. Hic vel totam vitae illo. Non aliquid explicabo necessitatibus unde. Sed exercitationem placeat consectetur nulla deserunt vel. Iusto corrupti dicta.
|
||||
</p>
|
||||
</a>
|
||||
<div class="mt-3">
|
||||
<a href="#" class="text-base leading-6 font-semibold text-indigo-600 hover:text-indigo-500 transition ease-in-out duration-150">
|
||||
Read full story
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
<time datetime="2020-03-10">Mar 10, 2020</time>
|
||||
</p>
|
||||
<a href="#" class="block">
|
||||
<h3 class="mt-2 text-xl leading-7 font-semibold text-gray-900">
|
||||
How to use search engine optimization to drive sales
|
||||
</h3>
|
||||
<p class="mt-3 text-base leading-6 text-gray-500">
|
||||
Optio cum necessitatibus dolor voluptatum provident commodi et. Qui aperiam fugiat nemo cumque.
|
||||
</p>
|
||||
</a>
|
||||
<div class="mt-3">
|
||||
<a href="#" class="text-base leading-6 font-semibold text-indigo-600 hover:text-indigo-500 transition ease-in-out duration-150">
|
||||
Read full story
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
<time datetime="2020-02-12">Feb 12, 2020</time>
|
||||
</p>
|
||||
<a href="#" class="block">
|
||||
<h3 class="mt-2 text-xl leading-7 font-semibold text-gray-900">
|
||||
Improve your customer experience
|
||||
</h3>
|
||||
<p class="mt-3 text-base leading-6 text-gray-500">
|
||||
Cupiditate maiores ullam eveniet adipisci in doloribus nulla minus. Voluptas iusto libero adipisci rem et corporis.
|
||||
</p>
|
||||
</a>
|
||||
<div class="mt-3">
|
||||
<a href="#" class="text-base leading-6 font-semibold text-indigo-600 hover:text-indigo-500 transition ease-in-out duration-150">
|
||||
Read full story
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
<time datetime="2020-01-29">Jan 29, 2020</time>
|
||||
</p>
|
||||
<a href="#" class="block">
|
||||
<h3 class="mt-2 text-xl leading-7 font-semibold text-gray-900">
|
||||
Writing effective landing page copy
|
||||
</h3>
|
||||
<p class="mt-3 text-base leading-6 text-gray-500">
|
||||
Ipsum voluptates quia doloremque culpa qui eius. Id qui id officia molestias quaerat deleniti. Qui facere numquam autem libero quae cupiditate asperiores vitae cupiditate. Cumque id deleniti explicabo.
|
||||
</p>
|
||||
</a>
|
||||
<div class="mt-3">
|
||||
<a href="#" class="text-base leading-6 font-semibold text-indigo-600 hover:text-indigo-500 transition ease-in-out duration-150">
|
||||
Read full story
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,163 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="relative bg-gray-50 pt-16 pb-20 px-4 sm:px-6 lg:pt-24 lg:pb-28 lg:px-8">
|
||||
<div class="absolute inset-0">
|
||||
<div class="bg-white h-1/3 sm:h-2/3"></div>
|
||||
</div>
|
||||
<div class="relative max-w-7xl mx-auto">
|
||||
<div class="text-center">
|
||||
<h2 class="text-3xl leading-9 tracking-tight font-extrabold text-gray-900 sm:text-4xl sm:leading-10">
|
||||
From the blog
|
||||
</h2>
|
||||
<p class="mt-3 max-w-2xl mx-auto text-xl leading-7 text-gray-500 sm:mt-4">
|
||||
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa libero labore natus atque, ducimus sed.
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-12 grid gap-5 max-w-lg mx-auto lg:grid-cols-3 lg:max-w-none">
|
||||
<div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
|
||||
<div class="flex-shrink-0">
|
||||
<img class="h-48 w-full object-cover" src="https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80" alt="" />
|
||||
</div>
|
||||
<div class="flex-1 bg-white p-6 flex flex-col justify-between">
|
||||
<div class="flex-1">
|
||||
<p class="text-sm leading-5 font-medium text-indigo-600">
|
||||
<a href="#" class="hover:underline">
|
||||
Blog
|
||||
</a>
|
||||
</p>
|
||||
<a href="#" class="block">
|
||||
<h3 class="mt-2 text-xl leading-7 font-semibold text-gray-900">
|
||||
Boost your conversion rate
|
||||
</h3>
|
||||
<p class="mt-3 text-base leading-6 text-gray-500">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto accusantium praesentium eius, ut atque fuga culpa, similique sequi cum eos quis dolorum.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-6 flex items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<a href="#">
|
||||
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<p class="text-sm leading-5 font-medium text-gray-900">
|
||||
<a href="#" class="hover:underline">
|
||||
Roel Aufderhar
|
||||
</a>
|
||||
</p>
|
||||
<div class="flex text-sm leading-5 text-gray-500">
|
||||
<time datetime="2020-03-16">
|
||||
Mar 16, 2020
|
||||
</time>
|
||||
<span class="mx-1">
|
||||
·
|
||||
</span>
|
||||
<span>
|
||||
6 min read
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
|
||||
<div class="flex-shrink-0">
|
||||
<img class="h-48 w-full object-cover" src="https://images.unsplash.com/photo-1547586696-ea22b4d4235d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80" alt="" />
|
||||
</div>
|
||||
<div class="flex-1 bg-white p-6 flex flex-col justify-between">
|
||||
<div class="flex-1">
|
||||
<p class="text-sm leading-5 font-medium text-indigo-600">
|
||||
<a href="#" class="hover:underline">
|
||||
Video
|
||||
</a>
|
||||
</p>
|
||||
<a href="#" class="block">
|
||||
<h3 class="mt-2 text-xl leading-7 font-semibold text-gray-900">
|
||||
How to use search engine optimization to drive sales
|
||||
</h3>
|
||||
<p class="mt-3 text-base leading-6 text-gray-500">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit facilis asperiores porro quaerat doloribus, eveniet dolore. Adipisci tempora aut inventore optio animi., tempore temporibus quo laudantium.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-6 flex items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<a href="#">
|
||||
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<p class="text-sm leading-5 font-medium text-gray-900">
|
||||
<a href="#" class="hover:underline">
|
||||
Brenna Goyette
|
||||
</a>
|
||||
</p>
|
||||
<div class="flex text-sm leading-5 text-gray-500">
|
||||
<time datetime="2020-03-16">
|
||||
Mar 16, 2020
|
||||
</time>
|
||||
<span class="mx-1">
|
||||
·
|
||||
</span>
|
||||
<span>
|
||||
6 min read
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
|
||||
<div class="flex-shrink-0">
|
||||
<img class="h-48 w-full object-cover" src="https://images.unsplash.com/photo-1492724441997-5dc865305da7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80" alt="" />
|
||||
</div>
|
||||
<div class="flex-1 bg-white p-6 flex flex-col justify-between">
|
||||
<div class="flex-1">
|
||||
<p class="text-sm leading-5 font-medium text-indigo-600">
|
||||
<a href="#" class="hover:underline"> Case Study</a>
|
||||
</p>
|
||||
<a href="#" class="block">
|
||||
<h3 class="mt-2 text-xl leading-7 font-semibold text-gray-900">
|
||||
Improve your customer experience
|
||||
</h3>
|
||||
<p class="mt-3 text-base leading-6 text-gray-500">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint harum rerum voluptatem quo recusandae magni placeat saepe molestiae, sed excepturi cumque corporis perferendis hic.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-6 flex items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<a href="#">
|
||||
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<p class="text-sm leading-5 font-medium text-gray-900">
|
||||
<a href="#" class="hover:underline">
|
||||
Daniela Metz
|
||||
</a>
|
||||
</p>
|
||||
<div class="flex text-sm leading-5 text-gray-500">
|
||||
<time datetime="2020-03-16">
|
||||
Mar 16, 2020
|
||||
</time>
|
||||
<span class="mx-1">
|
||||
·
|
||||
</span>
|
||||
<span>
|
||||
6 min read
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,147 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="bg-white pt-16 pb-20 px-4 sm:px-6 lg:pt-24 lg:pb-28 lg:px-8">
|
||||
<div class="relative max-w-lg mx-auto lg:max-w-7xl">
|
||||
<div>
|
||||
<h2 class="text-3xl leading-9 tracking-tight font-extrabold text-gray-900 sm:text-4xl sm:leading-10">
|
||||
Recent publications
|
||||
</h2>
|
||||
<p class="mt-3 text-xl leading-7 text-gray-500 sm:mt-4">
|
||||
Nullam risus blandit ac aliquam justo ipsum. Quam mauris volutpat massa dictumst amet. Sapien tortor lacus arcu.
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-12 grid gap-16 border-t-2 border-gray-100 pt-12 lg:grid-cols-3 lg:gap-x-5 lg:gap-y-12">
|
||||
<div>
|
||||
<div>
|
||||
<a href="#" class="inline-block">
|
||||
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium leading-5 bg-indigo-100 text-indigo-800">
|
||||
Article
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<a href="#" class="block">
|
||||
<h3 class="mt-4 text-xl leading-7 font-semibold text-gray-900">
|
||||
Boost your conversion rate
|
||||
</h3>
|
||||
<p class="mt-3 text-base leading-6 text-gray-500">
|
||||
Nullam risus blandit ac aliquam justo ipsum. Quam mauris volutpat massa dictumst amet. Sapien tortor lacus arcu.
|
||||
</p>
|
||||
</a>
|
||||
<div class="mt-6 flex items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<a href="#">
|
||||
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<p class="text-sm leading-5 font-medium text-gray-900">
|
||||
<a href="#">
|
||||
Paul York
|
||||
</a>
|
||||
</p>
|
||||
<div class="flex text-sm leading-5 text-gray-500">
|
||||
<time datetime="2020-03-16">
|
||||
Mar 16, 2020
|
||||
</time>
|
||||
<span class="mx-1">
|
||||
·
|
||||
</span>
|
||||
<span>
|
||||
6 min read
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<a href="#" class="inline-block">
|
||||
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium leading-5 bg-pink-100 text-pink-800">
|
||||
Video
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<a href="#" class="block">
|
||||
<h3 class="mt-4 text-xl leading-7 font-semibold text-gray-900">
|
||||
How to use search engine optimization to drive sales
|
||||
</h3>
|
||||
<p class="mt-3 text-base leading-6 text-gray-500">
|
||||
Nullam risus blandit ac aliquam justo ipsum. Quam mauris volutpat massa dictumst amet. Sapien tortor lacus arcu.
|
||||
</p>
|
||||
</a>
|
||||
<div class="mt-6 flex items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<a href="#">
|
||||
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<p class="text-sm leading-5 font-medium text-gray-900">
|
||||
<a href="#">
|
||||
Dessie Ryan
|
||||
</a>
|
||||
</p>
|
||||
<div class="flex text-sm leading-5 text-gray-500">
|
||||
<time datetime="2020-03-15">
|
||||
Mar 15, 2020
|
||||
</time>
|
||||
<span class="mx-1">
|
||||
·
|
||||
</span>
|
||||
<span>
|
||||
4 min read
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<a href="#" class="inline-block">
|
||||
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium leading-5 bg-green-100 text-green-800">
|
||||
Case Study
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<a href="#" class="block">
|
||||
<h3 class="mt-4 text-xl leading-7 font-semibold text-gray-900">
|
||||
Improve your customer experience
|
||||
</h3>
|
||||
<p class="mt-3 text-base leading-6 text-gray-500">
|
||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ab iure iusto fugiat commodi sequi.
|
||||
</p>
|
||||
</a>
|
||||
<div class="mt-6 flex items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<a href="#">
|
||||
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<p class="text-sm leading-5 font-medium text-gray-900">
|
||||
<a href="#">
|
||||
Easter Collins
|
||||
</a>
|
||||
</p>
|
||||
<div class="flex text-sm leading-5 text-gray-500">
|
||||
<time datetime="2020-03-10">
|
||||
Mar 10, 2020
|
||||
</time>
|
||||
<span class="mx-1">
|
||||
·
|
||||
</span>
|
||||
<span>
|
||||
11 min read
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,268 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Tailwind UI Components</title>
|
||||
<link href="https://fonts.googleapis.com/css?family=Inter&display=swap" rel="stylesheet"/>
|
||||
<link href="https://cdn.jsdelivr.net/npm/@tailwindcss/ui@latest/dist/tailwind-ui.min.css" rel="stylesheet"/>
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.0.1/dist/alpine.js" defer></script>
|
||||
<link href="https://cdn.jsdelivr.net/npm/highlightjs-themes@1.0.0/darkula.css" rel="stylesheet"/>
|
||||
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/highlight.min.js"></script>
|
||||
<style>
|
||||
* { box-sizing: border-box; }
|
||||
.font-sans { font-family: "Inter", sans-serif; }
|
||||
.hljs {
|
||||
background: #252f3f;
|
||||
color: white;
|
||||
}
|
||||
.hljs-tag {
|
||||
color: white;
|
||||
}
|
||||
.hljs-name {
|
||||
color: #ff8383;
|
||||
}
|
||||
.hljs-attr {
|
||||
color: #ffe484;
|
||||
font-style: italic;
|
||||
}
|
||||
.hljs-string {
|
||||
color: #b5f4a5;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="font-sans antialiased text-gray-900">
|
||||
<main>
|
||||
<div class="py-4 sm:py-12">
|
||||
<div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="pb-2">
|
||||
<nav class="flex items-center text-sm leading-5 font-medium">
|
||||
<a href="/#marketing" class="text-gray-500 hover:text-gray-700 focus:outline-none focus:underline transition duration-150 ease-in-out">
|
||||
Marketing
|
||||
</a>
|
||||
<svg class="flex-shrink-0 mx-2 h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<a href="/#marketing-page-sections" class="text-gray-500 hover:text-gray-700 focus:outline-none focus:underline transition duration-150 ease-in-out">
|
||||
Page Sections
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
<h2 class="text-2xl leading-8 font-semibold font-display text-gray-900 sm:text-3xl sm:leading-9">
|
||||
Blog Sections
|
||||
</h2>
|
||||
</div>
|
||||
<div class="mt-6 bg-white max-w-8xl mx-auto sm:px-6 lg:px-8">
|
||||
<div class="max-w-8xl mx-auto">
|
||||
|
||||
<div id="component-87c1f31420d3224e19a5c375ba9fb117c834d049" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-87c1f31420d3224e19a5c375ba9fb117c834d049">2-column with sign-up</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/blog-sections/2_column_with_sign_up.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-b7e60b9654cd015ff999e4ba44d7221a87b4e286" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-b7e60b9654cd015ff999e4ba44d7221a87b4e286">3-column cards</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/blog-sections/3_column_cards.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-6c070a18996ff4e0b1fc396274d26b3bb89720ad" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-6c070a18996ff4e0b1fc396274d26b3bb89720ad">3-column with badges</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/blog-sections/3_column_with_badges.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
(function() {
|
||||
const getDocHeight = doc => {
|
||||
doc = doc || document;
|
||||
const body = doc.body;
|
||||
const html = doc.documentElement;
|
||||
const height = Math.max(
|
||||
body.scrollHeight,
|
||||
body.offsetHeight,
|
||||
html.clientHeight,
|
||||
html.scrollHeight,
|
||||
html.offsetHeight
|
||||
);
|
||||
return height;
|
||||
};
|
||||
|
||||
window.resizableIFrame = function() {
|
||||
return {
|
||||
resizing: !1,
|
||||
width: "100%",
|
||||
init: function() {}
|
||||
};
|
||||
};
|
||||
const iframes = document.querySelectorAll("iframe");
|
||||
Array.from(iframes).forEach(iframe => {
|
||||
iframe.addEventListener("load", e => {
|
||||
const iframe = e.srcElement;
|
||||
const doc = iframe.contentDocument || iframe.contentWindow.document;
|
||||
doc.body.classList.add("antialiased", "font-sans", "bg-white")
|
||||
iframe.style.visibility = "hidden";
|
||||
iframe.style.height = "10px";
|
||||
const height = Math.max(getDocHeight(doc), 256) + "px";
|
||||
iframe.style.height = height;
|
||||
iframe.style.visibility = "visible";
|
||||
|
||||
const html = doc.body.innerHTML.trim();
|
||||
const container = iframe.parentElement.parentElement.parentElement;
|
||||
hljs.configure({useBR: false, tabReplace: ' '});
|
||||
const highlighted = hljs.highlight('html', html);
|
||||
const codeElem = container.children[1].querySelector("code");
|
||||
codeElem.innerHTML = highlighted.value;
|
||||
});
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,112 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="bg-white py-16 px-4 overflow-hidden sm:px-6 lg:px-8 lg:py-24">
|
||||
<div class="relative max-w-xl mx-auto">
|
||||
<svg class="absolute left-full transform translate-x-1/2" width="404" height="404" fill="none" viewBox="0 0 404 404">
|
||||
<defs>
|
||||
<pattern id="85737c0e-0916-41d7-917f-596dc7edfa27" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
|
||||
<rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="404" height="404" fill="url(#85737c0e-0916-41d7-917f-596dc7edfa27)" />
|
||||
</svg>
|
||||
<svg class="absolute right-full bottom-0 transform -translate-x-1/2" width="404" height="404" fill="none" viewBox="0 0 404 404">
|
||||
<defs>
|
||||
<pattern id="85737c0e-0916-41d7-917f-596dc7edfa27" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
|
||||
<rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="404" height="404" fill="url(#85737c0e-0916-41d7-917f-596dc7edfa27)" />
|
||||
</svg>
|
||||
<div class="text-center">
|
||||
<h2 class="text-3xl leading-9 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10">
|
||||
Contact sales
|
||||
</h2>
|
||||
<p class="mt-4 text-lg leading-6 text-gray-500">
|
||||
Nullam risus blandit ac aliquam justo ipsum. Quam mauris volutpat massa dictumst amet. Sapien tortor lacus arcu.
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-12">
|
||||
<form action="#" method="POST" class="grid grid-cols-1 gap-y-6 sm:grid-cols-2 sm:gap-x-8">
|
||||
<div>
|
||||
<label for="first_name" class="block text-sm font-medium leading-5 text-gray-700">First name</label>
|
||||
<div class="mt-1 relative rounded-md shadow-sm">
|
||||
<input id="first_name" class="form-input py-3 px-4 block w-full transition ease-in-out duration-150" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="last_name" class="block text-sm font-medium leading-5 text-gray-700">Last name</label>
|
||||
<div class="mt-1 relative rounded-md shadow-sm">
|
||||
<input id="last_name" class="form-input py-3 px-4 block w-full transition ease-in-out duration-150" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="sm:col-span-2">
|
||||
<label for="company" class="block text-sm font-medium leading-5 text-gray-700">Company</label>
|
||||
<div class="mt-1 relative rounded-md shadow-sm">
|
||||
<input id="company" class="form-input py-3 px-4 block w-full transition ease-in-out duration-150" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="sm:col-span-2">
|
||||
<label for="email" class="block text-sm font-medium leading-5 text-gray-700">Email</label>
|
||||
<div class="mt-1 relative rounded-md shadow-sm">
|
||||
<input id="email" type="email" class="form-input py-3 px-4 block w-full transition ease-in-out duration-150" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="sm:col-span-2">
|
||||
<label for="phone_number" class="block text-sm font-medium leading-5 text-gray-700">Phone Number</label>
|
||||
<div class="mt-1 relative rounded-md shadow-sm">
|
||||
<div class="absolute inset-y-0 left-0 flex items-center">
|
||||
<select aria-label="Country" class="form-select h-full py-0 pl-4 pr-8 border-transparent bg-transparent text-gray-500 transition ease-in-out duration-150">
|
||||
<option>US</option>
|
||||
<option>CA</option>
|
||||
<option>EU</option>
|
||||
</select>
|
||||
</div>
|
||||
<input id="phone_number" class="form-input py-3 px-4 block w-full pl-20 transition ease-in-out duration-150" placeholder="+1 (555) 987-6543" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="sm:col-span-2">
|
||||
<label for="message" class="block text-sm font-medium leading-5 text-gray-700">Message</label>
|
||||
<div class="mt-1 relative rounded-md shadow-sm">
|
||||
<textarea id="message" rows="4" class="form-textarea py-3 px-4 block w-full transition ease-in-out duration-150"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sm:col-span-2">
|
||||
<div class="flex items-start">
|
||||
<div class="flex-shrink-0">
|
||||
<!--
|
||||
Simple toggle
|
||||
|
||||
On: "bg-indigo-600", Off: "bg-gray-200"
|
||||
-->
|
||||
<span role="checkbox" tabindex="0" aria-checked="false" class="bg-gray-200 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:shadow-outline">
|
||||
<!-- On: "translate-x-5", Off: "translate-x-0" -->
|
||||
<span aria-hidden="true" class="translate-x-0 inline-block h-5 w-5 rounded-full bg-white shadow transform transition ease-in-out duration-200"></span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<p class="text-base leading-6 text-gray-500">
|
||||
By selecting this, you agree to the
|
||||
<a href="#" class="font-medium text-gray-700 underline">Privacy Policy</a>
|
||||
and
|
||||
<a href="#" class="font-medium text-gray-700 underline">Cookie Policy</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sm:col-span-2">
|
||||
<span class="w-full inline-flex rounded-md shadow-sm">
|
||||
<button type="button" class="w-full inline-flex items-center justify-center px-6 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition ease-in-out duration-150">
|
||||
Let's talk
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,376 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Tailwind UI Components</title>
|
||||
<link href="https://fonts.googleapis.com/css?family=Inter&display=swap" rel="stylesheet"/>
|
||||
<link href="https://cdn.jsdelivr.net/npm/@tailwindcss/ui@latest/dist/tailwind-ui.min.css" rel="stylesheet"/>
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.0.1/dist/alpine.js" defer></script>
|
||||
<link href="https://cdn.jsdelivr.net/npm/highlightjs-themes@1.0.0/darkula.css" rel="stylesheet"/>
|
||||
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/highlight.min.js"></script>
|
||||
<style>
|
||||
* { box-sizing: border-box; }
|
||||
.font-sans { font-family: "Inter", sans-serif; }
|
||||
.hljs {
|
||||
background: #252f3f;
|
||||
color: white;
|
||||
}
|
||||
.hljs-tag {
|
||||
color: white;
|
||||
}
|
||||
.hljs-name {
|
||||
color: #ff8383;
|
||||
}
|
||||
.hljs-attr {
|
||||
color: #ffe484;
|
||||
font-style: italic;
|
||||
}
|
||||
.hljs-string {
|
||||
color: #b5f4a5;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="font-sans antialiased text-gray-900">
|
||||
<main>
|
||||
<div class="py-4 sm:py-12">
|
||||
<div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="pb-2">
|
||||
<nav class="flex items-center text-sm leading-5 font-medium">
|
||||
<a href="/#marketing" class="text-gray-500 hover:text-gray-700 focus:outline-none focus:underline transition duration-150 ease-in-out">
|
||||
Marketing
|
||||
</a>
|
||||
<svg class="flex-shrink-0 mx-2 h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<a href="/#marketing-page-sections" class="text-gray-500 hover:text-gray-700 focus:outline-none focus:underline transition duration-150 ease-in-out">
|
||||
Page Sections
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
<h2 class="text-2xl leading-8 font-semibold font-display text-gray-900 sm:text-3xl sm:leading-9">
|
||||
Contact Sections
|
||||
</h2>
|
||||
</div>
|
||||
<div class="mt-6 bg-white max-w-8xl mx-auto sm:px-6 lg:px-8">
|
||||
<div class="max-w-8xl mx-auto">
|
||||
|
||||
<div id="component-5d9e9bd463c8972b488e58dbfd8aab208a81dc95" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-5d9e9bd463c8972b488e58dbfd8aab208a81dc95">Centered</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/contact-sections/centered.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-3003655a1d62c1666539e3fe059e7a72f062a06c" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-3003655a1d62c1666539e3fe059e7a72f062a06c">Side-by-side grid</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/contact-sections/side_by_side_grid.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-b389a8e40df068686b630b6cfbd0532dc486b920" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-b389a8e40df068686b630b6cfbd0532dc486b920">Simple two-column</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/contact-sections/simple_two_column.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-4306ab1ffcf5d5afee0d7b6d59e437a082ae303d" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-4306ab1ffcf5d5afee0d7b6d59e437a082ae303d">Split two-tone</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/contact-sections/split_two_tone.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-0b5bfb4bb1a71273a8473e8d7f724e165261f0c9" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-0b5bfb4bb1a71273a8473e8d7f724e165261f0c9">Split with image</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/contact-sections/split_with_image.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
(function() {
|
||||
const getDocHeight = doc => {
|
||||
doc = doc || document;
|
||||
const body = doc.body;
|
||||
const html = doc.documentElement;
|
||||
const height = Math.max(
|
||||
body.scrollHeight,
|
||||
body.offsetHeight,
|
||||
html.clientHeight,
|
||||
html.scrollHeight,
|
||||
html.offsetHeight
|
||||
);
|
||||
return height;
|
||||
};
|
||||
|
||||
window.resizableIFrame = function() {
|
||||
return {
|
||||
resizing: !1,
|
||||
width: "100%",
|
||||
init: function() {}
|
||||
};
|
||||
};
|
||||
const iframes = document.querySelectorAll("iframe");
|
||||
Array.from(iframes).forEach(iframe => {
|
||||
iframe.addEventListener("load", e => {
|
||||
const iframe = e.srcElement;
|
||||
const doc = iframe.contentDocument || iframe.contentWindow.document;
|
||||
doc.body.classList.add("antialiased", "font-sans", "bg-white")
|
||||
iframe.style.visibility = "hidden";
|
||||
iframe.style.height = "10px";
|
||||
const height = Math.max(getDocHeight(doc), 256) + "px";
|
||||
iframe.style.height = height;
|
||||
iframe.style.visibility = "visible";
|
||||
|
||||
const html = doc.body.innerHTML.trim();
|
||||
const container = iframe.parentElement.parentElement.parentElement;
|
||||
hljs.configure({useBR: false, tabReplace: ' '});
|
||||
const highlighted = hljs.highlight('html', html);
|
||||
const codeElem = container.children[1].querySelector("code");
|
||||
codeElem.innerHTML = highlighted.value;
|
||||
});
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,172 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="bg-white">
|
||||
<div class="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:py-24 lg:px-8">
|
||||
<div class="grid grid-cols-1 gap-16">
|
||||
<div class="lg:grid lg:grid-cols-3 lg:gap-8">
|
||||
<h2 class="text-2xl leading-8 font-extrabold text-gray-900 sm:text-3xl sm:leading-9">
|
||||
Get in touch
|
||||
</h2>
|
||||
<div class="mt-8 grid grid-cols-1 gap-12 sm:grid-cols-2 sm:gap-x-8 sm:gap-y-12 lg:mt-0 lg:col-span-2">
|
||||
<div>
|
||||
<h4 class="text-lg leading-6 font-medium text-gray-900">
|
||||
Collaborate
|
||||
</h4>
|
||||
<dl class="mt-2 text-base leading-6 text-gray-500">
|
||||
<div>
|
||||
<dt class="sr-only">
|
||||
Email
|
||||
</dt>
|
||||
<dd>
|
||||
support@example.com
|
||||
</dd>
|
||||
</div>
|
||||
<div class="mt-1">
|
||||
<dt class="sr-only">
|
||||
Phone number
|
||||
</dt>
|
||||
<dd>
|
||||
+1 (555) 123-4567
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-lg leading-6 font-medium text-gray-900">
|
||||
Press
|
||||
</h4>
|
||||
<dl class="mt-2 text-base leading-6 text-gray-500">
|
||||
<div>
|
||||
<dt class="sr-only">
|
||||
Email
|
||||
</dt>
|
||||
<dd>
|
||||
support@example.com
|
||||
</dd>
|
||||
</div>
|
||||
<div class="mt-1">
|
||||
<dt class="sr-only">
|
||||
Phone number
|
||||
</dt>
|
||||
<dd>
|
||||
+1 (555) 123-4567
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-lg leading-6 font-medium text-gray-900">
|
||||
Join our team
|
||||
</h4>
|
||||
<dl class="mt-2 text-base leading-6 text-gray-500">
|
||||
<div>
|
||||
<dt class="sr-only">
|
||||
Email
|
||||
</dt>
|
||||
<dd>
|
||||
support@example.com
|
||||
</dd>
|
||||
</div>
|
||||
<div class="mt-1">
|
||||
<dt class="sr-only">
|
||||
Phone number
|
||||
</dt>
|
||||
<dd>
|
||||
+1 (555) 123-4567
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-lg leading-6 font-medium text-gray-900">
|
||||
Say hello
|
||||
</h4>
|
||||
<dl class="mt-2 text-base leading-6 text-gray-500">
|
||||
<div>
|
||||
<dt class="sr-only">
|
||||
Email
|
||||
</dt>
|
||||
<dd>
|
||||
support@example.com
|
||||
</dd>
|
||||
</div>
|
||||
<div class="mt-1">
|
||||
<dt class="sr-only">
|
||||
Phone number
|
||||
</dt>
|
||||
<dd>
|
||||
+1 (555) 123-4567
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-t-2 border-gray-100"></div>
|
||||
<div class="lg:grid lg:grid-cols-3 lg:gap-8">
|
||||
<h2 class="text-2xl leading-8 font-extrabold text-gray-900 sm:text-3xl sm:leading-9">
|
||||
Locations
|
||||
</h2>
|
||||
<div class="mt-8 grid grid-cols-1 gap-12 sm:grid-cols-2 sm:gap-x-8 sm:gap-y-12 lg:mt-0 lg:col-span-2">
|
||||
<div>
|
||||
<h4 class="text-lg leading-6 font-medium text-gray-900">
|
||||
Los Angeles
|
||||
</h4>
|
||||
<div class="mt-2 text-base leading-6 text-gray-500">
|
||||
<p>
|
||||
4556 Brendan Ferry
|
||||
</p>
|
||||
<p class="mt-1">
|
||||
Los Angeles, CA 90210
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-lg leading-6 font-medium text-gray-900">
|
||||
New York
|
||||
</h4>
|
||||
<div class="mt-2 text-base leading-6 text-gray-500">
|
||||
<p>
|
||||
886 Walter Streets
|
||||
</p>
|
||||
<p class="mt-1">
|
||||
New York, NY 12345
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-lg leading-6 font-medium text-gray-900">
|
||||
Toronto
|
||||
</h4>
|
||||
<div class="mt-2 text-base leading-6 text-gray-500">
|
||||
<p>
|
||||
7363 Cynthia Pass
|
||||
</p>
|
||||
<p class="mt-1">
|
||||
Toronto, ON N3Y 4H8
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-lg leading-6 font-medium text-gray-900">
|
||||
Chicago
|
||||
</h4>
|
||||
<div class="mt-2 text-base leading-6 text-gray-500">
|
||||
<p>
|
||||
726 Mavis Island
|
||||
</p>
|
||||
<p class="mt-1">
|
||||
Chicago, IL 60601
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,95 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="bg-white">
|
||||
<div class="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-lg mx-auto md:max-w-none md:grid md:grid-cols-2 md:gap-8">
|
||||
<div>
|
||||
<h2 class="text-2xl leading-8 font-extrabold text-gray-900 sm:text-3xl sm:leading-9">
|
||||
Sales Support
|
||||
</h2>
|
||||
<div class="mt-3">
|
||||
<p class="text-lg leading-7 text-gray-500">
|
||||
Nullam risus blandit ac aliquam justo ipsum. Quam mauris volutpat massa dictumst amet. Sapien tortor lacus arcu.
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-9">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<!-- Heroicon name: phone -->
|
||||
<svg class="h-6 w-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-3 text-base leading-6 text-gray-500">
|
||||
<p>
|
||||
+1 (555) 123 4567
|
||||
</p>
|
||||
<p class="mt-1">
|
||||
Mon-Fri 8am to 6pm PST
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 flex">
|
||||
<div class="flex-shrink-0">
|
||||
<!-- Heroicon name: mail -->
|
||||
<svg class="h-6 w-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-3 text-base leading-6 text-gray-500">
|
||||
<p>
|
||||
support@example.com
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-12 sm:mt-16 md:mt-0">
|
||||
<h2 class="text-2xl leading-8 font-extrabold text-gray-900 sm:text-3xl sm:leading-9">
|
||||
Technical Support
|
||||
</h2>
|
||||
<div class="mt-3">
|
||||
<p class="text-lg leading-7 text-gray-500">
|
||||
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni, repellat error corporis doloribus similique, voluptatibus numquam quam, quae officiis facilis.
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-9">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<!-- Heroicon name: phone -->
|
||||
<svg class="h-6 w-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-3 text-base leading-6 text-gray-500">
|
||||
<p>
|
||||
+1 (555) 123 4567
|
||||
</p>
|
||||
<p class="mt-1">
|
||||
Mon-Fri 8am to 6pm PST
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 flex">
|
||||
<div class="flex-shrink-0">
|
||||
<!-- Heroicon name: mail -->
|
||||
<svg class="h-6 w-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-3 text-base leading-6 text-gray-500">
|
||||
<p>
|
||||
support@example.com
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,98 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="relative bg-white">
|
||||
<div class="absolute inset-0">
|
||||
<div class="absolute inset-y-0 left-0 w-1/2 bg-gray-50"></div>
|
||||
</div>
|
||||
<div class="relative max-w-7xl mx-auto lg:grid lg:grid-cols-5">
|
||||
<div class="bg-gray-50 py-16 px-4 sm:px-6 lg:col-span-2 lg:px-8 lg:py-24 xl:pr-12">
|
||||
<div class="max-w-lg mx-auto">
|
||||
<h2 class="text-2xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-3xl sm:leading-9">
|
||||
Get in touch
|
||||
</h2>
|
||||
<p class="mt-3 text-lg leading-6 text-gray-500">
|
||||
Nullam risus blandit ac aliquam justo ipsum. Quam mauris volutpat massa dictumst amet. Sapien tortor lacus arcu.
|
||||
</p>
|
||||
<dl class="mt-8 text-base leading-6 text-gray-500">
|
||||
<div>
|
||||
<dt class="sr-only">Postal address</dt>
|
||||
<dd>
|
||||
<p>742 Evergreen Terrace</p>
|
||||
<p>Springfield, OR 12345</p>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
<dt class="sr-only">Phone number</dt>
|
||||
<dd class="flex">
|
||||
<!-- Heroicon name: phone -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
|
||||
</svg>
|
||||
<span class="ml-3">
|
||||
+1 (555) 123-4567
|
||||
</span>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<dt class="sr-only">Email</dt>
|
||||
<dd class="flex">
|
||||
<!-- Heroicon name: mail -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<span class="ml-3">
|
||||
support@example.com
|
||||
</span>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<p class="mt-6 text-base leading-6 text-gray-500">
|
||||
Looking for careers?
|
||||
<a href="#" class="font-medium text-gray-700 underline">View all job openings</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white py-16 px-4 sm:px-6 lg:col-span-3 lg:py-24 lg:px-8 xl:pl-12">
|
||||
<div class="max-w-lg mx-auto lg:max-w-none">
|
||||
<form action="#" method="POST" class="grid grid-cols-1 gap-y-6">
|
||||
<div>
|
||||
<label for="full_name" class="sr-only">Full name</label>
|
||||
<div class="relative rounded-md shadow-sm">
|
||||
<input id="full_name" class="form-input block w-full py-3 px-4 placeholder-gray-500 transition ease-in-out duration-150" placeholder="Full name" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="email" class="sr-only">Email</label>
|
||||
<div class="relative rounded-md shadow-sm">
|
||||
<input id="email" type="email" class="form-input block w-full py-3 px-4 placeholder-gray-500 transition ease-in-out duration-150" placeholder="Email" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="phone" class="sr-only">Phone</label>
|
||||
<div class="relative rounded-md shadow-sm">
|
||||
<input id="phone" class="form-input block w-full py-3 px-4 placeholder-gray-500 transition ease-in-out duration-150" placeholder="Phone" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="message" class="sr-only">Message</label>
|
||||
<div class="relative rounded-md shadow-sm">
|
||||
<textarea id="message" rows="4" class="form-input block w-full py-3 px-4 placeholder-gray-500 transition ease-in-out duration-150" placeholder="Message"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<span class="inline-flex rounded-md shadow-sm">
|
||||
<button type="submit" class="inline-flex justify-center py-3 px-6 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition duration-150 ease-in-out">
|
||||
Submit
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,114 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="relative bg-white">
|
||||
<div class="lg:absolute lg:inset-0">
|
||||
<div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
|
||||
<img class="h-56 w-full object-cover lg:absolute lg:h-full" src="https://images.unsplash.com/photo-1556761175-4b46a572b786?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1567&q=80" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative pt-12 pb-16 px-4 sm:pt-16 sm:px-6 lg:px-8 lg:max-w-7xl lg:mx-auto lg:grid lg:grid-cols-2">
|
||||
<div class="lg:pr-8">
|
||||
<div class="max-w-md mx-auto sm:max-w-lg lg:mx-0">
|
||||
<h2 class="text-3xl leading-9 font-extrabold tracking-tight sm:text-4xl sm:leading-10">
|
||||
Let's work together
|
||||
</h2>
|
||||
<p class="mt-4 text-lg leading-7 text-gray-500 sm:mt-3">
|
||||
We’d love to hear from you! Send us a message using the form opposite, or email us. We’d love to hear from you! Send us a message using the form opposite, or email us.
|
||||
</p>
|
||||
<form action="#" method="POST" class="mt-9 grid grid-cols-1 gap-y-6 sm:grid-cols-2 sm:gap-x-8">
|
||||
<div>
|
||||
<label for="first_name" class="block text-sm font-medium leading-5 text-gray-700">First name</label>
|
||||
<div class="mt-1 relative rounded-md shadow-sm">
|
||||
<input id="first_name" class="form-input block w-full transition ease-in-out duration-150 sm:text-sm sm:leading-5" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="last_name" class="block text-sm font-medium leading-5 text-gray-700">Last name</label>
|
||||
<div class="mt-1 relative rounded-md shadow-sm">
|
||||
<input id="last_name" class="form-input block w-full transition ease-in-out duration-150 sm:text-sm sm:leading-5" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="sm:col-span-2">
|
||||
<label for="email" class="block text-sm font-medium leading-5 text-gray-700">Email</label>
|
||||
<div class="mt-1 relative rounded-md shadow-sm">
|
||||
<input id="email" type="email" class="form-input block w-full transition ease-in-out duration-150 sm:text-sm sm:leading-5" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="sm:col-span-2">
|
||||
<label for="company" class="block text-sm font-medium leading-5 text-gray-700">Company</label>
|
||||
<div class="mt-1 relative rounded-md shadow-sm">
|
||||
<input id="company" class="form-input block w-full transition ease-in-out duration-150 sm:text-sm sm:leading-5" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="sm:col-span-2">
|
||||
<div class="flex justify-between">
|
||||
<label for="phone" class="block text-sm font-medium leading-5 text-gray-700">Phone</label>
|
||||
<span class="text-sm leading-5 text-gray-500">Optional</span>
|
||||
</div>
|
||||
<div class="mt-1 relative rounded-md shadow-sm">
|
||||
<input id="phone" class="form-input block w-full transition ease-in-out duration-150 sm:text-sm sm:leading-5" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="sm:col-span-2">
|
||||
<div class="flex justify-between">
|
||||
<label for="how_can_we_help" class="block text-sm font-medium leading-5 text-gray-700">How can we help you?</label>
|
||||
<span class="text-sm leading-5 text-gray-500">Max. 500 characters</span>
|
||||
</div>
|
||||
<div class="mt-1 relative rounded-md shadow-sm">
|
||||
<textarea id="how_can_we_help" rows="4" class="form-textarea block w-full transition ease-in-out duration-150 sm:text-sm sm:leading-5"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<fieldset class="sm:col-span-2">
|
||||
<legend class="block text-sm font-medium leading-5 text-gray-700">
|
||||
Expected budget
|
||||
</legend>
|
||||
<div class="mt-4 grid grid-cols-1 gap-y-4">
|
||||
<div class="flex items-center">
|
||||
<input id="budget_under_25k" name="budget" value="under_25k" type="radio" class="form-radio h-4 w-4 text-indigo-600 transition duration-150 ease-in-out" />
|
||||
<label for="budget_under_25k" class="ml-3">
|
||||
<span class="block text-sm leading-5 text-gray-700">Less than $25K</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<input id="budget_25k-50k" name="budget" value="25k-50k" type="radio" class="form-radio h-4 w-4 text-indigo-600 transition duration-150 ease-in-out" />
|
||||
<label for="budget_25k-50k" class="ml-3">
|
||||
<span class="block text-sm leading-5 text-gray-700">$25K – $50K</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<input id="budget_50k-100k" name="budget" value="50k-100k" type="radio" class="form-radio h-4 w-4 text-indigo-600 transition duration-150 ease-in-out" />
|
||||
<label for="budget_50k-100k" class="ml-3">
|
||||
<span class="block text-sm leading-5 text-gray-700">$50K – $100K</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<input id="budget_over_100k" name="budget" value="over_100k" type="radio" class="form-radio h-4 w-4 text-indigo-600 transition duration-150 ease-in-out" />
|
||||
<label for="budget_over_100k" class="ml-3">
|
||||
<span class="block text-sm leading-5 text-gray-700">$100K+</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div class="sm:col-span-2">
|
||||
<label for="how_did_you_hear_about_us" class="block text-sm font-medium leading-5 text-gray-700">How did you hear about us?</label>
|
||||
<div class="mt-1 relative rounded-md shadow-sm">
|
||||
<input id="how_did_you_hear_about_us" class="form-input block w-full transition ease-in-out duration-150 sm:text-sm sm:leading-5" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right sm:col-span-2">
|
||||
<span class="inline-flex rounded-md shadow-sm">
|
||||
<button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition duration-150 ease-in-out">
|
||||
Submit
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,66 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><!-- This component requires Tailwind CSS >= 1.5.1 and @tailwindcss/ui >= 0.4.0 --><html>
|
||||
<head /><body>
|
||||
<div class="relative py-16 bg-white overflow-hidden">
|
||||
<div class="hidden lg:block lg:absolute lg:inset-y-0 lg:h-full lg:w-full">
|
||||
<div class="relative h-full text-lg max-w-prose mx-auto">
|
||||
<svg class="absolute top-12 left-full transform translate-x-32" width="404" height="384" fill="none" viewBox="0 0 404 384">
|
||||
<defs>
|
||||
<pattern id="74b3fd99-0a6f-4271-bef2-e80eeafdf357" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
|
||||
<rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="404" height="384" fill="url(#74b3fd99-0a6f-4271-bef2-e80eeafdf357)" />
|
||||
</svg>
|
||||
<svg class="absolute top-1/2 right-full transform -translate-y-1/2 -translate-x-32" width="404" height="384" fill="none" viewBox="0 0 404 384">
|
||||
<defs>
|
||||
<pattern id="f210dbf6-a58d-4871-961e-36d5016a0f49" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
|
||||
<rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="404" height="384" fill="url(#f210dbf6-a58d-4871-961e-36d5016a0f49)" />
|
||||
</svg>
|
||||
<svg class="absolute bottom-12 left-full transform translate-x-32" width="404" height="384" fill="none" viewBox="0 0 404 384">
|
||||
<defs>
|
||||
<pattern id="d3eb07ae-5182-43e6-857d-35c643af9034" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
|
||||
<rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="404" height="384" fill="url(#d3eb07ae-5182-43e6-857d-35c643af9034)" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-lg max-w-prose mx-auto mb-6">
|
||||
<p class="text-base text-center leading-6 text-indigo-600 font-semibold tracking-wide uppercase">Introducing</p>
|
||||
<h1 class="mt-2 mb-8 text-3xl text-center leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10">JavaScript for Beginners</h1>
|
||||
<p class="text-xl text-gray-500 leading-8">Aliquet nec orci mattis amet quisque ullamcorper neque, nibh sem. At arcu, sit dui mi, nibh dui, diam eget aliquam. Quisque id at vitae feugiat egestas ac. Diam nulla orci at in viverra scelerisque eget. Eleifend egestas fringilla sapien.</p>
|
||||
</div>
|
||||
<div class="prose prose-lg text-gray-500 mx-auto">
|
||||
<p>Faucibus commodo massa rhoncus, volutpat. <strong>Dignissim</strong> sed <strong>eget risus enim</strong>. Mattis mauris semper sed amet vitae sed turpis id. Id dolor praesent donec est. Odio penatibus risus viverra tellus varius sit neque erat velit. Faucibus commodo massa rhoncus, volutpat. Dignissim sed eget risus enim. <a href="#">Mattis mauris semper</a> sed amet vitae sed turpis id.</p>
|
||||
<ul>
|
||||
<li>Quis elit egestas venenatis mattis dignissim.</li>
|
||||
<li>Cras cras lobortis vitae vivamus ultricies facilisis tempus.</li>
|
||||
<li>Orci in sit morbi dignissim metus diam arcu pretium.</li>
|
||||
</ul>
|
||||
<p>Quis semper vulputate aliquam venenatis egestas sagittis quisque orci. Donec commodo sit viverra aliquam porttitor ultrices gravida eu. Tincidunt leo, elementum mattis elementum ut nisl, justo, amet, mattis. Nunc purus, diam commodo tincidunt turpis. Amet, duis sed elit interdum dignissim.</p>
|
||||
<h2>From beginner to expert in 30 days</h2>
|
||||
<p>Id orci tellus laoreet id ac. Dolor, aenean leo, ac etiam consequat in. Convallis arcu ipsum urna nibh. Pharetra, euismod vitae interdum mauris enim, consequat vulputate nibh. Maecenas pellentesque id sed tellus mauris, ultrices mauris. Tincidunt enim cursus ridiculus mi. Pellentesque nam sed nullam sed diam turpis ipsum eu a sed convallis diam.</p>
|
||||
<blockquote>
|
||||
<p>Sagittis scelerisque nulla cursus in enim consectetur quam. Dictum urna sed consectetur neque tristique pellentesque. Blandit amet, sed aenean erat arcu morbi.</p>
|
||||
</blockquote>
|
||||
<p>Faucibus commodo massa rhoncus, volutpat. Dignissim sed eget risus enim. Mattis mauris semper sed amet vitae sed turpis id. Id dolor praesent donec est. Odio penatibus risus viverra tellus varius sit neque erat velit.</p>
|
||||
<figure>
|
||||
<img class="w-full rounded-lg" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&auto=format&fit=facearea&w=1310&h=873&q=80&facepad=3" alt="" width="1310" height="873" />
|
||||
<figcaption>Sagittis scelerisque nulla cursus in enim consectetur quam.</figcaption>
|
||||
</figure>
|
||||
<h3>Everything you need to get up and running</h3>
|
||||
<p>Purus morbi dignissim senectus mattis <a href="#">adipiscing</a>. Amet, massa quam varius orci dapibus volutpat cras. In amet eu ridiculus leo sodales cursus tristique. Tincidunt sed tempus ut viverra ridiculus non molestie. Gravida quis fringilla amet eget dui tempor dignissim. Facilisis auctor venenatis varius nunc, congue erat ac. Cras fermentum convallis quam.</p>
|
||||
<p>Faucibus commodo massa rhoncus, volutpat. Dignissim sed eget risus enim. Mattis mauris semper sed amet vitae sed turpis id. Id dolor praesent donec est. Odio penatibus risus viverra tellus varius sit neque erat velit.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,376 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Tailwind UI Components</title>
|
||||
<link href="https://fonts.googleapis.com/css?family=Inter&display=swap" rel="stylesheet"/>
|
||||
<link href="https://cdn.jsdelivr.net/npm/@tailwindcss/ui@latest/dist/tailwind-ui.min.css" rel="stylesheet"/>
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.0.1/dist/alpine.js" defer></script>
|
||||
<link href="https://cdn.jsdelivr.net/npm/highlightjs-themes@1.0.0/darkula.css" rel="stylesheet"/>
|
||||
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/highlight.min.js"></script>
|
||||
<style>
|
||||
* { box-sizing: border-box; }
|
||||
.font-sans { font-family: "Inter", sans-serif; }
|
||||
.hljs {
|
||||
background: #252f3f;
|
||||
color: white;
|
||||
}
|
||||
.hljs-tag {
|
||||
color: white;
|
||||
}
|
||||
.hljs-name {
|
||||
color: #ff8383;
|
||||
}
|
||||
.hljs-attr {
|
||||
color: #ffe484;
|
||||
font-style: italic;
|
||||
}
|
||||
.hljs-string {
|
||||
color: #b5f4a5;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="font-sans antialiased text-gray-900">
|
||||
<main>
|
||||
<div class="py-4 sm:py-12">
|
||||
<div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="pb-2">
|
||||
<nav class="flex items-center text-sm leading-5 font-medium">
|
||||
<a href="/#marketing" class="text-gray-500 hover:text-gray-700 focus:outline-none focus:underline transition duration-150 ease-in-out">
|
||||
Marketing
|
||||
</a>
|
||||
<svg class="flex-shrink-0 mx-2 h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<a href="/#marketing-page-sections" class="text-gray-500 hover:text-gray-700 focus:outline-none focus:underline transition duration-150 ease-in-out">
|
||||
Page Sections
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
<h2 class="text-2xl leading-8 font-semibold font-display text-gray-900 sm:text-3xl sm:leading-9">
|
||||
Content Sections
|
||||
</h2>
|
||||
</div>
|
||||
<div class="mt-6 bg-white max-w-8xl mx-auto sm:px-6 lg:px-8">
|
||||
<div class="max-w-8xl mx-auto">
|
||||
|
||||
<div id="component-c4cd9f15d2caf5e0695e835ca9b5de9147652560" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-c4cd9f15d2caf5e0695e835ca9b5de9147652560">Centered</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/content-sections/centered.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-9c15bfdcbbe3da228c4d02fbb5f4690514027e98" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-9c15bfdcbbe3da228c4d02fbb5f4690514027e98">Split with image</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/content-sections/split_with_image.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-13f711b34ff7e5c80749b471cf07eaf387e8bce7" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-13f711b34ff7e5c80749b471cf07eaf387e8bce7">Two columns with image</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/content-sections/two_columns_with_image.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-f15e56514b03cd09262f84e7b0e7427b274a9dbf" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-f15e56514b03cd09262f84e7b0e7427b274a9dbf">Two columns with testimonial</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/content-sections/two_columns_with_testimonial.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-44b37432dd0bdd99f1a4c506ccc3c7780bb4745b" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-44b37432dd0bdd99f1a4c506ccc3c7780bb4745b">Two columns</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/content-sections/two_columns.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
(function() {
|
||||
const getDocHeight = doc => {
|
||||
doc = doc || document;
|
||||
const body = doc.body;
|
||||
const html = doc.documentElement;
|
||||
const height = Math.max(
|
||||
body.scrollHeight,
|
||||
body.offsetHeight,
|
||||
html.clientHeight,
|
||||
html.scrollHeight,
|
||||
html.offsetHeight
|
||||
);
|
||||
return height;
|
||||
};
|
||||
|
||||
window.resizableIFrame = function() {
|
||||
return {
|
||||
resizing: !1,
|
||||
width: "100%",
|
||||
init: function() {}
|
||||
};
|
||||
};
|
||||
const iframes = document.querySelectorAll("iframe");
|
||||
Array.from(iframes).forEach(iframe => {
|
||||
iframe.addEventListener("load", e => {
|
||||
const iframe = e.srcElement;
|
||||
const doc = iframe.contentDocument || iframe.contentWindow.document;
|
||||
doc.body.classList.add("antialiased", "font-sans", "bg-white")
|
||||
iframe.style.visibility = "hidden";
|
||||
iframe.style.height = "10px";
|
||||
const height = Math.max(getDocHeight(doc), 256) + "px";
|
||||
iframe.style.height = height;
|
||||
iframe.style.visibility = "visible";
|
||||
|
||||
const html = doc.body.innerHTML.trim();
|
||||
const container = iframe.parentElement.parentElement.parentElement;
|
||||
hljs.configure({useBR: false, tabReplace: ' '});
|
||||
const highlighted = hljs.highlight('html', html);
|
||||
const codeElem = container.children[1].querySelector("code");
|
||||
codeElem.innerHTML = highlighted.value;
|
||||
});
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,37 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><!-- This component requires Tailwind CSS >= 1.5.1 and @tailwindcss/ui >= 0.4.0 --><html>
|
||||
<head /><body>
|
||||
<div class="relative bg-white">
|
||||
<div class="lg:absolute lg:inset-0">
|
||||
<div class="lg:absolute lg:inset-y-0 lg:left-0 lg:w-1/2">
|
||||
<img class="h-56 w-full object-cover lg:absolute lg:h-full" src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1567&q=80" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative pt-12 pb-16 px-4 sm:pt-16 sm:px-6 lg:px-8 lg:max-w-7xl lg:mx-auto lg:grid lg:grid-cols-2">
|
||||
<div class="lg:col-start-2 lg:pl-8">
|
||||
<div class="text-base max-w-prose mx-auto lg:max-w-lg lg:ml-auto lg:mr-0">
|
||||
<p class="leading-6 text-indigo-600 font-semibold tracking-wide uppercase">Work with us</p>
|
||||
<h1 class="mt-2 mb-8 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10">Our Process</h1>
|
||||
<p class="text-lg leading-7 text-gray-500 mb-5">Sagittis scelerisque nulla cursus in enim consectetur quam. Dictum urna sed consectetur neque tristique pellentesque. Blandit amet, sed aenean erat arcu morbi.</p>
|
||||
<div class="prose text-gray-500">
|
||||
<p>Sollicitudin tristique eros erat odio sed vitae, consequat turpis elementum. Lorem nibh vel, eget pretium arcu vitae. Eros eu viverra donec ut volutpat donec laoreet quam urna.</p>
|
||||
<p>Bibendum eu nulla feugiat justo, elit adipiscing. Ut tristique sit nisi lorem pulvinar. Urna, laoreet fusce nibh leo. Dictum et et et sit. Faucibus sed non gravida lectus dignissim imperdiet a.</p>
|
||||
<p>Dictum magnis risus phasellus vitae quam morbi. Quis lorem lorem arcu, metus, egestas netus cursus. In.</p>
|
||||
<ul>
|
||||
<li>Quis elit egestas venenatis mattis dignissim.</li>
|
||||
<li>Cras cras lobortis vitae vivamus ultricies facilisis tempus.</li>
|
||||
<li>Orci in sit morbi dignissim metus diam arcu pretium.</li>
|
||||
</ul>
|
||||
<p>Rhoncus nisl, libero egestas diam fermentum dui. At quis tincidunt vel ultricies. Vulputate aliquet velit faucibus semper. Pellentesque in venenatis vestibulum consectetur nibh id. In id ut tempus egestas. Enim sit aliquam nec, a. Morbi enim fermentum lacus in. Viverra.</p>
|
||||
<h2>How we’re different</h2>
|
||||
<p>Tincidunt integer commodo, cursus etiam aliquam neque, et. Consectetur pretium in volutpat, diam. Montes, magna cursus nulla feugiat dignissim id lobortis amet. Laoreet sem est phasellus eu proin massa, lectus. Diam rutrum posuere donec ultricies non morbi. Mi a platea auctor mi.</p>
|
||||
<p>Mauris ullamcorper imperdiet nec egestas mi quis quam ante vulputate. Vel faucibus adipiscing lacus, eget. Nunc fermentum id tellus donec. Ut metus odio sit sit varius non nunc orci. Eu, mi neque, ornare suspendisse amet, nibh. Facilisi volutpat lectus id sapien dis mauris rhoncus. Est rhoncus, interdum imperdiet ac eros, diam mauris, tortor. Risus id sit molestie magna.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,58 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><!-- This component requires Tailwind CSS >= 1.5.1 and @tailwindcss/ui >= 0.4.0 --><html>
|
||||
<head /><body>
|
||||
<div class="py-16 xl:py-36 px-4 sm:px-6 lg:px-8 bg-white overflow-hidden">
|
||||
<div class="max-w-max-content lg:max-w-7xl mx-auto">
|
||||
<div class="relative z-10 mb-8 md:mb-2 md:px-6">
|
||||
<div class="text-base max-w-prose lg:max-w-none">
|
||||
<p class="leading-6 text-indigo-600 font-semibold tracking-wide uppercase">Transactions</p>
|
||||
<h1 class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10">A better way to send money</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<svg class="hidden md:block absolute top-0 right-0 -mt-20 -mr-20" width="404" height="384" fill="none" viewBox="0 0 404 384">
|
||||
<defs>
|
||||
<pattern id="95e8f2de-6d30-4b7e-8159-f791729db21b" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
|
||||
<rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="404" height="384" fill="url(#95e8f2de-6d30-4b7e-8159-f791729db21b)" />
|
||||
</svg>
|
||||
<svg class="hidden md:block absolute bottom-0 left-0 -mb-20 -ml-20" width="404" height="384" fill="none" viewBox="0 0 404 384">
|
||||
<defs>
|
||||
<pattern id="7a00fe67-0343-4a3c-8e81-c145097a3ce0" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
|
||||
<rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="404" height="384" fill="url(#7a00fe67-0343-4a3c-8e81-c145097a3ce0)" />
|
||||
</svg>
|
||||
<div class="relative md:bg-white md:p-6">
|
||||
<div class="lg:grid lg:grid-cols-2 lg:gap-6 mb-8">
|
||||
<div class="prose prose-lg text-gray-500 mb-6 lg:max-w-none lg:mb-0">
|
||||
<p>Ultrices ultricies a in odio consequat egestas rutrum. Ut vitae aliquam in ipsum. Duis nullam placerat cursus risus ultrices nisi, vitae tellus in. Qui non fugiat aut minus aut rerum. Perspiciatis iusto mollitia iste minima soluta id.</p>
|
||||
<p>Erat pellentesque dictumst ligula porttitor risus eget et eget. Ultricies tellus felis id dignissim eget. Est augue <a href="#">maecenas</a> risus nulla ultrices congue nunc tortor. Eu leo risus porta integer suspendisse sed sit ligula elit.</p>
|
||||
<ol>
|
||||
<li>Integer varius imperdiet sed interdum felis cras in nec nunc.</li>
|
||||
<li>Quam malesuada odio ut sit egestas. Elementum at porta vitae.</li>
|
||||
</ol>
|
||||
<p>Amet, eu nulla id molestie quis tortor. Auctor erat justo, sed pellentesque scelerisque interdum blandit lectus. Nec viverra amet ac facilisis vestibulum. Vestibulum purus nibh ac ultricies congue.</p>
|
||||
</div>
|
||||
<div class="prose prose-lg text-gray-500">
|
||||
<p>Erat pellentesque dictumst ligula porttitor risus eget et eget. Ultricies tellus felis id dignissim eget. Est augue maecenas risus nulla ultrices congue nunc tortor.</p>
|
||||
<p>Eu leo risus porta integer suspendisse sed sit ligula elit. Elit egestas lacinia sagittis pellentesque neque dignissim vulputate sodales. Diam sed mauris felis risus, ultricies mauris netus tincidunt. Mauris sit eu ac tellus nibh non eget sed accumsan. Viverra ac sed venenatis pulvinar elit. Cras diam quis tincidunt lectus. Non mi vitae, scelerisque felis nisi, netus amet nisl.</p>
|
||||
<p>Eu eu mauris bibendum scelerisque adipiscing et. Justo, elementum consectetur morbi eros, posuere ipsum tortor. Eget cursus massa sed velit feugiat sed ut. Faucibus eros mauris morbi aliquam nullam. Scelerisque elementum sit magna ullamcorper dignissim pretium.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inline-flex rounded-md shadow">
|
||||
<a href="#" class="flex items-center justify-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo transition duration-150 ease-in-out">
|
||||
Contact sales
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,61 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><!-- This component requires Tailwind CSS >= 1.5.1 and @tailwindcss/ui >= 0.4.0 --><html>
|
||||
<head /><body>
|
||||
<div class="bg-white overflow-hidden">
|
||||
<div class="relative max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:px-8">
|
||||
<div class="hidden lg:block bg-gray-50 absolute top-0 bottom-0 left-3/4 w-screen"></div>
|
||||
<div class="mx-auto text-base max-w-prose lg:max-w-none">
|
||||
<p class="text-base leading-6 text-indigo-600 font-semibold tracking-wide uppercase">Case Study</p>
|
||||
<h1 class="mt-2 mb-8 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10">Meet Whitney</h1>
|
||||
</div>
|
||||
<div class="lg:grid lg:grid-cols-2 lg:gap-8">
|
||||
<div class="relative mb-8 lg:mb-0 lg:row-start-1 lg:col-start-2">
|
||||
<svg class="hidden lg:block absolute top-0 right-0 -mt-20 -mr-20" width="404" height="384" fill="none" viewBox="0 0 404 384">
|
||||
<defs>
|
||||
<pattern id="de316486-4a29-4312-bdfc-fbce2132a2c1" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
|
||||
<rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="404" height="384" fill="url(#de316486-4a29-4312-bdfc-fbce2132a2c1)" />
|
||||
</svg>
|
||||
<div class="relative text-base mx-auto max-w-prose lg:max-w-none">
|
||||
<figure>
|
||||
<div class="relative pb-7/12 lg:pb-0">
|
||||
<img src="https://images.unsplash.com/photo-1546913199-55e06682967e?ixlib=rb-1.2.1&auto=format&fit=crop&crop=focalpoint&fp-x=.735&fp-y=.55&w=1184&h=1376&q=80" alt="" width="1184" height="1376" class="rounded-lg shadow-lg object-cover object-center absolute inset-0 w-full h-full lg:static lg:h-auto" />
|
||||
</div>
|
||||
<figcaption class="flex mt-3 text-sm text-gray-500">
|
||||
<!-- Heroicon name: camera -->
|
||||
<svg class="flex-none w-5 h-5 mr-2 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M4 5a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V7a2 2 0 00-2-2h-1.586a1 1 0 01-.707-.293l-1.121-1.121A2 2 0 0011.172 3H8.828a2 2 0 00-1.414.586L6.293 4.707A1 1 0 015.586 5H4zm6 9a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
Photograph by Marcus O’Leary
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-base max-w-prose mx-auto lg:max-w-none">
|
||||
<p class="text-lg leading-7 text-gray-500 mb-5">Sagittis scelerisque nulla cursus in enim consectetur quam. Dictum urna sed consectetur neque tristique pellentesque. Blandit amet, sed aenean erat arcu morbi.</p>
|
||||
</div>
|
||||
<div class="prose text-gray-500 mx-auto lg:max-w-none lg:row-start-1 lg:col-start-1">
|
||||
<p>Sollicitudin tristique eros erat odio sed vitae, consequat turpis elementum. Lorem nibh vel, eget pretium arcu vitae. Eros eu viverra donec ut volutpat donec laoreet quam urna.</p>
|
||||
<p>Bibendum eu nulla feugiat justo, elit adipiscing. Ut tristique sit nisi lorem pulvinar. Urna, laoreet fusce nibh leo. Dictum et et et sit. Faucibus sed non gravida lectus dignissim imperdiet a.</p>
|
||||
<p>Dictum magnis risus phasellus vitae quam morbi. Quis lorem lorem arcu, metus, egestas netus cursus. In.</p>
|
||||
<ul>
|
||||
<li>Quis elit egestas venenatis mattis dignissim.</li>
|
||||
<li>Cras cras lobortis vitae vivamus ultricies facilisis tempus.</li>
|
||||
<li>Orci in sit morbi dignissim metus diam arcu pretium.</li>
|
||||
</ul>
|
||||
<p>Rhoncus nisl, libero egestas diam fermentum dui. At quis tincidunt vel ultricies. Vulputate aliquet velit faucibus semper. Pellentesque in venenatis vestibulum consectetur nibh id. In id ut tempus egestas. Enim sit aliquam nec, a. Morbi enim fermentum lacus in. Viverra.</p>
|
||||
<h2>How we helped</h2>
|
||||
<p>Tincidunt integer commodo, cursus etiam aliquam neque, et. Consectetur pretium in volutpat, diam. Montes, magna cursus nulla feugiat dignissim id lobortis amet. Laoreet sem est phasellus eu proin massa, lectus. Diam rutrum posuere donec ultricies non morbi. Mi a platea auctor mi.</p>
|
||||
<p>Sagittis scelerisque nulla cursus in enim consectetur quam. Dictum urna sed consectetur neque tristique pellentesque. Blandit amet, sed aenean erat arcu morbi.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,76 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><!-- This component requires Tailwind CSS >= 1.5.1 and @tailwindcss/ui >= 0.4.0 --><html>
|
||||
<head /><body>
|
||||
<div class="py-16 bg-gray-50 overflow-hidden">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-base max-w-prose mx-auto lg:max-w-none">
|
||||
<p class="text-base leading-6 text-indigo-600 font-semibold tracking-wide uppercase">Transactions</p>
|
||||
<h1 class="mt-2 mb-8 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10">What makes us different</h1>
|
||||
</div>
|
||||
<div class="relative z-10 text-base max-w-prose mx-auto mb-8 lg:max-w-5xl lg:mx-0 lg:pr-72">
|
||||
<p class="text-lg text-gray-500 leading-7">Sagittis scelerisque nulla cursus in enim consectetur quam. Dictum urna sed consectetur neque tristique pellentesque. Blandit amet, sed aenean erat arcu morbi. Cursus faucibus nunc nisl netus morbi vel porttitor vitae ut. Amet vitae fames senectus vitae.</p>
|
||||
</div>
|
||||
<div class="lg:grid lg:grid-cols-2 lg:gap-8 lg:items-start">
|
||||
<div class="relative z-10 mb-12 lg:mb-0">
|
||||
<div class="mb-10 prose text-gray-500 mx-auto lg:max-w-none">
|
||||
<p>Sollicitudin tristique eros erat odio sed vitae, consequat turpis elementum. Lorem nibh vel, eget pretium arcu vitae. Eros eu viverra donec ut volutpat donec laoreet quam urna.</p>
|
||||
<ul>
|
||||
<li>Quis elit egestas venenatis mattis dignissim.</li>
|
||||
<li>Cras cras lobortis vitae vivamus ultricies facilisis tempus.</li>
|
||||
<li>Orci in sit morbi dignissim metus diam arcu pretium.</li>
|
||||
</ul>
|
||||
<p>Rhoncus nisl, libero egestas diam fermentum dui. At quis tincidunt vel ultricies. Vulputate aliquet velit faucibus semper. Pellentesque in venenatis vestibulum consectetur nibh id. In id ut tempus egestas. Enim sit aliquam nec, a. Morbi enim fermentum lacus in. Viverra.</p>
|
||||
<h2>We’re here to help</h2>
|
||||
<p>Tincidunt integer commodo, cursus etiam aliquam neque, et. Consectetur pretium in volutpat, diam. Montes, magna cursus nulla feugiat dignissim id lobortis amet. Laoreet sem est phasellus eu proin massa, lectus. Diam rutrum posuere donec ultricies non morbi. Mi a platea auctor mi.</p>
|
||||
</div>
|
||||
<div class="flex text-base max-w-prose mx-auto lg:max-w-none">
|
||||
<div class="rounded-md shadow">
|
||||
<a href="#" class="w-full flex items-center justify-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo transition duration-150 ease-in-out">
|
||||
Contact sales
|
||||
</a>
|
||||
</div>
|
||||
<div class="rounded-md shadow ml-4">
|
||||
<a href="#" class="w-full flex items-center justify-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-indigo-600 bg-white hover:text-indigo-500 focus:outline-none focus:border-indigo-300 focus:shadow-outline-indigo transition duration-150 ease-in-out">
|
||||
Learn more
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative text-base max-w-prose mx-auto lg:max-w-none">
|
||||
<svg class="absolute top-0 right-0 -mt-20 -mr-20 lg:top-auto lg:right-auto lg:bottom-1/2 lg:left-1/2 lg:mt-0 lg:mr-0 xl:top-0 xl:right-0 xl:-mt-20 xl:-mr-20" width="404" height="384" fill="none" viewBox="0 0 404 384">
|
||||
<defs>
|
||||
<pattern id="bedc54bc-7371-44a2-a2bc-dc68d819ae60" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
|
||||
<rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="404" height="384" fill="url(#bedc54bc-7371-44a2-a2bc-dc68d819ae60)" />
|
||||
</svg>
|
||||
<blockquote class="relative bg-white rounded-lg shadow-lg">
|
||||
<div class="rounded-t-lg px-6 py-8 sm:px-10 sm:pt-10 sm:pb-8">
|
||||
<img src="https://tailwindui.com/img/logos/v1/workcation-color.svg" alt="Workcation" class="h-8" />
|
||||
<div class="relative text-lg text-gray-700 leading-7 font-medium mt-8">
|
||||
<svg class="absolute top-0 left-0 transform -translate-x-3 -translate-y-2 h-8 w-8 text-gray-200" fill="currentColor" viewBox="0 0 32 32">
|
||||
<path d="M9.352 4C4.456 7.456 1 13.12 1 19.36c0 5.088 3.072 8.064 6.624 8.064 3.36 0 5.856-2.688 5.856-5.856 0-3.168-2.208-5.472-5.088-5.472-.576 0-1.344.096-1.536.192.48-3.264 3.552-7.104 6.624-9.024L9.352 4zm16.512 0c-4.8 3.456-8.256 9.12-8.256 15.36 0 5.088 3.072 8.064 6.624 8.064 3.264 0 5.856-2.688 5.856-5.856 0-3.168-2.304-5.472-5.184-5.472-.576 0-1.248.096-1.44.192.48-3.264 3.456-7.104 6.528-9.024L25.864 4z" />
|
||||
</svg>
|
||||
<p class="relative">Tincidunt integer commodo, cursus etiam aliquam neque, et. Consectetur pretium in volutpat, diam. Montes, magna cursus nulla feugiat dignissim id lobortis amet. Laoreet sem est phasellus eu proin massa, lectus.</p>
|
||||
</div>
|
||||
</div>
|
||||
<cite class="flex items-center sm:items-start bg-indigo-600 rounded-b-lg not-italic py-5 px-6 sm:py-5 sm:pl-12 sm:pr-10 sm:mt-10">
|
||||
<div class="rounded-full border-2 border-white mr-4 sm:-mt-15 sm:mr-6">
|
||||
<img class="w-12 h-12 sm:w-20 sm:h-20 rounded-full bg-indigo-300" src="https://images.unsplash.com/photo-1500917293891-ef795e70e1f6?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2.5&w=160&h=160&q=80" alt="" />
|
||||
</div>
|
||||
<span class="text-indigo-300 font-semibold leading-6">
|
||||
<strong class="text-white font-semibold">Judith Black</strong>
|
||||
<br class="sm:hidden" />
|
||||
CEO at Workcation
|
||||
</span>
|
||||
</cite>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,26 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="bg-white">
|
||||
<div class="max-w-screen-xl mx-auto py-16 px-4 sm:px-6 lg:px-8">
|
||||
<div class="bg-indigo-700 rounded-lg shadow-xl overflow-hidden lg:grid lg:grid-cols-2 lg:gap-4">
|
||||
<div class="pt-10 pb-12 px-6 sm:pt-16 sm:px-16 lg:py-16 lg:pr-0 xl:py-20 xl:px-20">
|
||||
<div class="lg:self-center">
|
||||
<h2 class="text-3xl leading-9 font-extrabold text-white sm:text-4xl sm:leading-10">
|
||||
<span class="block">Ready to dive in?</span>
|
||||
<span class="block">Start your free trial today.</span>
|
||||
</h2>
|
||||
<p class="mt-4 text-lg leading-6 text-indigo-200">Ac euismod vel sit maecenas id pellentesque eu sed consectetur. Malesuada adipiscing sagittis vel nulla nec.</p>
|
||||
<a href="#" class="mt-8 bg-white border border-transparent rounded-md shadow px-6 py-3 inline-flex items-center text-base leading-6 font-medium text-indigo-600 hover:text-indigo-500 hover:bg-gray-50 transition duration-150 ease-in-out">Sign up for free</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative pb-3/5 -mt-6 md:pb-1/2">
|
||||
<img class="absolute inset-0 w-full h-full transform translate-x-6 translate-y-6 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>
|
||||
</body>
|
||||
</html>
|
||||
484
tailwindui/components/marketing/sections/cta-sections/index.html
Normal file
484
tailwindui/components/marketing/sections/cta-sections/index.html
Normal file
@@ -0,0 +1,484 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Tailwind UI Components</title>
|
||||
<link href="https://fonts.googleapis.com/css?family=Inter&display=swap" rel="stylesheet"/>
|
||||
<link href="https://cdn.jsdelivr.net/npm/@tailwindcss/ui@latest/dist/tailwind-ui.min.css" rel="stylesheet"/>
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.0.1/dist/alpine.js" defer></script>
|
||||
<link href="https://cdn.jsdelivr.net/npm/highlightjs-themes@1.0.0/darkula.css" rel="stylesheet"/>
|
||||
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/highlight.min.js"></script>
|
||||
<style>
|
||||
* { box-sizing: border-box; }
|
||||
.font-sans { font-family: "Inter", sans-serif; }
|
||||
.hljs {
|
||||
background: #252f3f;
|
||||
color: white;
|
||||
}
|
||||
.hljs-tag {
|
||||
color: white;
|
||||
}
|
||||
.hljs-name {
|
||||
color: #ff8383;
|
||||
}
|
||||
.hljs-attr {
|
||||
color: #ffe484;
|
||||
font-style: italic;
|
||||
}
|
||||
.hljs-string {
|
||||
color: #b5f4a5;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="font-sans antialiased text-gray-900">
|
||||
<main>
|
||||
<div class="py-4 sm:py-12">
|
||||
<div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="pb-2">
|
||||
<nav class="flex items-center text-sm leading-5 font-medium">
|
||||
<a href="/#marketing" class="text-gray-500 hover:text-gray-700 focus:outline-none focus:underline transition duration-150 ease-in-out">
|
||||
Marketing
|
||||
</a>
|
||||
<svg class="flex-shrink-0 mx-2 h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<a href="/#marketing-page-sections" class="text-gray-500 hover:text-gray-700 focus:outline-none focus:underline transition duration-150 ease-in-out">
|
||||
Page Sections
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
<h2 class="text-2xl leading-8 font-semibold font-display text-gray-900 sm:text-3xl sm:leading-9">
|
||||
CTA Sections
|
||||
</h2>
|
||||
</div>
|
||||
<div class="mt-6 bg-white max-w-8xl mx-auto sm:px-6 lg:px-8">
|
||||
<div class="max-w-8xl mx-auto">
|
||||
|
||||
<div id="component-88b1f690fd9874054cbb919910755065ba3f8925" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-88b1f690fd9874054cbb919910755065ba3f8925">Brand panel with app screenshot</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/cta-sections/brand_panel_with_app_screenshot.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-7e3c22049bb4b3812a2abfb3d8fbd1cec5c71257" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-7e3c22049bb4b3812a2abfb3d8fbd1cec5c71257">Simple center branded</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/cta-sections/simple_center_branded.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-1a0e92a137939cf1f2196e1e567fe8db35a432ca" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-1a0e92a137939cf1f2196e1e567fe8db35a432ca">Simple centered</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/cta-sections/simple_centered.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-63daf31756a20dbb3799621380e7e90ea4cca6a5" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-63daf31756a20dbb3799621380e7e90ea4cca6a5">Simple justified on light brand</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/cta-sections/simple_justified_on_light_brand.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-496382b0ae827b306601b9f9f03222a42659a480" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-496382b0ae827b306601b9f9f03222a42659a480">Simple justified</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/cta-sections/simple_justified.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-9ae6375a7eee29b1683a256e27cde9e78537d666" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-9ae6375a7eee29b1683a256e27cde9e78537d666">Simple stacked</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/cta-sections/simple_stacked.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-678a499d20f3bbfcc17e63c34fbf11c18162aeca" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-678a499d20f3bbfcc17e63c34fbf11c18162aeca">Split with image</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/cta-sections/split_with_image.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
(function() {
|
||||
const getDocHeight = doc => {
|
||||
doc = doc || document;
|
||||
const body = doc.body;
|
||||
const html = doc.documentElement;
|
||||
const height = Math.max(
|
||||
body.scrollHeight,
|
||||
body.offsetHeight,
|
||||
html.clientHeight,
|
||||
html.scrollHeight,
|
||||
html.offsetHeight
|
||||
);
|
||||
return height;
|
||||
};
|
||||
|
||||
window.resizableIFrame = function() {
|
||||
return {
|
||||
resizing: !1,
|
||||
width: "100%",
|
||||
init: function() {}
|
||||
};
|
||||
};
|
||||
const iframes = document.querySelectorAll("iframe");
|
||||
Array.from(iframes).forEach(iframe => {
|
||||
iframe.addEventListener("load", e => {
|
||||
const iframe = e.srcElement;
|
||||
const doc = iframe.contentDocument || iframe.contentWindow.document;
|
||||
doc.body.classList.add("antialiased", "font-sans", "bg-white")
|
||||
iframe.style.visibility = "hidden";
|
||||
iframe.style.height = "10px";
|
||||
const height = Math.max(getDocHeight(doc), 256) + "px";
|
||||
iframe.style.height = height;
|
||||
iframe.style.visibility = "visible";
|
||||
|
||||
const html = doc.body.innerHTML.trim();
|
||||
const container = iframe.parentElement.parentElement.parentElement;
|
||||
hljs.configure({useBR: false, tabReplace: ' '});
|
||||
const highlighted = hljs.highlight('html', html);
|
||||
const codeElem = container.children[1].querySelector("code");
|
||||
codeElem.innerHTML = highlighted.value;
|
||||
});
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,19 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="bg-indigo-700">
|
||||
<div class="max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8">
|
||||
<h2 class="text-3xl leading-9 font-extrabold text-white sm:text-4xl sm:leading-10">
|
||||
<span class="block">Boost your productivity.</span>
|
||||
<span class="block">Start using Workflow today.</span>
|
||||
</h2>
|
||||
<p class="mt-4 text-lg leading-6 text-indigo-200">Ac euismod vel sit maecenas id pellentesque eu sed consectetur. Malesuada adipiscing sagittis vel nulla nec.</p>
|
||||
<a href="#" class="mt-8 w-full inline-flex items-center justify-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-indigo-600 bg-white hover:text-indigo-500 hover:bg-indigo-50 transition duration-150 ease-in-out sm:w-auto">
|
||||
Sign up for free
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,28 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="bg-white">
|
||||
<div class="max-w-screen-xl mx-auto text-center py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
|
||||
<h2 class="text-3xl leading-9 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10">
|
||||
Ready to dive in?
|
||||
<br />
|
||||
Start your free trial today.
|
||||
</h2>
|
||||
<div class="mt-8 flex justify-center">
|
||||
<div class="inline-flex rounded-md shadow">
|
||||
<a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:shadow-outline transition duration-150 ease-in-out">
|
||||
Get started
|
||||
</a>
|
||||
</div>
|
||||
<div class="ml-3 inline-flex">
|
||||
<a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-indigo-700 bg-indigo-100 hover:text-indigo-600 hover:bg-indigo-50 focus:outline-none focus:shadow-outline focus:border-indigo-300 transition duration-150 ease-in-out">
|
||||
Learn more
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,28 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="bg-gray-50">
|
||||
<div class="max-w-screen-xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
|
||||
<h2 class="text-3xl leading-9 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10">
|
||||
Ready to dive in?
|
||||
<br />
|
||||
<span class="text-indigo-600">Start your free trial today.</span>
|
||||
</h2>
|
||||
<div class="mt-8 flex lg:flex-shrink-0 lg:mt-0">
|
||||
<div class="inline-flex rounded-md shadow">
|
||||
<a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:shadow-outline transition duration-150 ease-in-out">
|
||||
Get started
|
||||
</a>
|
||||
</div>
|
||||
<div class="ml-3 inline-flex rounded-md shadow">
|
||||
<a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-indigo-600 bg-white hover:text-indigo-500 focus:outline-none focus:shadow-outline transition duration-150 ease-in-out">
|
||||
Learn more
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,22 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="bg-indigo-50">
|
||||
<div class="max-w-screen-xl mx-auto py-12 px-4 sm:px-6 lg:py-24 lg:px-8 lg:flex lg:items-center lg:justify-between">
|
||||
<h2 class="text-3xl leading-9 font-extrabold tracking-tight text-gray-900 md:text-4xl md:leading-10">
|
||||
<span class="block">Ready to dive in?</span>
|
||||
<span class="block text-indigo-600">Start your free trial today.</span>
|
||||
</h2>
|
||||
<div class="mt-8 flex lg:flex-shrink-0 lg:mt-0">
|
||||
<div class="inline-flex rounded-md shadow">
|
||||
<a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 transition duration-150 ease-in-out">
|
||||
Get started
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,28 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="bg-white">
|
||||
<div class="max-w-screen-xl mx-auto py-12 px-4 sm:px-6 md:py-16 lg:px-8 lg:py-20">
|
||||
<h2 class="text-3xl leading-9 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10">
|
||||
Ready to dive in?
|
||||
<br />
|
||||
<span class="text-indigo-600">Start your free trial today.</span>
|
||||
</h2>
|
||||
<div class="mt-8 flex">
|
||||
<div class="inline-flex rounded-md shadow">
|
||||
<a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:shadow-outline transition duration-150 ease-in-out">
|
||||
Get started
|
||||
</a>
|
||||
</div>
|
||||
<div class="ml-3 inline-flex">
|
||||
<a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-indigo-700 bg-indigo-100 hover:text-indigo-600 hover:bg-indigo-50 focus:outline-none focus:shadow-outline focus:border-indigo-300 transition duration-150 ease-in-out">
|
||||
Learn more
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,37 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="relative bg-gray-800">
|
||||
<div class="h-56 bg-indigo-600 sm:h-72 md:absolute md:left-0 md:h-full md:w-1/2">
|
||||
<img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1525130413817-d45c1d127c42?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1920&q=60&blend=6875F5&sat=-100&blend-mode=multiply" alt="Support team" />
|
||||
</div>
|
||||
<div class="relative max-w-screen-xl mx-auto px-4 py-12 sm:px-6 lg:px-8 lg:py-16">
|
||||
<div class="md:ml-auto md:w-1/2 md:pl-10">
|
||||
<div class="text-base leading-6 font-semibold uppercase tracking-wider text-gray-300">
|
||||
Award winning support
|
||||
</div>
|
||||
<h2 class="mt-2 text-white text-3xl leading-9 font-extrabold tracking-tight sm:text-4xl sm:leading-10">
|
||||
We’re here to help
|
||||
</h2>
|
||||
<p class="mt-3 text-lg leading-7 text-gray-300">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Et, egestas tempus tellus etiam sed. Quam a scelerisque amet ullamcorper eu enim et fermentum, augue. Aliquet amet volutpat quisque ut interdum tincidunt duis.
|
||||
</p>
|
||||
<div class="mt-8">
|
||||
<div class="inline-flex rounded-md shadow">
|
||||
<a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-gray-900 bg-white hover:text-gray-600 focus:outline-none focus:shadow-outline transition duration-150 ease-in-out">
|
||||
Visit the help center
|
||||
<!-- Heroicon name: external-link -->
|
||||
<svg class="-mr-1 ml-3 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z" />
|
||||
<path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,180 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="bg-gray-50">
|
||||
<div class="max-w-screen-xl mx-auto py-12 px-4 sm:py-16 sm:px-6 lg:px-8">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<h2 class="text-center text-3xl leading-9 font-extrabold text-gray-900 sm:text-4xl sm:leading-10">
|
||||
Frequently asked questions
|
||||
</h2>
|
||||
<div class="mt-6 border-t-2 border-gray-200 pt-6">
|
||||
<dl>
|
||||
<div>
|
||||
<dt class="text-lg leading-7">
|
||||
<!-- Expand/collapse question button -->
|
||||
<button class="text-left w-full flex justify-between items-start text-gray-400 focus:outline-none focus:text-gray-900">
|
||||
<span class="font-medium text-gray-900">
|
||||
What's the best thing about Switzerland?
|
||||
</span>
|
||||
<span class="ml-6 h-7 flex items-center">
|
||||
<!--
|
||||
Heroicon name: chevron-down
|
||||
|
||||
Open: "-rotate-180", Closed: "rotate-0"
|
||||
-->
|
||||
<svg class="-rotate-180 h-6 w-6 transform" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</dt>
|
||||
<dd class="mt-2 pr-12">
|
||||
<p class="text-base leading-6 text-gray-500">
|
||||
I don't know, but the flag is a big plus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="mt-6 border-t border-gray-200 pt-6">
|
||||
<div>
|
||||
<dt class="text-lg leading-7">
|
||||
<!-- Expand/collapse question button -->
|
||||
<button class="text-left w-full flex justify-between items-start text-gray-400 focus:outline-none focus:text-gray-900">
|
||||
<span class="font-medium text-gray-900">
|
||||
How do you make holy water?
|
||||
</span>
|
||||
<span class="ml-6 h-7 flex items-center">
|
||||
<!--
|
||||
Heroicon name: chevron-down
|
||||
|
||||
Open: "-rotate-180", Closed: "rotate-0"
|
||||
-->
|
||||
<svg class="rotate-0 h-6 w-6 transform" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</dt>
|
||||
<dd class="mt-2 pr-12">
|
||||
<p class="text-base leading-6 text-gray-500">
|
||||
You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam aut tempora vitae odio inventore fuga aliquam nostrum quod porro. Delectus quia facere id sequi expedita natus.
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 border-t border-gray-200 pt-6">
|
||||
<div>
|
||||
<dt class="text-lg leading-7">
|
||||
<!-- Expand/collapse question button -->
|
||||
<button class="text-left w-full flex justify-between items-start text-gray-400 focus:outline-none focus:text-gray-900">
|
||||
<span class="font-medium text-gray-900">
|
||||
What do you call someone with no body and no nose?
|
||||
</span>
|
||||
<span class="ml-6 h-7 flex items-center">
|
||||
<!--
|
||||
Heroicon name: chevron-down
|
||||
|
||||
Open: "-rotate-180", Closed: "rotate-0"
|
||||
-->
|
||||
<svg class="rotate-0 h-6 w-6 transform" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</dt>
|
||||
<dd class="mt-2 pr-12">
|
||||
<p class="text-base leading-6 text-gray-500">
|
||||
Nobody knows. Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa, voluptas ipsa quia excepturi, quibusdam natus exercitationem sapiente tempore labore voluptatem.
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 border-t border-gray-200 pt-6">
|
||||
<div>
|
||||
<dt class="text-lg leading-7">
|
||||
<!-- Expand/collapse question button -->
|
||||
<button class="text-left w-full flex justify-between items-start text-gray-400 focus:outline-none focus:text-gray-900">
|
||||
<span class="font-medium text-gray-900">
|
||||
Why do you never see elephants hiding in trees?
|
||||
</span>
|
||||
<span class="ml-6 h-7 flex items-center">
|
||||
<!--
|
||||
Heroicon name: chevron-down
|
||||
|
||||
Open: "-rotate-180", Closed: "rotate-0"
|
||||
-->
|
||||
<svg class="rotate-0 h-6 w-6 transform" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</dt>
|
||||
<dd class="mt-2 pr-12">
|
||||
<p class="text-base leading-6 text-gray-500">
|
||||
Because they're so good at it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 border-t border-gray-200 pt-6">
|
||||
<div>
|
||||
<dt class="text-lg leading-7">
|
||||
<!-- Expand/collapse question button -->
|
||||
<button class="text-left w-full flex justify-between items-start text-gray-400 focus:outline-none focus:text-gray-900">
|
||||
<span class="font-medium text-gray-900">
|
||||
Why can't you hear a pterodactyl go to the bathroom?
|
||||
</span>
|
||||
<span class="ml-6 h-7 flex items-center">
|
||||
<!--
|
||||
Heroicon name: chevron-down
|
||||
|
||||
Open: "-rotate-180", Closed: "rotate-0"
|
||||
-->
|
||||
<svg class="rotate-0 h-6 w-6 transform" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</dt>
|
||||
<dd class="mt-2 pr-12">
|
||||
<p class="text-base leading-6 text-gray-500">
|
||||
Because the pee is silent. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, quas voluptatibus ex culpa ipsum, aspernatur blanditiis fugiat ullam magnam suscipit deserunt illum natus facilis atque vero consequatur! Quisquam, debitis error.
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 border-t border-gray-200 pt-6">
|
||||
<div>
|
||||
<dt class="text-lg leading-7">
|
||||
<!-- Expand/collapse question button -->
|
||||
<button class="text-left w-full flex justify-between items-start text-gray-400 focus:outline-none focus:text-gray-900">
|
||||
<span class="font-medium text-gray-900">
|
||||
Why did the invisible man turn down the job offer?
|
||||
</span>
|
||||
<span class="ml-6 h-7 flex items-center">
|
||||
<!--
|
||||
Heroicon name: chevron-down
|
||||
|
||||
Open: "-rotate-180", Closed: "rotate-0"
|
||||
-->
|
||||
<svg class="rotate-0 h-6 w-6 transform" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</dt>
|
||||
<dd class="mt-2 pr-12">
|
||||
<p class="text-base leading-6 text-gray-500">
|
||||
He couldn't see himself doing it. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eveniet perspiciatis officiis corrupti tenetur. Temporibus ut voluptatibus, perferendis sed unde rerum deserunt eius.
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
430
tailwindui/components/marketing/sections/faq-sections/index.html
Normal file
430
tailwindui/components/marketing/sections/faq-sections/index.html
Normal file
@@ -0,0 +1,430 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Tailwind UI Components</title>
|
||||
<link href="https://fonts.googleapis.com/css?family=Inter&display=swap" rel="stylesheet"/>
|
||||
<link href="https://cdn.jsdelivr.net/npm/@tailwindcss/ui@latest/dist/tailwind-ui.min.css" rel="stylesheet"/>
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.0.1/dist/alpine.js" defer></script>
|
||||
<link href="https://cdn.jsdelivr.net/npm/highlightjs-themes@1.0.0/darkula.css" rel="stylesheet"/>
|
||||
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/highlight.min.js"></script>
|
||||
<style>
|
||||
* { box-sizing: border-box; }
|
||||
.font-sans { font-family: "Inter", sans-serif; }
|
||||
.hljs {
|
||||
background: #252f3f;
|
||||
color: white;
|
||||
}
|
||||
.hljs-tag {
|
||||
color: white;
|
||||
}
|
||||
.hljs-name {
|
||||
color: #ff8383;
|
||||
}
|
||||
.hljs-attr {
|
||||
color: #ffe484;
|
||||
font-style: italic;
|
||||
}
|
||||
.hljs-string {
|
||||
color: #b5f4a5;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="font-sans antialiased text-gray-900">
|
||||
<main>
|
||||
<div class="py-4 sm:py-12">
|
||||
<div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="pb-2">
|
||||
<nav class="flex items-center text-sm leading-5 font-medium">
|
||||
<a href="/#marketing" class="text-gray-500 hover:text-gray-700 focus:outline-none focus:underline transition duration-150 ease-in-out">
|
||||
Marketing
|
||||
</a>
|
||||
<svg class="flex-shrink-0 mx-2 h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<a href="/#marketing-page-sections" class="text-gray-500 hover:text-gray-700 focus:outline-none focus:underline transition duration-150 ease-in-out">
|
||||
Page Sections
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
<h2 class="text-2xl leading-8 font-semibold font-display text-gray-900 sm:text-3xl sm:leading-9">
|
||||
FAQs
|
||||
</h2>
|
||||
</div>
|
||||
<div class="mt-6 bg-white max-w-8xl mx-auto sm:px-6 lg:px-8">
|
||||
<div class="max-w-8xl mx-auto">
|
||||
|
||||
<div id="component-20fec4add8b4e3cbccda74d916745e0151501fd2" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-20fec4add8b4e3cbccda74d916745e0151501fd2">Centered accordion</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/faq-sections/centered_accordion.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-bb08c419ac09343ee8841d9a53cce47e3b804a72" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-bb08c419ac09343ee8841d9a53cce47e3b804a72">Offset with supporting text</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/faq-sections/offset_with_supporting_text.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-cf7f62b9d794a55cbeffc455793d2080cd1eacd0" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-cf7f62b9d794a55cbeffc455793d2080cd1eacd0">Side-by-side</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/faq-sections/side_by_side.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-461bb2fd2b1502fa70c9343d3722e82b1c864239" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-461bb2fd2b1502fa70c9343d3722e82b1c864239">Three columns</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/faq-sections/three_columns.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-7461cd8102b5ff1f325ac0f4b7825f6cd1a8ce99" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-7461cd8102b5ff1f325ac0f4b7825f6cd1a8ce99">Two columns on brand</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/faq-sections/two_columns_on_brand.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-ade360c93f8ea272ea957064cf532e310afa8f94" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-ade360c93f8ea272ea957064cf532e310afa8f94">Two columns</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/faq-sections/two_columns.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
(function() {
|
||||
const getDocHeight = doc => {
|
||||
doc = doc || document;
|
||||
const body = doc.body;
|
||||
const html = doc.documentElement;
|
||||
const height = Math.max(
|
||||
body.scrollHeight,
|
||||
body.offsetHeight,
|
||||
html.clientHeight,
|
||||
html.scrollHeight,
|
||||
html.offsetHeight
|
||||
);
|
||||
return height;
|
||||
};
|
||||
|
||||
window.resizableIFrame = function() {
|
||||
return {
|
||||
resizing: !1,
|
||||
width: "100%",
|
||||
init: function() {}
|
||||
};
|
||||
};
|
||||
const iframes = document.querySelectorAll("iframe");
|
||||
Array.from(iframes).forEach(iframe => {
|
||||
iframe.addEventListener("load", e => {
|
||||
const iframe = e.srcElement;
|
||||
const doc = iframe.contentDocument || iframe.contentWindow.document;
|
||||
doc.body.classList.add("antialiased", "font-sans", "bg-white")
|
||||
iframe.style.visibility = "hidden";
|
||||
iframe.style.height = "10px";
|
||||
const height = Math.max(getDocHeight(doc), 256) + "px";
|
||||
iframe.style.height = height;
|
||||
iframe.style.visibility = "visible";
|
||||
|
||||
const html = doc.body.innerHTML.trim();
|
||||
const container = iframe.parentElement.parentElement.parentElement;
|
||||
hljs.configure({useBR: false, tabReplace: ' '});
|
||||
const highlighted = hljs.highlight('html', html);
|
||||
const codeElem = container.children[1].querySelector("code");
|
||||
codeElem.innerHTML = highlighted.value;
|
||||
});
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,55 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="bg-white">
|
||||
<div class="max-w-screen-xl mx-auto py-16 px-4 sm:px-6 lg:py-20 lg:px-8">
|
||||
<div class="lg:grid lg:grid-cols-3 lg:gap-8">
|
||||
<div class="space-y-4">
|
||||
<h2 class="text-3xl leading-9 font-extrabold text-gray-900">
|
||||
Frequently asked questions
|
||||
</h2>
|
||||
<p class="text-lg leading-7 text-gray-500">Can’t find the answer you’re looking for? Reach out to our <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 transition duration-150 ease-in-out">customer support</a> team.</p>
|
||||
</div>
|
||||
<div class="mt-12 lg:mt-0 lg:col-span-2">
|
||||
<dl class="space-y-12">
|
||||
<div class="space-y-2">
|
||||
<dt class="text-lg leading-6 font-medium text-gray-900">
|
||||
How do you make holy water?
|
||||
</dt>
|
||||
<dd class="text-base leading-6 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 leading-6 font-medium text-gray-900">
|
||||
What's the best thing about Switzerland?
|
||||
</dt>
|
||||
<dd class="text-base leading-6 text-gray-500">
|
||||
I don'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 leading-6 font-medium text-gray-900">
|
||||
What do you call someone with no body and no nose?
|
||||
</dt>
|
||||
<dd class="text-base leading-6 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 leading-6 font-medium text-gray-900">
|
||||
Why do you never see elephants hiding in trees?
|
||||
</dt>
|
||||
<dd class="text-base leading-6 text-gray-500">
|
||||
Because they're so good at it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,78 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="bg-gray-50">
|
||||
<div class="max-w-screen-xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
|
||||
<h2 class="text-3xl leading-9 font-extrabold text-gray-900 sm:text-4xl sm:leading-10">
|
||||
Frequently asked questions
|
||||
</h2>
|
||||
<div class="mt-6 border-t-2 border-gray-200 pt-6">
|
||||
<dl>
|
||||
<div class="md:grid md:grid-cols-12 md:gap-8">
|
||||
<dt class="text-base leading-6 font-medium text-gray-900 md:col-span-5">
|
||||
What's the best thing about Switzerland?
|
||||
</dt>
|
||||
<dd class="mt-2 md:mt-0 md:col-span-7">
|
||||
<p class="text-base leading-6 text-gray-500">
|
||||
I don't know, but the flag is a big plus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="mt-8 border-t border-gray-200 pt-6 md:grid md:grid-cols-12 md:gap-8">
|
||||
<dt class="text-base leading-6 font-medium text-gray-900 md:col-span-5">
|
||||
How do you make holy water?
|
||||
</dt>
|
||||
<dd class="mt-2 md:mt-0 md:col-span-7">
|
||||
<p class="text-base leading-6 text-gray-500">
|
||||
You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam aut tempora vitae odio inventore fuga aliquam nostrum quod porro. Delectus quia facere id sequi expedita natus.
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="mt-8 border-t border-gray-200 pt-6 md:grid md:grid-cols-12 md:gap-8">
|
||||
<dt class="text-base leading-6 font-medium text-gray-900 md:col-span-5">
|
||||
What do you call someone with no body and no nose?
|
||||
</dt>
|
||||
<dd class="mt-2 md:mt-0 md:col-span-7">
|
||||
<p class="text-base leading-6 text-gray-500">
|
||||
Nobody knows. Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa, voluptas ipsa quia excepturi, quibusdam natus exercitationem sapiente tempore labore voluptatem.
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="mt-8 border-t border-gray-200 pt-6 md:grid md:grid-cols-12 md:gap-8">
|
||||
<dt class="text-base leading-6 font-medium text-gray-900 md:col-span-5">
|
||||
Why do you never see elephants hiding in trees?
|
||||
</dt>
|
||||
<dd class="mt-2 md:mt-0 md:col-span-7">
|
||||
<p class="text-base leading-6 text-gray-500">
|
||||
Because they're so good at it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="mt-8 border-t border-gray-200 pt-6 md:grid md:grid-cols-12 md:gap-8">
|
||||
<dt class="text-base leading-6 font-medium text-gray-900 md:col-span-5">
|
||||
Why can't you hear a pterodactyl go to the bathroom?
|
||||
</dt>
|
||||
<dd class="mt-2 md:mt-0 md:col-span-7">
|
||||
<p class="text-base leading-6 text-gray-500">
|
||||
Because the pee is silent. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, quas voluptatibus ex culpa ipsum, aspernatur blanditiis fugiat ullam magnam suscipit deserunt illum natus facilis atque vero consequatur! Quisquam, debitis error.
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="mt-8 border-t border-gray-200 pt-6 md:grid md:grid-cols-12 md:gap-8">
|
||||
<dt class="text-base leading-6 font-medium text-gray-900 md:col-span-5">
|
||||
Why did the invisible man turn down the job offer?
|
||||
</dt>
|
||||
<dd class="mt-2 md:mt-0 md:col-span-7">
|
||||
<p class="text-base leading-6 text-gray-500">
|
||||
He couldn't see himself doing it. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eveniet perspiciatis officiis corrupti tenetur. Temporibus ut voluptatibus, perferendis sed unde rerum deserunt eius.
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,66 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="bg-white">
|
||||
<div class="max-w-screen-xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
|
||||
<h2 class="text-3xl leading-9 font-extrabold text-gray-900 text-center">
|
||||
Frequently asked questions
|
||||
</h2>
|
||||
<div class="mt-12">
|
||||
<dl class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:grid-rows-2 md:gap-x-8 md:gap-y-12 lg:grid-cols-3">
|
||||
<div class="space-y-2">
|
||||
<dt class="text-lg leading-6 font-medium text-gray-900">
|
||||
What's the best thing about Switzerland?
|
||||
</dt>
|
||||
<dd class="text-base leading-6 text-gray-500">
|
||||
I don'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 leading-6 font-medium text-gray-900">
|
||||
How do you make holy water?
|
||||
</dt>
|
||||
<dd class="text-base leading-6 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 leading-6 font-medium text-gray-900">
|
||||
Why do you never see elephants hiding in trees?
|
||||
</dt>
|
||||
<dd class="text-base leading-6 text-gray-500">
|
||||
Because they'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 leading-6 font-medium text-gray-900">
|
||||
What do you call someone with no body and no nose?
|
||||
</dt>
|
||||
<dd class="text-base leading-6 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 leading-6 font-medium text-gray-900">
|
||||
Why can't you hear a pterodactyl go to the bathroom?
|
||||
</dt>
|
||||
<dd class="text-base leading-6 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 leading-6 font-medium text-gray-900">
|
||||
Why did the invisible man turn down the job offer?
|
||||
</dt>
|
||||
<dd class="text-base leading-6 text-gray-500">
|
||||
He couldn't see himself doing it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,72 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="bg-white">
|
||||
<div class="max-w-screen-xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
|
||||
<h2 class="text-3xl leading-9 font-extrabold text-gray-900">
|
||||
Frequently asked questions
|
||||
</h2>
|
||||
|
||||
<div class="mt-6 border-t border-gray-200 pt-10">
|
||||
<dl class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:grid-rows-2 md:gap-x-8 md:gap-y-12">
|
||||
<div class="space-y-2">
|
||||
<dt class="text-lg leading-6 font-medium text-gray-900">
|
||||
What's the best thing about Switzerland?
|
||||
</dt>
|
||||
<dd class="text-base leading-6 text-gray-500">
|
||||
I don'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 leading-6 font-medium text-gray-900">
|
||||
Why do you never see elephants hiding in trees?
|
||||
</dt>
|
||||
<dd class="text-base leading-6 text-gray-500">
|
||||
Because they'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 leading-6 font-medium text-gray-900">
|
||||
How do you make holy water?
|
||||
</dt>
|
||||
<dd class="text-base leading-6 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 leading-6 font-medium text-gray-900">
|
||||
Why can't you hear a pterodactyl go to the bathroom?
|
||||
</dt>
|
||||
<dd class="text-base leading-6 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 leading-6 font-medium text-gray-900">
|
||||
What do you call someone with no body and no nose?
|
||||
</dt>
|
||||
<dd class="text-base leading-6 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 leading-6 font-medium text-gray-900">
|
||||
Why did the invisible man turn down the job offer?
|
||||
</dt>
|
||||
<dd class="text-base leading-6 text-gray-500">
|
||||
He couldn't see himself doing it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,66 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="bg-indigo-800">
|
||||
<div class="max-w-screen-xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
|
||||
<h2 class="text-3xl leading-9 font-extrabold text-white">
|
||||
Frequently asked questions
|
||||
</h2>
|
||||
<div class="mt-6 border-t border-indigo-400 border-opacity-25 pt-10">
|
||||
<dl class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:grid-rows-2 md:gap-x-8 md:gap-y-12">
|
||||
<div class="space-y-2">
|
||||
<dt class="text-lg leading-6 font-medium text-white">
|
||||
What's the best thing about Switzerland?
|
||||
</dt>
|
||||
<dd class="text-base leading-6 text-indigo-200">
|
||||
I don'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 leading-6 font-medium text-white">
|
||||
Why do you never see elephants hiding in trees?
|
||||
</dt>
|
||||
<dd class="text-base leading-6 text-indigo-200">
|
||||
Because they'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 leading-6 font-medium text-white">
|
||||
How do you make holy water?
|
||||
</dt>
|
||||
<dd class="text-base leading-6 text-indigo-200">
|
||||
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 leading-6 font-medium text-white">
|
||||
Why can't you hear a pterodactyl go to the bathroom?
|
||||
</dt>
|
||||
<dd class="text-base leading-6 text-indigo-200">
|
||||
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 leading-6 font-medium text-white">
|
||||
What do you call someone with no body and no nose?
|
||||
</dt>
|
||||
<dd class="text-base leading-6 text-indigo-200">
|
||||
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 leading-6 font-medium text-white">
|
||||
Why did the invisible man turn down the job offer?
|
||||
</dt>
|
||||
<dd class="text-base leading-6 text-indigo-200">
|
||||
He couldn't see himself doing it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,181 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="py-16 bg-gray-50 overflow-hidden lg:py-24">
|
||||
<div class="relative max-w-xl mx-auto px-4 sm:px-6 lg:px-8 lg:max-w-screen-xl">
|
||||
<svg class="hidden lg:block absolute left-full transform -translate-x-1/2 -translate-y-1/4" width="404" height="784" fill="none" viewBox="0 0 404 784">
|
||||
<defs>
|
||||
<pattern id="b1e6e422-73f8-40a6-b5d9-c8586e37e0e7" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
|
||||
<rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="404" height="784" fill="url(#b1e6e422-73f8-40a6-b5d9-c8586e37e0e7)" />
|
||||
</svg>
|
||||
|
||||
<div class="relative">
|
||||
<h3 class="text-center text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10">
|
||||
A better way to send money
|
||||
</h3>
|
||||
<p class="mt-4 max-w-3xl mx-auto text-center text-xl leading-7 text-gray-500">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus magnam voluptatum cupiditate veritatis in, accusamus quisquam.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="relative mt-12 lg:mt-24 lg:grid lg:grid-cols-2 lg:gap-8 lg:items-center">
|
||||
<div class="relative">
|
||||
<h4 class="text-2xl leading-8 font-extrabold text-gray-900 tracking-tight sm:text-3xl sm:leading-9">
|
||||
Transfer funds world-wide
|
||||
</h4>
|
||||
<p class="mt-3 text-lg leading-7 text-gray-500">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur minima sequi recusandae, porro maiores officia assumenda aliquam laborum ab aliquid veritatis impedit odit adipisci optio iste blanditiis facere. Totam, velit.
|
||||
</p>
|
||||
|
||||
<ul class="mt-10">
|
||||
<li>
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
|
||||
<!-- Heroicon name: globe-alt -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<h5 class="text-lg leading-6 font-medium text-gray-900">Competitive exchange rates</h5>
|
||||
<p class="mt-2 text-base leading-6 text-gray-500">
|
||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mt-10">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
|
||||
<!-- Heroicon name: scale -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<h5 class="text-lg leading-6 font-medium text-gray-900">No hidden fees</h5>
|
||||
<p class="mt-2 text-base leading-6 text-gray-500">
|
||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mt-10">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
|
||||
<!-- Heroicon name: lightning-bolt -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<h5 class="text-lg leading-6 font-medium text-gray-900">Transfers are instant</h5>
|
||||
<p class="mt-2 text-base leading-6 text-gray-500">
|
||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="mt-10 -mx-4 relative lg:mt-0">
|
||||
<svg class="absolute left-1/2 transform -translate-x-1/2 translate-y-16 lg:hidden" width="784" height="404" fill="none" viewBox="0 0 784 404">
|
||||
<defs>
|
||||
<pattern id="ca9667ae-9f92-4be7-abcb-9e3d727f2941" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
|
||||
<rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="784" height="404" fill="url(#ca9667ae-9f92-4be7-abcb-9e3d727f2941)" />
|
||||
</svg>
|
||||
<img class="relative mx-auto" width="490" src="https://tailwindui.com/img/features/feature-example-1.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<svg class="hidden lg:block absolute right-full transform translate-x-1/2 translate-y-12" width="404" height="784" fill="none" viewBox="0 0 404 784">
|
||||
<defs>
|
||||
<pattern id="64e643ad-2176-4f86-b3d7-f2c5da3b6a6d" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
|
||||
<rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="404" height="784" fill="url(#64e643ad-2176-4f86-b3d7-f2c5da3b6a6d)" />
|
||||
</svg>
|
||||
|
||||
<div class="relative mt-12 sm:mt-16 lg:mt-24">
|
||||
<div class="lg:grid lg:grid-flow-row-dense lg:grid-cols-2 lg:gap-8 lg:items-center">
|
||||
<div class="lg:col-start-2">
|
||||
<h4 class="text-2xl leading-8 font-extrabold text-gray-900 tracking-tight sm:text-3xl sm:leading-9">
|
||||
Always in the loop
|
||||
</h4>
|
||||
<p class="mt-3 text-lg leading-7 text-gray-500">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit ex obcaecati natus eligendi delectus, cum deleniti sunt in labore nihil quod quibusdam expedita nemo.
|
||||
</p>
|
||||
|
||||
<ul class="mt-10">
|
||||
<li>
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
|
||||
<!-- Heroicon name: annotation -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<h5 class="text-lg leading-6 font-medium text-gray-900">Mobile notifications</h5>
|
||||
<p class="mt-2 text-base leading-6 text-gray-500">
|
||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mt-10">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
|
||||
<!-- Heroicon name: mail -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<h5 class="text-lg leading-6 font-medium text-gray-900">Reminder emails</h5>
|
||||
<p class="mt-2 text-base leading-6 text-gray-500">
|
||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="mt-10 -mx-4 relative lg:mt-0 lg:col-start-1">
|
||||
<svg class="absolute left-1/2 transform -translate-x-1/2 translate-y-16 lg:hidden" width="784" height="404" fill="none" viewBox="0 0 784 404">
|
||||
<defs>
|
||||
<pattern id="e80155a9-dfde-425a-b5ea-1f6fadd20131" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
|
||||
<rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="784" height="404" fill="url(#e80155a9-dfde-425a-b5ea-1f6fadd20131)" />
|
||||
</svg>
|
||||
<img class="relative mx-auto" width="490" src="https://tailwindui.com/img/features/feature-example-2.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,97 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="py-12 bg-white">
|
||||
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="lg:text-center">
|
||||
<p class="text-base leading-6 text-indigo-600 font-semibold tracking-wide uppercase">Transactions</p>
|
||||
<h3 class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10">
|
||||
A better way to send money
|
||||
</h3>
|
||||
<p class="mt-4 max-w-2xl text-xl leading-7 text-gray-500 lg:mx-auto">
|
||||
Lorem ipsum dolor sit amet consect adipisicing elit. Possimus magnam voluptatum cupiditate veritatis in accusamus quisquam.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-10">
|
||||
<ul class="md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">
|
||||
<li>
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
|
||||
<!-- Heroicon name: globe-alt -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<h4 class="text-lg leading-6 font-medium text-gray-900">Competitive exchange rates</h4>
|
||||
<p class="mt-2 text-base leading-6 text-gray-500">
|
||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mt-10 md:mt-0">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
|
||||
<!-- Heroicon name: scale -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<h4 class="text-lg leading-6 font-medium text-gray-900">No hidden fees</h4>
|
||||
<p class="mt-2 text-base leading-6 text-gray-500">
|
||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mt-10 md:mt-0">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
|
||||
<!-- Heroicon name: lightning-bolt -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<h4 class="text-lg leading-6 font-medium text-gray-900">Transfers are instant</h4>
|
||||
<p class="mt-2 text-base leading-6 text-gray-500">
|
||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mt-10 md:mt-0">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
|
||||
<!-- Heroicon name: annotation -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<h4 class="text-lg leading-6 font-medium text-gray-900">Mobile notifications</h4>
|
||||
<p class="mt-2 text-base leading-6 text-gray-500">
|
||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,430 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Tailwind UI Components</title>
|
||||
<link href="https://fonts.googleapis.com/css?family=Inter&display=swap" rel="stylesheet"/>
|
||||
<link href="https://cdn.jsdelivr.net/npm/@tailwindcss/ui@latest/dist/tailwind-ui.min.css" rel="stylesheet"/>
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.0.1/dist/alpine.js" defer></script>
|
||||
<link href="https://cdn.jsdelivr.net/npm/highlightjs-themes@1.0.0/darkula.css" rel="stylesheet"/>
|
||||
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/highlight.min.js"></script>
|
||||
<style>
|
||||
* { box-sizing: border-box; }
|
||||
.font-sans { font-family: "Inter", sans-serif; }
|
||||
.hljs {
|
||||
background: #252f3f;
|
||||
color: white;
|
||||
}
|
||||
.hljs-tag {
|
||||
color: white;
|
||||
}
|
||||
.hljs-name {
|
||||
color: #ff8383;
|
||||
}
|
||||
.hljs-attr {
|
||||
color: #ffe484;
|
||||
font-style: italic;
|
||||
}
|
||||
.hljs-string {
|
||||
color: #b5f4a5;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="font-sans antialiased text-gray-900">
|
||||
<main>
|
||||
<div class="py-4 sm:py-12">
|
||||
<div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="pb-2">
|
||||
<nav class="flex items-center text-sm leading-5 font-medium">
|
||||
<a href="/#marketing" class="text-gray-500 hover:text-gray-700 focus:outline-none focus:underline transition duration-150 ease-in-out">
|
||||
Marketing
|
||||
</a>
|
||||
<svg class="flex-shrink-0 mx-2 h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<a href="/#marketing-page-sections" class="text-gray-500 hover:text-gray-700 focus:outline-none focus:underline transition duration-150 ease-in-out">
|
||||
Page Sections
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
<h2 class="text-2xl leading-8 font-semibold font-display text-gray-900 sm:text-3xl sm:leading-9">
|
||||
Feature Sections
|
||||
</h2>
|
||||
</div>
|
||||
<div class="mt-6 bg-white max-w-8xl mx-auto sm:px-6 lg:px-8">
|
||||
<div class="max-w-8xl mx-auto">
|
||||
|
||||
<div id="component-ff335e94c843bed85faa805d443d64447b7b3037" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-ff335e94c843bed85faa805d443d64447b7b3037">Alternative side-by-side with images</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/feature-sections/alternative_side_by_side_with_images.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-e7698abca4a5ca29c6bc4bce34bd5a469dd98a7a" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-e7698abca4a5ca29c6bc4bce34bd5a469dd98a7a">Centered 2x2 grid</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/feature-sections/centered_2x2_grid.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-581b6969fe99b76f84f636534921a9d4b9e83107" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-581b6969fe99b76f84f636534921a9d4b9e83107">With feature grid list</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/feature-sections/with_feature_grid_list.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-44a901c8b59760d9b37db3db9e3dd3c9872be67d" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-44a901c8b59760d9b37db3db9e3dd3c9872be67d">With feature list</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/feature-sections/with_feature_list.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-ca29b1dbd5460a3662ca0c4c9dc57de37d805a91" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-ca29b1dbd5460a3662ca0c4c9dc57de37d805a91">Offset 2x2 grid</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/feature-sections/offset_2x2_grid.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-a2bf727cde6503f1646a9d99207455f793b8a649" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-a2bf727cde6503f1646a9d99207455f793b8a649">Simple three-column</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/feature-sections/simple_three_column.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
(function() {
|
||||
const getDocHeight = doc => {
|
||||
doc = doc || document;
|
||||
const body = doc.body;
|
||||
const html = doc.documentElement;
|
||||
const height = Math.max(
|
||||
body.scrollHeight,
|
||||
body.offsetHeight,
|
||||
html.clientHeight,
|
||||
html.scrollHeight,
|
||||
html.offsetHeight
|
||||
);
|
||||
return height;
|
||||
};
|
||||
|
||||
window.resizableIFrame = function() {
|
||||
return {
|
||||
resizing: !1,
|
||||
width: "100%",
|
||||
init: function() {}
|
||||
};
|
||||
};
|
||||
const iframes = document.querySelectorAll("iframe");
|
||||
Array.from(iframes).forEach(iframe => {
|
||||
iframe.addEventListener("load", e => {
|
||||
const iframe = e.srcElement;
|
||||
const doc = iframe.contentDocument || iframe.contentWindow.document;
|
||||
doc.body.classList.add("antialiased", "font-sans", "bg-white")
|
||||
iframe.style.visibility = "hidden";
|
||||
iframe.style.height = "10px";
|
||||
const height = Math.max(getDocHeight(doc), 256) + "px";
|
||||
iframe.style.height = height;
|
||||
iframe.style.visibility = "visible";
|
||||
|
||||
const html = doc.body.innerHTML.trim();
|
||||
const container = iframe.parentElement.parentElement.parentElement;
|
||||
hljs.configure({useBR: false, tabReplace: ' '});
|
||||
const highlighted = hljs.highlight('html', html);
|
||||
const codeElem = container.children[1].querySelector("code");
|
||||
codeElem.innerHTML = highlighted.value;
|
||||
});
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,85 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="bg-gray-50 overflow-hidden">
|
||||
<div class="relative max-w-screen-xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
|
||||
<svg class="absolute top-0 left-full transform -translate-x-1/2 -translate-y-3/4 lg:left-auto lg:right-full lg:translate-x-2/3 lg:translate-y-1/4" width="404" height="784" fill="none" viewBox="0 0 404 784">
|
||||
<defs>
|
||||
<pattern id="8b1b5f72-e944-4457-af67-0c6d15a99f38" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
|
||||
<rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="404" height="784" fill="url(#8b1b5f72-e944-4457-af67-0c6d15a99f38)" />
|
||||
</svg>
|
||||
|
||||
<div class="relative lg:grid lg:grid-cols-3 lg:gap-x-8">
|
||||
<div class="lg:col-span-1">
|
||||
<h3 class="text-3xl leading-9 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10">
|
||||
A better way to send money.
|
||||
</h3>
|
||||
</div>
|
||||
<div class="mt-10 sm:grid sm:grid-cols-2 sm:gap-x-8 sm:gap-y-10 lg:col-span-2 lg:mt-0">
|
||||
<div>
|
||||
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
|
||||
<!-- Heroicon name: globe-alt -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="mt-5">
|
||||
<h4 class="text-lg leading-6 font-medium text-gray-900">Competitive rates</h4>
|
||||
<p class="mt-2 text-base leading-6 text-gray-500">
|
||||
Consequuntur omnis dicta cumque, inventore atque ab dolores aspernatur tempora ab doloremque.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 sm:mt-0">
|
||||
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
|
||||
<!-- Heroicon name: scale -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="mt-5">
|
||||
<h4 class="text-lg leading-6 font-medium text-gray-900">No hidden fees</h4>
|
||||
<p class="mt-2 text-base leading-6 text-gray-500">
|
||||
Corporis quisquam nostrum nulla veniam recusandae temporibus aperiam officia incidunt at distinctio ratione.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 sm:mt-0">
|
||||
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
|
||||
<!-- Heroicon name: lightning-bolt -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="mt-5">
|
||||
<h4 class="text-lg leading-6 font-medium text-gray-900">Instant transfers</h4>
|
||||
<p class="mt-2 text-base leading-6 text-gray-500">
|
||||
Omnis, illo delectus? Libero, possimus nulla nemo tenetur adipisci repellat dolore eligendi velit doloribus mollitia.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 sm:mt-0">
|
||||
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
|
||||
<!-- Heroicon name: mail -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="mt-5">
|
||||
<h4 class="text-lg leading-6 font-medium text-gray-900">Reminder emails</h4>
|
||||
<p class="mt-2 text-base leading-6 text-gray-500">
|
||||
Veniam necessitatibus reiciendis fugit explicabo dolorem nihil et omnis assumenda odit? Quisquam unde accusantium.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,55 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="py-12 bg-white">
|
||||
<div class="max-w-xl mx-auto px-4 sm:px-6 lg:max-w-screen-xl lg:px-8">
|
||||
<div class="lg:grid lg:grid-cols-3 lg:gap-8">
|
||||
<div>
|
||||
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
|
||||
<!-- Heroicon name: globe-alt -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="mt-5">
|
||||
<h5 class="text-lg leading-6 font-medium text-gray-900">Competitive exchange rates</h5>
|
||||
<p class="mt-2 text-base leading-6 text-gray-500">
|
||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 lg:mt-0">
|
||||
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
|
||||
<!-- Heroicon name: scale -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="mt-5">
|
||||
<h5 class="text-lg leading-6 font-medium text-gray-900">No hidden fees</h5>
|
||||
<p class="mt-2 text-base leading-6 text-gray-500">
|
||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 lg:mt-0">
|
||||
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
|
||||
<!-- Heroicon name: lightning-bolt -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="mt-5">
|
||||
<h5 class="text-lg leading-6 font-medium text-gray-900">Transfers are instant</h5>
|
||||
<p class="mt-2 text-base leading-6 text-gray-500">
|
||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,113 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="bg-white">
|
||||
<div class="max-w-screen-xl mx-auto py-16 px-4 sm:px-6 lg:py-24 lg:px-8">
|
||||
<div class="max-w-3xl mx-auto text-center">
|
||||
<h2 class="text-3xl leading-9 font-extrabold text-gray-900">All-in-one platform</h2>
|
||||
<p class="mt-4 text-lg leading-7 text-gray-500">Ac euismod vel sit maecenas id pellentesque eu sed consectetur. Malesuada adipiscing sagittis vel nulla nec.</p>
|
||||
</div>
|
||||
<dl class="mt-12 space-y-10 sm:space-y-0 sm:grid sm:grid-cols-2 sm:gap-x-6 sm:gap-y-12 lg:grid-cols-4 lg:gap-x-8">
|
||||
<div class="flex space-x-3">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<div class="space-y-2">
|
||||
<dt class="text-lg leading-6 font-medium text-gray-900">Invite team members</dt>
|
||||
<dd class="flex space-x-3 lg:py-0 lg:pb-4">
|
||||
<span class="text-base leading-6 text-gray-500">Tempor tellus in aliquet eu et sit nulla tellus. Suspendisse est, molestie blandit quis ac. Lacus.</span>
|
||||
</dd>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex space-x-3">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<div class="space-y-2">
|
||||
<dt class="text-lg leading-6 font-medium text-gray-900">Notifications</dt>
|
||||
<dd class="flex space-x-3">
|
||||
<span class="text-base leading-6 text-gray-500">Ornare donec rhoncus vitae nisl velit, neque, mauris dictum duis. Nibh urna non parturient.</span>
|
||||
</dd>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex space-x-3">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<div class="space-y-2">
|
||||
<dt class="text-lg leading-6 font-medium text-gray-900">List view</dt>
|
||||
<dd class="flex space-x-3">
|
||||
<span class="text-base leading-6 text-gray-500">Etiam cras augue ornare pretium sit malesuada morbi orci, venenatis. Dictum lacus.</span>
|
||||
</dd>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex space-x-3">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<div class="space-y-2">
|
||||
<dt class="text-lg leading-6 font-medium text-gray-900">Boards</dt>
|
||||
<dd class="flex space-x-3">
|
||||
<span class="text-base leading-6 text-gray-500">Interdum quam pulvinar turpis tortor, egestas quis diam amet, natoque. Mauris sagittis.</span>
|
||||
</dd>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex space-x-3">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<div class="space-y-2">
|
||||
<dt class="text-lg leading-6 font-medium text-gray-900">Keyboard shortcuts</dt>
|
||||
<dd class="flex space-x-3">
|
||||
<span class="text-base leading-6 text-gray-500">Ullamcorper in ipsum ac feugiat. Senectus at aliquam vulputate mollis nec. In at risus odio.</span>
|
||||
</dd>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex space-x-3">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<div class="space-y-2">
|
||||
<dt class="text-lg leading-6 font-medium text-gray-900">Reporting</dt>
|
||||
<dd class="flex space-x-3 lg:border-t-0 lg:py-0 lg:pb-4">
|
||||
<span class="text-base leading-6 text-gray-500">Magna a vel sagittis aliquam eu amet. Et lorem auctor quam nunc odio. Sed bibendum.</span>
|
||||
</dd>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex space-x-3">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<div class="space-y-2">
|
||||
<dt class="text-lg leading-6 font-medium text-gray-900">Calendars</dt>
|
||||
<dd class="flex space-x-3">
|
||||
<span class="text-base leading-6 text-gray-500">Sed mi, dapibus turpis orci posuere integer. A porta viverra posuere adipiscing turpis.</span>
|
||||
</dd>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex space-x-3">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<div class="space-y-2">
|
||||
<dt class="text-lg leading-6 font-medium text-gray-900">Mobile app</dt>
|
||||
<dd class="flex space-x-3">
|
||||
<span class="text-base leading-6 text-gray-500">Quisque sapien nunc nisl eros. Facilisis sagittis maecenas id dignissim tristique proin sed.</span>
|
||||
</dd>
|
||||
</div>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,116 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="bg-white">
|
||||
<div class="max-w-screen-xl mx-auto py-16 px-4 sm:px-6 lg:py-24 lg:px-8 lg:grid lg:grid-cols-3 lg:gap-x-8">
|
||||
<div>
|
||||
<h2 class="text-base leading-6 font-semibold text-indigo-600 uppercase tracking-wide">Everything you need</h2>
|
||||
<p class="mt-2 text-3xl leading-9 font-extrabold text-gray-900">All-in-one platform</p>
|
||||
<p class="mt-4 text-lg leading-7 text-gray-500">Ac euismod vel sit maecenas id pellentesque eu sed consectetur. Malesuada adipiscing sagittis vel nulla nec.</p>
|
||||
</div>
|
||||
<div class="mt-12 lg:mt-0 lg:col-span-2">
|
||||
<dl class="space-y-10 sm:space-y-0 sm:grid sm:grid-cols-2 sm:grid-rows-4 sm:grid-flow-col sm:gap-x-6 sm:gap-y-10 lg:gap-x-8">
|
||||
<div class="flex space-x-3">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<div class="space-y-2">
|
||||
<dt class="text-lg leading-6 font-medium text-gray-900">Invite team members</dt>
|
||||
<dd class="flex space-x-3 lg:py-0 lg:pb-4">
|
||||
<span class="text-base leading-6 text-gray-500">You can manage phone, email and chat conversations all from a single mailbox.</span>
|
||||
</dd>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex space-x-3">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<div class="space-y-2">
|
||||
<dt class="text-lg leading-6 font-medium text-gray-900">List view</dt>
|
||||
<dd class="flex space-x-3">
|
||||
<span class="text-base leading-6 text-gray-500">You can manage phone, email and chat conversations all from a single mailbox.</span>
|
||||
</dd>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex space-x-3">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<div class="space-y-2">
|
||||
<dt class="text-lg leading-6 font-medium text-gray-900">Keyboard shortcuts</dt>
|
||||
<dd class="flex space-x-3">
|
||||
<span class="text-base leading-6 text-gray-500">You can manage phone, email and chat conversations all from a single mailbox.</span>
|
||||
</dd>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex space-x-3">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<div class="space-y-2">
|
||||
<dt class="text-lg leading-6 font-medium text-gray-900">Calendars</dt>
|
||||
<dd class="flex space-x-3">
|
||||
<span class="text-base leading-6 text-gray-500">You can manage phone, email and chat conversations all from a single mailbox.</span>
|
||||
</dd>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex space-x-3">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<div class="space-y-2">
|
||||
<dt class="text-lg leading-6 font-medium text-gray-900">Notifications</dt>
|
||||
<dd class="flex space-x-3">
|
||||
<span class="text-base leading-6 text-gray-500">Find what you need with advanced filters, bulk actions, and quick views.</span>
|
||||
</dd>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex space-x-3">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<div class="space-y-2">
|
||||
<dt class="text-lg leading-6 font-medium text-gray-900">Boards</dt>
|
||||
<dd class="flex space-x-3 lg:border-t-0 lg:py-0 lg:pb-4">
|
||||
<span class="text-base leading-6 text-gray-500">Find what you need with advanced filters, bulk actions, and quick views.</span>
|
||||
</dd>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex space-x-3">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<div class="space-y-2">
|
||||
<dt class="text-lg leading-6 font-medium text-gray-900">Reporting</dt>
|
||||
<dd class="flex space-x-3">
|
||||
<span class="text-base leading-6 text-gray-500">Find what you need with advanced filters, bulk actions, and quick views.</span>
|
||||
</dd>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex space-x-3">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<div class="space-y-2">
|
||||
<dt class="text-lg leading-6 font-medium text-gray-900">Mobile app</dt>
|
||||
<dd class="flex space-x-3">
|
||||
<span class="text-base leading-6 text-gray-500">Find what you need with advanced filters, bulk actions, and quick views.</span>
|
||||
</dd>
|
||||
</div>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,170 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<footer class="bg-white">
|
||||
<div class="max-w-screen-xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
|
||||
<div class="xl:grid xl:grid-cols-3 xl:gap-8">
|
||||
<div class="space-y-8 xl:col-span-1">
|
||||
<img class="h-10" src="https://tailwindui.com/img/logos/v1/workflow-mark-gray-300.svg" alt="Company name" />
|
||||
<p class="text-gray-500 text-base leading-6">
|
||||
Making the world a better place through constructing elegant hierarchies.
|
||||
</p>
|
||||
<div class="flex space-x-6">
|
||||
<a href="#" class="text-gray-400 hover:text-gray-500">
|
||||
<span class="sr-only">Facebook</span>
|
||||
<svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
|
||||
<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" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
|
||||
<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" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
|
||||
<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" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
|
||||
<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" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
|
||||
<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>
|
||||
</div>
|
||||
<div class="mt-12 grid grid-cols-2 gap-8 xl:mt-0 xl:col-span-2">
|
||||
<div class="md:grid md:grid-cols-2 md:gap-8">
|
||||
<div>
|
||||
<h4 class="text-sm leading-5 font-semibold text-gray-400 tracking-wider uppercase">
|
||||
Solutions
|
||||
</h4>
|
||||
<ul class="mt-4 space-y-4">
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
||||
Marketing
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
||||
Analytics
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
||||
Commerce
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
||||
Insights
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-12 md:mt-0">
|
||||
<h4 class="text-sm leading-5 font-semibold text-gray-400 tracking-wider uppercase">
|
||||
Support
|
||||
</h4>
|
||||
<ul class="mt-4 space-y-4">
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
||||
Pricing
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
||||
Documentation
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
||||
Guides
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 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-sm leading-5 font-semibold text-gray-400 tracking-wider uppercase">
|
||||
Company
|
||||
</h4>
|
||||
<ul class="mt-4 space-y-4">
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
||||
About
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
||||
Blog
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
||||
Jobs
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
||||
Press
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
||||
Partners
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-12 md:mt-0">
|
||||
<h4 class="text-sm leading-5 font-semibold text-gray-400 tracking-wider uppercase">
|
||||
Legal
|
||||
</h4>
|
||||
<ul class="mt-4 space-y-4">
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
||||
Claim
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
||||
Privacy
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
||||
Terms
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-12 border-t border-gray-200 pt-8">
|
||||
<p class="text-base leading-6 text-gray-400 xl:text-center">
|
||||
© 2020 Workflow, Inc. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,181 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<footer class="bg-white">
|
||||
<div class="max-w-screen-xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
|
||||
<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-sm leading-5 font-semibold text-gray-400 tracking-wider uppercase">
|
||||
Solutions
|
||||
</h4>
|
||||
<ul class="mt-4 space-y-4">
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
||||
Marketing
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
||||
Analytics
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
||||
Commerce
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
||||
Insights
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-12 md:mt-0">
|
||||
<h4 class="text-sm leading-5 font-semibold text-gray-400 tracking-wider uppercase">
|
||||
Support
|
||||
</h4>
|
||||
<ul class="mt-4 space-y-4">
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
||||
Pricing
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
||||
Documentation
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
||||
Guides
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 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-sm leading-5 font-semibold text-gray-400 tracking-wider uppercase">
|
||||
Company
|
||||
</h4>
|
||||
<ul class="mt-4 space-y-4">
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
||||
About
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
||||
Blog
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
||||
Jobs
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
||||
Press
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
||||
Partners
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-12 md:mt-0">
|
||||
<h4 class="text-sm leading-5 font-semibold text-gray-400 tracking-wider uppercase">
|
||||
Legal
|
||||
</h4>
|
||||
<ul class="mt-4 space-y-4">
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
||||
Claim
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
||||
Privacy
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
||||
Terms
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-8 xl:mt-0">
|
||||
<h4 class="text-sm leading-5 font-semibold text-gray-400 tracking-wider uppercase">
|
||||
Subscribe to our newsletter
|
||||
</h4>
|
||||
<p class="mt-4 text-base leading-6 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="emailAddress" class="sr-only">Email address</label>
|
||||
<input type="email" id="emailAddress" required class="appearance-none min-w-0 w-full bg-white border border-gray-300 rounded-md shadow-sm py-2 px-4 text-base leading-6 text-gray-900 placeholder-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline focus:placeholder-gray-400 transition duration-150 ease-in-out" placeholder="Enter your email" />
|
||||
<div class="mt-3 rounded-md sm:mt-0 sm:ml-3 sm:flex-shrink-0">
|
||||
<button type="submit" class="w-full bg-indigo-600 flex items-center justify-center border border-transparent rounded-md py-2 px-4 text-base leading-6 font-medium text-white hover:bg-indigo-500 focus:outline-none focus:shadow-outline transition duration-150 ease-in-out">
|
||||
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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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 leading-6 text-gray-400 md:mt-0 md:order-1">
|
||||
© 2020 Workflow, Inc. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,229 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<footer class="bg-white">
|
||||
<div class="max-w-screen-xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
|
||||
<div class="pb-8 xl:grid xl:grid-cols-5 xl:gap-8">
|
||||
<div class="grid grid-cols-2 gap-8 xl:col-span-4">
|
||||
<div class="md:grid md:grid-cols-2 md:gap-8">
|
||||
<div>
|
||||
<h4 class="text-sm leading-5 font-semibold text-gray-400 tracking-wider uppercase">
|
||||
Solutions
|
||||
</h4>
|
||||
<ul class="mt-4 space-y-4">
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
||||
Marketing
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
||||
Analytics
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
||||
Commerce
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
||||
Insights
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-12 md:mt-0">
|
||||
<h4 class="text-sm leading-5 font-semibold text-gray-400 tracking-wider uppercase">
|
||||
Support
|
||||
</h4>
|
||||
<ul class="mt-4 space-y-4">
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
||||
Pricing
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
||||
Documentation
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
||||
Guides
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 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-sm leading-5 font-semibold text-gray-400 tracking-wider uppercase">
|
||||
Company
|
||||
</h4>
|
||||
<ul class="mt-4 space-y-4">
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
||||
About
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
||||
Blog
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
||||
Jobs
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
||||
Press
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
||||
Partners
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-12 md:mt-0">
|
||||
<h4 class="text-sm leading-5 font-semibold text-gray-400 tracking-wider uppercase">
|
||||
Legal
|
||||
</h4>
|
||||
<ul class="mt-4 space-y-4">
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
||||
Claim
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
||||
Privacy
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
||||
Terms
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-12 xl:mt-0">
|
||||
<h4 class="text-sm leading-5 font-semibold text-gray-400 tracking-wider uppercase">
|
||||
Language & Currency
|
||||
</h4>
|
||||
<form class="mt-4 space-y-4 sm:max-w-xs">
|
||||
<fieldset class="w-full">
|
||||
<label for="language" class="sr-only">Language</label>
|
||||
<div class="relative">
|
||||
<select id="language" class="appearance-none block w-full bg-white border border-gray-300 rounded-md py-2 pl-3 pr-10 text-base leading-6 text-gray-900 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5">
|
||||
<option selected>English</option>
|
||||
<option>French</option>
|
||||
<option>German</option>
|
||||
<option>Japanese</option>
|
||||
<option>Spanish</option>
|
||||
</select>
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 px-2 flex items-center" aria-hidden="true">
|
||||
<!-- Heroicon name: chevron-down -->
|
||||
<svg class="h-4 w-4 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="w-full">
|
||||
<label for="currency" class="sr-only">Currency</label>
|
||||
<div class="relative">
|
||||
<select id="currency" class="appearance-none block w-full bg-white border border-gray-300 rounded-md py-2 pl-3 pr-10 text-base leading-6 text-gray-900 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5">
|
||||
<option>ARS</option>
|
||||
<option selected>AUD</option>
|
||||
<option>CAD</option>
|
||||
<option>CHF</option>
|
||||
<option>EUR</option>
|
||||
<option>GBP</option>
|
||||
<option>JPY</option>
|
||||
<option>USD</option>
|
||||
</select>
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 px-2 flex items-center" aria-hidden="true">
|
||||
<!-- Heroicon name: chevron-down -->
|
||||
<svg class="h-4 w-4 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-t border-gray-200 pt-8 space-y-4 lg:space-y-0 lg:flex lg:items-center lg:justify-between xl:mt-0">
|
||||
<div class="space-y-2">
|
||||
<h4 class="text-sm leading-5 font-semibold text-gray-400 tracking-wider uppercase">
|
||||
Subscribe to our newsletter
|
||||
</h4>
|
||||
<p class="text-base leading-6 text-gray-500">
|
||||
The latest news, articles, and resources, sent to your inbox weekly.
|
||||
</p>
|
||||
</div>
|
||||
<form class="sm:flex sm:max-w-md">
|
||||
<label for="emailAddress" class="sr-only">Email address</label>
|
||||
<input type="email" id="emailAddress" required class="appearance-none min-w-0 w-full bg-white border border-gray-300 py-2 px-4 text-base leading-6 rounded-md text-gray-900 placeholder-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline focus:placeholder-gray-400 transition duration-150 ease-in-out sm:max-w-xs" placeholder="Enter your email" />
|
||||
<div class="mt-3 rounded-md sm:mt-0 sm:ml-3 sm:flex-shrink-0">
|
||||
<button type="submit" class="w-full bg-indigo-600 border border-transparent rounded-md py-2 px-4 flex items-center justify-center text-base leading-6 font-medium text-white hover:bg-indigo-500 focus:outline-none focus:shadow-outline transition duration-150 ease-in-out">
|
||||
Subscribe
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</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" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
|
||||
<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" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
|
||||
<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" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
|
||||
<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" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
|
||||
<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" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
|
||||
<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 leading-6 text-gray-400 md:mt-0 md:order-1">
|
||||
© 2020 Workflow, Inc. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,229 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<footer class="bg-gray-800">
|
||||
<div class="max-w-screen-xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
|
||||
<div class="pb-8 xl:grid xl:grid-cols-5 xl:gap-8">
|
||||
<div class="grid grid-cols-2 gap-8 xl:col-span-4">
|
||||
<div class="md:grid md:grid-cols-2 md:gap-8">
|
||||
<div>
|
||||
<h4 class="text-sm leading-5 font-semibold text-gray-400 tracking-wider uppercase">
|
||||
Solutions
|
||||
</h4>
|
||||
<ul class="mt-4 space-y-4">
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-300 hover:text-white">
|
||||
Marketing
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-300 hover:text-white">
|
||||
Analytics
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-300 hover:text-white">
|
||||
Commerce
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-300 hover:text-white">
|
||||
Insights
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-12 md:mt-0">
|
||||
<h4 class="text-sm leading-5 font-semibold text-gray-400 tracking-wider uppercase">
|
||||
Support
|
||||
</h4>
|
||||
<ul class="mt-4 space-y-4">
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-300 hover:text-white">
|
||||
Pricing
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-300 hover:text-white">
|
||||
Documentation
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-300 hover:text-white">
|
||||
Guides
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-300 hover:text-white">
|
||||
API Status
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:grid md:grid-cols-2 md:gap-8">
|
||||
<div>
|
||||
<h4 class="text-sm leading-5 font-semibold text-gray-400 tracking-wider uppercase">
|
||||
Company
|
||||
</h4>
|
||||
<ul class="mt-4 space-y-4">
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-300 hover:text-white">
|
||||
About
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-300 hover:text-white">
|
||||
Blog
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-300 hover:text-white">
|
||||
Jobs
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-300 hover:text-white">
|
||||
Press
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-300 hover:text-white">
|
||||
Partners
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-12 md:mt-0">
|
||||
<h4 class="text-sm leading-5 font-semibold text-gray-400 tracking-wider uppercase">
|
||||
Legal
|
||||
</h4>
|
||||
<ul class="mt-4 space-y-4">
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-300 hover:text-white">
|
||||
Claim
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-300 hover:text-white">
|
||||
Privacy
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-300 hover:text-white">
|
||||
Terms
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-12 xl:mt-0">
|
||||
<h4 class="text-sm leading-5 font-semibold text-gray-400 tracking-wider uppercase">
|
||||
Language & Currency
|
||||
</h4>
|
||||
<form class="mt-4 space-y-4 sm:max-w-xs">
|
||||
<fieldset class="w-full">
|
||||
<label for="language" class="sr-only">Language</label>
|
||||
<div class="relative">
|
||||
<select id="language" class="appearance-none block w-full bg-gray-700 border border-transparent rounded-md py-2 pl-3 pr-10 text-base leading-6 text-white focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5">
|
||||
<option selected>English</option>
|
||||
<option>French</option>
|
||||
<option>German</option>
|
||||
<option>Japanese</option>
|
||||
<option>Spanish</option>
|
||||
</select>
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 px-2 flex items-center" aria-hidden="true">
|
||||
<!-- Heroicon name: chevron-down -->
|
||||
<svg class="h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="w-full">
|
||||
<label for="currency" class="sr-only">Currency</label>
|
||||
<div class="mt-1.5 relative">
|
||||
<select id="currency" class="appearance-none w-full bg-gray-700 border border-transparent rounded-md block py-2 pl-3 pr-10 text-base leading-6 text-white focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5">
|
||||
<option>ARS</option>
|
||||
<option selected>AUD</option>
|
||||
<option>CAD</option>
|
||||
<option>CHF</option>
|
||||
<option>EUR</option>
|
||||
<option>GBP</option>
|
||||
<option>JPY</option>
|
||||
<option>USD</option>
|
||||
</select>
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 px-2 flex items-center" aria-hidden="true">
|
||||
<!-- Heroicon name: chevron-down -->
|
||||
<svg class="h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-t border-gray-700 pt-8 space-y-4 lg:space-y-0 lg:flex lg:items-center lg:justify-between xl:mt-0">
|
||||
<div class="space-y-2">
|
||||
<h4 class="text-sm leading-5 font-semibold text-gray-400 tracking-wider uppercase">
|
||||
Subscribe to our newsletter
|
||||
</h4>
|
||||
<p class="text-base leading-6 text-gray-300">
|
||||
The latest news, articles, and resources, sent to your inbox weekly.
|
||||
</p>
|
||||
</div>
|
||||
<form class="sm:flex sm:max-w-md">
|
||||
<label for="emailAddress" class="sr-only">Email address</label>
|
||||
<input type="email" id="emailAddress" required class="appearance-none min-w-0 w-full bg-white border border-transparent rounded-md py-2 px-4 text-base leading-6 text-gray-900 placeholder-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue focus:placeholder-gray-400 transition duration-150 ease-in-out sm:max-w-xs" placeholder="Enter your email" />
|
||||
<div class="mt-3 rounded-md sm:mt-0 sm:ml-3 sm:flex-shrink-0">
|
||||
<button type="submit" class="w-full bg-indigo-500 border border-transparent rounded-md py-2 px-4 flex items-center justify-center text-base leading-6 font-medium text-white hover:bg-indigo-400 focus:outline-none focus:border-indigo-600 focus:shadow-outline-indigo active:bg-indigo-600 transition duration-150 ease-in-out">
|
||||
Subscribe
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="mt-8 border-t border-gray-700 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-300">
|
||||
<span class="sr-only">Facebook</span>
|
||||
<svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
|
||||
<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-300">
|
||||
<span class="sr-only">Instagram</span>
|
||||
<svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
|
||||
<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-300">
|
||||
<span class="sr-only">Twitter</span>
|
||||
<svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
|
||||
<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-300">
|
||||
<span class="sr-only">GitHub</span>
|
||||
<svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
|
||||
<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-300">
|
||||
<span class="sr-only">Dribbble</span>
|
||||
<svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
|
||||
<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 leading-6 text-gray-400 md:mt-0 md:order-1">
|
||||
© 2020 Workflow, Inc. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,181 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<footer class="bg-gray-800">
|
||||
<div class="max-w-screen-xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
|
||||
<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-sm leading-5 font-semibold text-gray-400 tracking-wider uppercase">
|
||||
Solutions
|
||||
</h4>
|
||||
<ul class="mt-4 space-y-4">
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-300 hover:text-white">
|
||||
Marketing
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-300 hover:text-white">
|
||||
Analytics
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-300 hover:text-white">
|
||||
Commerce
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-300 hover:text-white">
|
||||
Insights
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-12 md:mt-0">
|
||||
<h4 class="text-sm leading-5 font-semibold text-gray-400 tracking-wider uppercase">
|
||||
Support
|
||||
</h4>
|
||||
<ul class="mt-4 space-y-4">
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-300 hover:text-white">
|
||||
Pricing
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-300 hover:text-white">
|
||||
Documentation
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-300 hover:text-white">
|
||||
Guides
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-300 hover:text-white">
|
||||
API Status
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:grid md:grid-cols-2 md:gap-8">
|
||||
<div>
|
||||
<h4 class="text-sm leading-5 font-semibold text-gray-400 tracking-wider uppercase">
|
||||
Company
|
||||
</h4>
|
||||
<ul class="mt-4 space-y-4">
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-300 hover:text-white">
|
||||
About
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-300 hover:text-white">
|
||||
Blog
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-300 hover:text-white">
|
||||
Jobs
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-300 hover:text-white">
|
||||
Press
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-300 hover:text-white">
|
||||
Partners
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-12 md:mt-0">
|
||||
<h4 class="text-sm leading-5 font-semibold text-gray-400 tracking-wider uppercase">
|
||||
Legal
|
||||
</h4>
|
||||
<ul class="mt-4 space-y-4">
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-300 hover:text-white">
|
||||
Claim
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-300 hover:text-white">
|
||||
Privacy
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-base leading-6 text-gray-300 hover:text-white">
|
||||
Terms
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-8 xl:mt-0">
|
||||
<h4 class="text-sm leading-5 font-semibold text-gray-400 tracking-wider uppercase">
|
||||
Subscribe to our newsletter
|
||||
</h4>
|
||||
<p class="mt-4 text-base leading-6 text-gray-300">
|
||||
The latest news, articles, and resources, sent to your inbox weekly.
|
||||
</p>
|
||||
<form class="mt-4 sm:flex sm:max-w-md">
|
||||
<label for="emailAddress" class="sr-only">Email address</label>
|
||||
<input type="email" id="emailAddress" required class="appearance-none min-w-0 w-full bg-white border border-transparent rounded-md py-2 px-4 text-base leading-6 text-gray-900 placeholder-gray-500 focus:outline-none focus:shadow-outline-gray focus:placeholder-gray-400 transition duration-150 ease-in-out" placeholder="Enter your email" />
|
||||
<div class="mt-3 rounded-md sm:mt-0 sm:ml-3 sm:flex-shrink-0">
|
||||
<button type="submit" class="w-full bg-indigo-500 border border-transparent rounded-md py-2 px-4 flex items-center justify-center text-base leading-6 font-medium text-white hover:bg-indigo-400 focus:outline-none focus:border-indigo-600 focus:shadow-outline-indigo active:bg-indigo-600 transition duration-150 ease-in-out">
|
||||
Subscribe
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-8 border-t border-gray-700 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-300">
|
||||
<span class="sr-only">Facebook</span>
|
||||
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<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-300">
|
||||
<span class="sr-only">Instagram</span>
|
||||
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<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-300">
|
||||
<span class="sr-only">Twitter</span>
|
||||
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<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-300">
|
||||
<span class="sr-only">GitHub</span>
|
||||
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<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-300">
|
||||
<span class="sr-only">Dribbble</span>
|
||||
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<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 leading-6 text-gray-400 md:mt-0 md:order-1">
|
||||
© 2020 Workflow, Inc. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
484
tailwindui/components/marketing/sections/footers/index.html
Normal file
484
tailwindui/components/marketing/sections/footers/index.html
Normal file
@@ -0,0 +1,484 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Tailwind UI Components</title>
|
||||
<link href="https://fonts.googleapis.com/css?family=Inter&display=swap" rel="stylesheet"/>
|
||||
<link href="https://cdn.jsdelivr.net/npm/@tailwindcss/ui@latest/dist/tailwind-ui.min.css" rel="stylesheet"/>
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.0.1/dist/alpine.js" defer></script>
|
||||
<link href="https://cdn.jsdelivr.net/npm/highlightjs-themes@1.0.0/darkula.css" rel="stylesheet"/>
|
||||
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/highlight.min.js"></script>
|
||||
<style>
|
||||
* { box-sizing: border-box; }
|
||||
.font-sans { font-family: "Inter", sans-serif; }
|
||||
.hljs {
|
||||
background: #252f3f;
|
||||
color: white;
|
||||
}
|
||||
.hljs-tag {
|
||||
color: white;
|
||||
}
|
||||
.hljs-name {
|
||||
color: #ff8383;
|
||||
}
|
||||
.hljs-attr {
|
||||
color: #ffe484;
|
||||
font-style: italic;
|
||||
}
|
||||
.hljs-string {
|
||||
color: #b5f4a5;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="font-sans antialiased text-gray-900">
|
||||
<main>
|
||||
<div class="py-4 sm:py-12">
|
||||
<div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="pb-2">
|
||||
<nav class="flex items-center text-sm leading-5 font-medium">
|
||||
<a href="/#marketing" class="text-gray-500 hover:text-gray-700 focus:outline-none focus:underline transition duration-150 ease-in-out">
|
||||
Marketing
|
||||
</a>
|
||||
<svg class="flex-shrink-0 mx-2 h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<a href="/#marketing-page-sections" class="text-gray-500 hover:text-gray-700 focus:outline-none focus:underline transition duration-150 ease-in-out">
|
||||
Page Sections
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
<h2 class="text-2xl leading-8 font-semibold font-display text-gray-900 sm:text-3xl sm:leading-9">
|
||||
Footers
|
||||
</h2>
|
||||
</div>
|
||||
<div class="mt-6 bg-white max-w-8xl mx-auto sm:px-6 lg:px-8">
|
||||
<div class="max-w-8xl mx-auto">
|
||||
|
||||
<div id="component-fe711630ebc8e81ddde9ec304b4a152707971e95" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-fe711630ebc8e81ddde9ec304b4a152707971e95">4-column with company mission</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/footers/4_column_with_company_mission.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-a8ef86021bc9ebb4bb8c060f18b8c536a79e8f1c" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-a8ef86021bc9ebb4bb8c060f18b8c536a79e8f1c">4-column with newsletter and localization dark</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/footers/4_column_with_newsletter_and_localization_dark.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-71bb3301a3241f81337525be85830a5633982c38" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-71bb3301a3241f81337525be85830a5633982c38">4-column with newsletter and localization</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/footers/4_column_with_newsletter_and_localization.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-a642d86fb276446ade70a9e3c75351c6d8eac9e4" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-a642d86fb276446ade70a9e3c75351c6d8eac9e4">4-column with newsletter dark</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/footers/4_column_with_newsletter_dark.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-21330edb356f12e9937c34d721c1fbac1c58161e" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-21330edb356f12e9937c34d721c1fbac1c58161e">4-column with newsletter</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/footers/4_column_with_newsletter.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-1e08310506ae6bcb1f09fc7236f001d0b2de9cf3" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-1e08310506ae6bcb1f09fc7236f001d0b2de9cf3">Simple centered</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/footers/simple_centered.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-634d18c8a5a14ffea8d04963e2daefa1cc96b27f" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-634d18c8a5a14ffea8d04963e2daefa1cc96b27f">Social links only</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/footers/social_links_only.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
(function() {
|
||||
const getDocHeight = doc => {
|
||||
doc = doc || document;
|
||||
const body = doc.body;
|
||||
const html = doc.documentElement;
|
||||
const height = Math.max(
|
||||
body.scrollHeight,
|
||||
body.offsetHeight,
|
||||
html.clientHeight,
|
||||
html.scrollHeight,
|
||||
html.offsetHeight
|
||||
);
|
||||
return height;
|
||||
};
|
||||
|
||||
window.resizableIFrame = function() {
|
||||
return {
|
||||
resizing: !1,
|
||||
width: "100%",
|
||||
init: function() {}
|
||||
};
|
||||
};
|
||||
const iframes = document.querySelectorAll("iframe");
|
||||
Array.from(iframes).forEach(iframe => {
|
||||
iframe.addEventListener("load", e => {
|
||||
const iframe = e.srcElement;
|
||||
const doc = iframe.contentDocument || iframe.contentWindow.document;
|
||||
doc.body.classList.add("antialiased", "font-sans", "bg-white")
|
||||
iframe.style.visibility = "hidden";
|
||||
iframe.style.height = "10px";
|
||||
const height = Math.max(getDocHeight(doc), 256) + "px";
|
||||
iframe.style.height = height;
|
||||
iframe.style.visibility = "visible";
|
||||
|
||||
const html = doc.body.innerHTML.trim();
|
||||
const container = iframe.parentElement.parentElement.parentElement;
|
||||
hljs.configure({useBR: false, tabReplace: ' '});
|
||||
const highlighted = hljs.highlight('html', html);
|
||||
const codeElem = container.children[1].querySelector("code");
|
||||
codeElem.innerHTML = highlighted.value;
|
||||
});
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,78 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<footer class="bg-white">
|
||||
<div class="max-w-screen-xl mx-auto py-12 px-4 overflow-hidden space-y-8 sm:px-6 lg:px-8">
|
||||
<nav class="-mx-5 -my-2 flex flex-wrap justify-center">
|
||||
<div class="px-5 py-2">
|
||||
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
||||
About
|
||||
</a>
|
||||
</div>
|
||||
<div class="px-5 py-2">
|
||||
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
||||
Blog
|
||||
</a>
|
||||
</div>
|
||||
<div class="px-5 py-2">
|
||||
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
||||
Jobs
|
||||
</a>
|
||||
</div>
|
||||
<div class="px-5 py-2">
|
||||
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
||||
Press
|
||||
</a>
|
||||
</div>
|
||||
<div class="px-5 py-2">
|
||||
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
||||
Accessibility
|
||||
</a>
|
||||
</div>
|
||||
<div class="px-5 py-2">
|
||||
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
|
||||
Partners
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="mt-8 flex justify-center space-x-6">
|
||||
<a href="#" class="text-gray-400 hover:text-gray-500">
|
||||
<span class="sr-only">Facebook</span>
|
||||
<svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
|
||||
<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" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
|
||||
<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" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
|
||||
<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" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
|
||||
<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" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
|
||||
<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-center text-base leading-6 text-gray-400">
|
||||
© 2020 Workflow, Inc. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,48 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<footer class="bg-white">
|
||||
<div class="max-w-screen-xl mx-auto py-12 px-4 sm:px-6 md:flex md:items-center md:justify-between lg:px-8">
|
||||
<div class="flex justify-center 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" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
|
||||
<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" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
|
||||
<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" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
|
||||
<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" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
|
||||
<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" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
|
||||
<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>
|
||||
<div class="mt-8 md:mt-0 md:order-1">
|
||||
<p class="text-center text-base leading-6 text-gray-400">
|
||||
© 2020 Workflow, Inc. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
268
tailwindui/components/marketing/sections/header/index.html
Normal file
268
tailwindui/components/marketing/sections/header/index.html
Normal file
@@ -0,0 +1,268 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Tailwind UI Components</title>
|
||||
<link href="https://fonts.googleapis.com/css?family=Inter&display=swap" rel="stylesheet"/>
|
||||
<link href="https://cdn.jsdelivr.net/npm/@tailwindcss/ui@latest/dist/tailwind-ui.min.css" rel="stylesheet"/>
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.0.1/dist/alpine.js" defer></script>
|
||||
<link href="https://cdn.jsdelivr.net/npm/highlightjs-themes@1.0.0/darkula.css" rel="stylesheet"/>
|
||||
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/highlight.min.js"></script>
|
||||
<style>
|
||||
* { box-sizing: border-box; }
|
||||
.font-sans { font-family: "Inter", sans-serif; }
|
||||
.hljs {
|
||||
background: #252f3f;
|
||||
color: white;
|
||||
}
|
||||
.hljs-tag {
|
||||
color: white;
|
||||
}
|
||||
.hljs-name {
|
||||
color: #ff8383;
|
||||
}
|
||||
.hljs-attr {
|
||||
color: #ffe484;
|
||||
font-style: italic;
|
||||
}
|
||||
.hljs-string {
|
||||
color: #b5f4a5;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="font-sans antialiased text-gray-900">
|
||||
<main>
|
||||
<div class="py-4 sm:py-12">
|
||||
<div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="pb-2">
|
||||
<nav class="flex items-center text-sm leading-5 font-medium">
|
||||
<a href="/#marketing" class="text-gray-500 hover:text-gray-700 focus:outline-none focus:underline transition duration-150 ease-in-out">
|
||||
Marketing
|
||||
</a>
|
||||
<svg class="flex-shrink-0 mx-2 h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<a href="/#marketing-page-sections" class="text-gray-500 hover:text-gray-700 focus:outline-none focus:underline transition duration-150 ease-in-out">
|
||||
Page Sections
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
<h2 class="text-2xl leading-8 font-semibold font-display text-gray-900 sm:text-3xl sm:leading-9">
|
||||
Header Sections
|
||||
</h2>
|
||||
</div>
|
||||
<div class="mt-6 bg-white max-w-8xl mx-auto sm:px-6 lg:px-8">
|
||||
<div class="max-w-8xl mx-auto">
|
||||
|
||||
<div id="component-69ea4757966240550dc90062e398a114032cfd0b" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-69ea4757966240550dc90062e398a114032cfd0b">Simple centered</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/header/simple_centered.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-2a6656353e55ec2a04463577dd47846f3c273e86" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-2a6656353e55ec2a04463577dd47846f3c273e86">Simple with select menu dark</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/header/simple_with_select_menu_dark.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-99ee9cc4cdda7066637d6bedb6be8eecac9a5a0f" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-99ee9cc4cdda7066637d6bedb6be8eecac9a5a0f">Simple with select menu</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/header/simple_with_select_menu.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
(function() {
|
||||
const getDocHeight = doc => {
|
||||
doc = doc || document;
|
||||
const body = doc.body;
|
||||
const html = doc.documentElement;
|
||||
const height = Math.max(
|
||||
body.scrollHeight,
|
||||
body.offsetHeight,
|
||||
html.clientHeight,
|
||||
html.scrollHeight,
|
||||
html.offsetHeight
|
||||
);
|
||||
return height;
|
||||
};
|
||||
|
||||
window.resizableIFrame = function() {
|
||||
return {
|
||||
resizing: !1,
|
||||
width: "100%",
|
||||
init: function() {}
|
||||
};
|
||||
};
|
||||
const iframes = document.querySelectorAll("iframe");
|
||||
Array.from(iframes).forEach(iframe => {
|
||||
iframe.addEventListener("load", e => {
|
||||
const iframe = e.srcElement;
|
||||
const doc = iframe.contentDocument || iframe.contentWindow.document;
|
||||
doc.body.classList.add("antialiased", "font-sans", "bg-white")
|
||||
iframe.style.visibility = "hidden";
|
||||
iframe.style.height = "10px";
|
||||
const height = Math.max(getDocHeight(doc), 256) + "px";
|
||||
iframe.style.height = height;
|
||||
iframe.style.visibility = "visible";
|
||||
|
||||
const html = doc.body.innerHTML.trim();
|
||||
const container = iframe.parentElement.parentElement.parentElement;
|
||||
hljs.configure({useBR: false, tabReplace: ' '});
|
||||
const highlighted = hljs.highlight('html', html);
|
||||
const codeElem = container.children[1].querySelector("code");
|
||||
codeElem.innerHTML = highlighted.value;
|
||||
});
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,16 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="bg-white">
|
||||
<div class="max-w-screen-xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
|
||||
<div class="text-center">
|
||||
<h1 class="text-base leading-6 font-semibold text-indigo-600 tracking-wide uppercase">Pricing</h1>
|
||||
<p class="mt-1 text-4xl leading-10 font-extrabold text-gray-900 sm:text-5xl sm:leading-none sm:tracking-tight lg:text-6xl">Take control of your team.</p>
|
||||
<p class="max-w-xl mt-5 mx-auto text-xl leading-7 text-gray-500">Start building for free, then add a site plan to go live. Account plans unlock additional features.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,37 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="bg-white">
|
||||
<div class="max-w-screen-xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8 lg:flex lg:justify-between">
|
||||
<div class="max-w-xl">
|
||||
<h2 class="text-4xl leading-10 font-extrabold text-gray-900 sm:text-5xl sm:leading-none sm:tracking-tight lg:text-6xl">Pricing Plans</h2>
|
||||
<p class="mt-5 text-xl leading-7 text-gray-500">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">
|
||||
<label for="currency" class="block text-base leading-6 font-medium text-gray-500">Currency</label>
|
||||
<div class="mt-1.5 relative">
|
||||
<select id="currency" class="appearance-none block w-full bg-white border border-gray-300 rounded-md pl-3 pr-10 py-2 text-base leading-6 text-gray-900 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5">
|
||||
<option>Argentina (ARS)</option>
|
||||
<option>Australia (AUD)</option>
|
||||
<option selected>United States (USD)</option>
|
||||
<option>Canada (CAD)</option>
|
||||
<option>France (EUR)</option>
|
||||
<option>Japan (JPY)</option>
|
||||
<option>Nigeria (NGN)</option>
|
||||
<option>Switzerland (CHF)</option>
|
||||
<option>United Kingdom (GBP)</option>
|
||||
</select>
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 px-2 flex items-center" aria-hidden="true">
|
||||
<!-- Heroicon name: chevron-down -->
|
||||
<svg class="h-4 w-4 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,37 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="bg-gray-800">
|
||||
<div class="max-w-screen-xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8 lg:flex lg:justify-between">
|
||||
<div class="max-w-xl">
|
||||
<h2 class="text-4xl leading-10 font-extrabold text-white sm:text-5xl sm:leading-none sm:tracking-tight lg:text-6xl">Pricing Plans</h2>
|
||||
<p class="mt-5 text-xl leading-7 text-gray-400">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">
|
||||
<label for="currency" class="block text-base leading-6 font-medium text-gray-300">Currency</label>
|
||||
<div class="mt-1.5 relative">
|
||||
<select id="currency" class="appearance-none block w-full bg-gray-700 border border-transparent rounded-md pl-3 pr-10 py-2 text-base leading-6 text-white focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5">
|
||||
<option>Argentina (ARS)</option>
|
||||
<option>Australia (AUD)</option>
|
||||
<option selected>United States (USD)</option>
|
||||
<option>Canada (CAD)</option>
|
||||
<option>France (EUR)</option>
|
||||
<option>Japan (JPY)</option>
|
||||
<option>Nigeria (NGN)</option>
|
||||
<option>Switzerland (CHF)</option>
|
||||
<option>United Kingdom (GBP)</option>
|
||||
</select>
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 px-2 flex items-center" aria-hidden="true">
|
||||
<!-- Heroicon name: chevron-down -->
|
||||
<svg class="h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
430
tailwindui/components/marketing/sections/heroes/index.html
Normal file
430
tailwindui/components/marketing/sections/heroes/index.html
Normal file
@@ -0,0 +1,430 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Tailwind UI Components</title>
|
||||
<link href="https://fonts.googleapis.com/css?family=Inter&display=swap" rel="stylesheet"/>
|
||||
<link href="https://cdn.jsdelivr.net/npm/@tailwindcss/ui@latest/dist/tailwind-ui.min.css" rel="stylesheet"/>
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.0.1/dist/alpine.js" defer></script>
|
||||
<link href="https://cdn.jsdelivr.net/npm/highlightjs-themes@1.0.0/darkula.css" rel="stylesheet"/>
|
||||
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/highlight.min.js"></script>
|
||||
<style>
|
||||
* { box-sizing: border-box; }
|
||||
.font-sans { font-family: "Inter", sans-serif; }
|
||||
.hljs {
|
||||
background: #252f3f;
|
||||
color: white;
|
||||
}
|
||||
.hljs-tag {
|
||||
color: white;
|
||||
}
|
||||
.hljs-name {
|
||||
color: #ff8383;
|
||||
}
|
||||
.hljs-attr {
|
||||
color: #ffe484;
|
||||
font-style: italic;
|
||||
}
|
||||
.hljs-string {
|
||||
color: #b5f4a5;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="font-sans antialiased text-gray-900">
|
||||
<main>
|
||||
<div class="py-4 sm:py-12">
|
||||
<div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="pb-2">
|
||||
<nav class="flex items-center text-sm leading-5 font-medium">
|
||||
<a href="/#marketing" class="text-gray-500 hover:text-gray-700 focus:outline-none focus:underline transition duration-150 ease-in-out">
|
||||
Marketing
|
||||
</a>
|
||||
<svg class="flex-shrink-0 mx-2 h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<a href="/#marketing-page-sections" class="text-gray-500 hover:text-gray-700 focus:outline-none focus:underline transition duration-150 ease-in-out">
|
||||
Page Sections
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
<h2 class="text-2xl leading-8 font-semibold font-display text-gray-900 sm:text-3xl sm:leading-9">
|
||||
Hero Sections
|
||||
</h2>
|
||||
</div>
|
||||
<div class="mt-6 bg-white max-w-8xl mx-auto sm:px-6 lg:px-8">
|
||||
<div class="max-w-8xl mx-auto">
|
||||
|
||||
<div id="component-e1b334db76a993f05dc3b8be547d9cb630b2b1c5" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-e1b334db76a993f05dc3b8be547d9cb630b2b1c5">Simple centered</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/heroes/simple_centered.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-0a2fcfd2a3be6e38d6acbd26b68adde1509679c5" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-0a2fcfd2a3be6e38d6acbd26b68adde1509679c5">Split with navbar</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/heroes/split_with_navbar.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-af4ae52875fc7e70d8ce45f0d51a0b1de97f7539" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-af4ae52875fc7e70d8ce45f0d51a0b1de97f7539">With angled image on right</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/heroes/with_angled_image_on_right.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-3ba19976ba16632ab9c1739740991cd930cea7d8" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-3ba19976ba16632ab9c1739740991cd930cea7d8">With app screenshot</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/heroes/with_app_screenshot.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-6b2b782d99add57f51c7093282bad79f1e14f533" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-6b2b782d99add57f51c7093282bad79f1e14f533">With sign-in form</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/heroes/with_sign_in_form.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-716eca59bd1b36b9dedcd828fd85c8b0dbe089b5" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-716eca59bd1b36b9dedcd828fd85c8b0dbe089b5">With sign up and media content</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/heroes/with_sign_up_and_media_content.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
(function() {
|
||||
const getDocHeight = doc => {
|
||||
doc = doc || document;
|
||||
const body = doc.body;
|
||||
const html = doc.documentElement;
|
||||
const height = Math.max(
|
||||
body.scrollHeight,
|
||||
body.offsetHeight,
|
||||
html.clientHeight,
|
||||
html.scrollHeight,
|
||||
html.offsetHeight
|
||||
);
|
||||
return height;
|
||||
};
|
||||
|
||||
window.resizableIFrame = function() {
|
||||
return {
|
||||
resizing: !1,
|
||||
width: "100%",
|
||||
init: function() {}
|
||||
};
|
||||
};
|
||||
const iframes = document.querySelectorAll("iframe");
|
||||
Array.from(iframes).forEach(iframe => {
|
||||
iframe.addEventListener("load", e => {
|
||||
const iframe = e.srcElement;
|
||||
const doc = iframe.contentDocument || iframe.contentWindow.document;
|
||||
doc.body.classList.add("antialiased", "font-sans", "bg-white")
|
||||
iframe.style.visibility = "hidden";
|
||||
iframe.style.height = "10px";
|
||||
const height = Math.max(getDocHeight(doc), 256) + "px";
|
||||
iframe.style.height = height;
|
||||
iframe.style.visibility = "visible";
|
||||
|
||||
const html = doc.body.innerHTML.trim();
|
||||
const container = iframe.parentElement.parentElement.parentElement;
|
||||
hljs.configure({useBR: false, tabReplace: ' '});
|
||||
const highlighted = hljs.highlight('html', html);
|
||||
const codeElem = container.children[1].querySelector("code");
|
||||
codeElem.innerHTML = highlighted.value;
|
||||
});
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,128 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="relative bg-gray-50 overflow-hidden">
|
||||
<div class="hidden sm:block sm:absolute sm:inset-y-0 sm:h-full sm:w-full">
|
||||
<div class="relative h-full max-w-screen-xl mx-auto">
|
||||
<svg class="absolute right-full transform translate-y-1/4 translate-x-1/4 lg:translate-x-1/2" width="404" height="784" fill="none" viewBox="0 0 404 784">
|
||||
<defs>
|
||||
<pattern id="f210dbf6-a58d-4871-961e-36d5016a0f49" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
|
||||
<rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="404" height="784" fill="url(#f210dbf6-a58d-4871-961e-36d5016a0f49)" />
|
||||
</svg>
|
||||
<svg class="absolute left-full transform -translate-y-3/4 -translate-x-1/4 md:-translate-y-1/2 lg:-translate-x-1/2" width="404" height="784" fill="none" viewBox="0 0 404 784">
|
||||
<defs>
|
||||
<pattern id="5d0dd344-b041-4d26-bec4-8d33ea57ec9b" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
|
||||
<rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="404" height="784" fill="url(#5d0dd344-b041-4d26-bec4-8d33ea57ec9b)" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative pt-6 pb-12 sm:pb-16 md:pb-20 lg:pb-28 xl:pb-32">
|
||||
<div class="max-w-screen-xl mx-auto px-4 sm:px-6">
|
||||
<nav class="relative flex items-center justify-between sm:h-10 md:justify-center">
|
||||
<div class="flex items-center flex-1 md:absolute md:inset-y-0 md:left-0">
|
||||
<div class="flex items-center justify-between w-full md:w-auto">
|
||||
<a href="#" aria-label="Home">
|
||||
<img class="h-8 w-auto sm:h-10" src="https://tailwindui.com/img/logos/v1/workflow-mark-on-white.svg" alt="Logo" />
|
||||
</a>
|
||||
<div class="-mr-2 flex items-center md:hidden">
|
||||
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out" id="main-menu" aria-label="Main menu" aria-haspopup="true">
|
||||
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden md:flex md:space-x-10">
|
||||
<a href="#" class="font-medium text-gray-500 hover:text-gray-900 transition duration-150 ease-in-out">Product</a>
|
||||
<a href="#" class="font-medium text-gray-500 hover:text-gray-900 transition duration-150 ease-in-out">Features</a>
|
||||
<a href="#" class="font-medium text-gray-500 hover:text-gray-900 transition duration-150 ease-in-out">Marketplace</a>
|
||||
<a href="#" class="font-medium text-gray-500 hover:text-gray-900 transition duration-150 ease-in-out">Company</a>
|
||||
</div>
|
||||
<div class="hidden md:absolute md:flex md:items-center md:justify-end md:inset-y-0 md:right-0">
|
||||
<span class="inline-flex rounded-md shadow">
|
||||
<a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-base leading-6 font-medium rounded-md text-indigo-600 bg-white hover:text-indigo-500 focus:outline-none focus:border-indigo-300 focus:shadow-outline-indigo active:bg-gray-50 active:text-indigo-700 transition duration-150 ease-in-out">
|
||||
Log in
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
Mobile menu, show/hide based on menu open state.
|
||||
|
||||
Entering: "duration-150 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 top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden">
|
||||
<div class="rounded-lg shadow-md">
|
||||
<div class="rounded-lg bg-white shadow-xs overflow-hidden" role="menu" aria-orientation="vertical" aria-labelledby="main-menu">
|
||||
<div class="px-5 pt-4 flex items-center justify-between">
|
||||
<div>
|
||||
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/v1/workflow-mark-on-white.svg" alt="" />
|
||||
</div>
|
||||
<div class="-mr-2">
|
||||
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out" aria-label="Close menu">
|
||||
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-2 pt-2 pb-3">
|
||||
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition duration-150 ease-in-out" role="menuitem">Product</a>
|
||||
<a href="#" class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition duration-150 ease-in-out" role="menuitem">Features</a>
|
||||
<a href="#" class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition duration-150 ease-in-out" role="menuitem">Marketplace</a>
|
||||
<a href="#" class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition duration-150 ease-in-out" role="menuitem">Company</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#" class="block w-full px-5 py-3 text-center font-medium text-indigo-600 bg-gray-50 hover:bg-gray-100 hover:text-indigo-700 focus:outline-none focus:bg-gray-100 focus:text-indigo-700 transition duration-150 ease-in-out" role="menuitem">
|
||||
Log in
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main class="mt-10 mx-auto max-w-screen-xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 xl:mt-28">
|
||||
<div class="text-center">
|
||||
<h2 class="text-4xl tracking-tight leading-10 font-extrabold text-gray-900 sm:text-5xl sm:leading-none md:text-6xl">
|
||||
Data to enrich your
|
||||
<br class="xl:hidden" />
|
||||
<span class="text-indigo-600">online business</span>
|
||||
</h2>
|
||||
<p class="mt-3 max-w-md mx-auto text-base text-gray-500 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
|
||||
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.
|
||||
</p>
|
||||
<div class="mt-5 max-w-md mx-auto sm:flex sm:justify-center md:mt-8">
|
||||
<div class="rounded-md shadow">
|
||||
<a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo transition duration-150 ease-in-out md:py-4 md:text-lg md:px-10">
|
||||
Get started
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
|
||||
<a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-indigo-600 bg-white hover:text-indigo-500 focus:outline-none focus:border-indigo-300 focus:shadow-outline-indigo transition duration-150 ease-in-out md:py-4 md:text-lg md:px-10">
|
||||
Live demo
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,204 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="relative bg-gray-50">
|
||||
<div class="relative bg-white shadow">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6">
|
||||
<div class="flex justify-between items-center py-6 md:justify-start md:space-x-10">
|
||||
<div class="w-0 flex-1 flex">
|
||||
<a href="#" class="inline-flex">
|
||||
<img class="h-8 w-auto sm:h-10" src="https://tailwindui.com/img/logos/v1/workflow-mark-on-white.svg" alt="Workflow" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="-mr-2 -my-2 md:hidden">
|
||||
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
|
||||
<!-- Heroicon name: menu -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<nav class="hidden md:flex space-x-10">
|
||||
<a href="#" class="text-gray-500 inline-flex items-center space-x-2 text-base leading-6 font-medium hover:text-gray-900 transition ease-in-out duration-150">
|
||||
Solutions
|
||||
</a>
|
||||
<a href="#" class="text-base leading-6 font-medium text-gray-500 hover:text-gray-900 transition ease-in-out duration-150">
|
||||
Pricing
|
||||
</a>
|
||||
<a href="#" class="text-base leading-6 font-medium text-gray-500 hover:text-gray-900 transition ease-in-out duration-150">
|
||||
Docs
|
||||
</a>
|
||||
<a href="#" class="text-gray-500 inline-flex items-center space-x-2 text-base leading-6 font-medium hover:text-gray-900 transition ease-in-out duration-150">
|
||||
More
|
||||
</a>
|
||||
</nav>
|
||||
<div class="hidden md:flex items-center justify-end space-x-8 md:flex-1 lg:w-0">
|
||||
<a href="#" class="whitespace-no-wrap text-base leading-6 font-medium text-gray-500 hover:text-gray-900 transition ease-in-out duration-150">
|
||||
Sign in
|
||||
</a>
|
||||
<span class="inline-flex rounded-md shadow-sm">
|
||||
<a href="#" class="whitespace-no-wrap inline-flex items-center justify-center px-4 py-2 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition ease-in-out duration-150">
|
||||
Sign up
|
||||
</a>
|
||||
</span>
|
||||
</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 top-0 inset-x-0 z-10 p-2 transition transform origin-top-right md:hidden">
|
||||
<div class="rounded-lg shadow-lg">
|
||||
<div class="rounded-lg shadow-xs bg-white divide-y-2 divide-gray-50">
|
||||
<div class="pt-5 pb-6 px-5 space-y-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/v1/workflow-mark-on-white.svg" alt="Workflow" />
|
||||
</div>
|
||||
<div class="-mr-2">
|
||||
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
|
||||
<!-- Heroicon name: x -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<nav class="grid gap-y-8">
|
||||
<a href="#" class="-m-3 p-3 flex items-center space-x-3 rounded-md hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: chart-bar -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||
</svg>
|
||||
<div class="text-base leading-6 font-medium text-gray-900">
|
||||
Analytics
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 flex items-center space-x-3 rounded-md hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: cursor-click -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122" />
|
||||
</svg>
|
||||
<div class="text-base leading-6 font-medium text-gray-900">
|
||||
Engagement
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 flex items-center space-x-3 rounded-md hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: shield-check -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
<div class="text-base leading-6 font-medium text-gray-900">
|
||||
Security
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 flex items-center space-x-3 rounded-md hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: view-grid -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
|
||||
</svg>
|
||||
<div class="text-base leading-6 font-medium text-gray-900">
|
||||
Integrations
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 p-3 flex items-center space-x-3 rounded-md hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<!-- Heroicon name: refresh -->
|
||||
<svg class="flex-shrink-0 h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||
</svg>
|
||||
<div class="text-base leading-6 font-medium text-gray-900">
|
||||
Automations
|
||||
</div>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="py-6 px-5 space-y-6">
|
||||
<div class="grid grid-cols-2 gap-y-4 gap-x-8">
|
||||
<a href="#" class="text-base leading-6 font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
|
||||
Pricing
|
||||
</a>
|
||||
<a href="#" class="text-base leading-6 font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
|
||||
Docs
|
||||
</a>
|
||||
<a href="#" class="text-base leading-6 font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
|
||||
Enterprise
|
||||
</a>
|
||||
<a href="#" class="text-base leading-6 font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
|
||||
Blog
|
||||
</a>
|
||||
<a href="#" class="text-base leading-6 font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
|
||||
Help Center
|
||||
</a>
|
||||
<a href="#" class="text-base leading-6 font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
|
||||
Guides
|
||||
</a>
|
||||
<a href="#" class="text-base leading-6 font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
|
||||
Security
|
||||
</a>
|
||||
<a href="#" class="text-base leading-6 font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
|
||||
Events
|
||||
</a>
|
||||
</div>
|
||||
<div class="space-y-6">
|
||||
<span class="w-full flex rounded-md shadow-sm">
|
||||
<a href="#" class="w-full flex items-center justify-center px-4 py-2 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition ease-in-out duration-150">
|
||||
Sign up
|
||||
</a>
|
||||
</span>
|
||||
<p class="text-center text-base leading-6 font-medium text-gray-500">
|
||||
Existing customer?
|
||||
<a href="#" class="text-indigo-600 hover:text-indigo-500 transition ease-in-out duration-150">
|
||||
Sign in
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main class="lg:relative">
|
||||
<div class="mx-auto max-w-7xl w-full pt-16 pb-20 text-center lg:py-48 lg:text-left">
|
||||
<div class="px-4 lg:w-1/2 sm:px-8 xl:pr-16">
|
||||
<h2 class="text-4xl tracking-tight leading-10 font-extrabold text-gray-900 sm:text-5xl sm:leading-none md:text-6xl lg:text-5xl xl:text-6xl">
|
||||
Data to enrich your
|
||||
<br class="xl:hidden" />
|
||||
<span class="text-indigo-600">online business</span>
|
||||
</h2>
|
||||
<p class="mt-3 max-w-md mx-auto text-lg text-gray-500 sm:text-xl md:mt-5 md:max-w-3xl">
|
||||
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.
|
||||
</p>
|
||||
<div class="mt-10 sm:flex sm:justify-center lg:justify-start">
|
||||
<div class="rounded-md shadow">
|
||||
<a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo transition duration-150 ease-in-out md:py-4 md:text-lg md:px-10">
|
||||
Get started
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
|
||||
<a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-indigo-600 bg-white hover:text-indigo-500 focus:outline-none focus:border-indigo-300 focus:shadow-outline-indigo transition duration-150 ease-in-out md:py-4 md:text-lg md:px-10">
|
||||
Live demo
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative w-full h-64 sm:h-72 md:h-96 lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2 lg:h-full">
|
||||
<img class="absolute inset-0 w-full h-full object-cover" src="https://images.unsplash.com/photo-1520333789090-1afc82db536a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2102&q=80" alt="Woman on her phone" />
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,110 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="relative bg-white overflow-hidden">
|
||||
<div class="max-w-screen-xl mx-auto">
|
||||
<div class="relative z-10 pb-8 bg-white sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32">
|
||||
<svg class="hidden lg:block absolute right-0 inset-y-0 h-full w-48 text-white transform translate-x-1/2" fill="currentColor" viewBox="0 0 100 100" preserveAspectRatio="none">
|
||||
<polygon points="50,0 100,0 50,100 0,100" />
|
||||
</svg>
|
||||
|
||||
<div class="relative pt-6 px-4 sm:px-6 lg:px-8">
|
||||
<nav class="relative flex items-center justify-between sm:h-10 lg:justify-start">
|
||||
<div class="flex items-center flex-grow flex-shrink-0 lg:flex-grow-0">
|
||||
<div class="flex items-center justify-between w-full md:w-auto">
|
||||
<a href="#" aria-label="Home">
|
||||
<img class="h-8 w-auto sm:h-10" src="https://tailwindui.com/img/logos/v1/workflow-mark-on-white.svg" alt="Logo" />
|
||||
</a>
|
||||
<div class="-mr-2 flex items-center md:hidden">
|
||||
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out" id="main-menu" aria-label="Main menu" aria-haspopup="true">
|
||||
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden md:block md:ml-10 md:pr-4">
|
||||
<a href="#" class="font-medium text-gray-500 hover:text-gray-900 transition duration-150 ease-in-out">Product</a>
|
||||
<a href="#" class="ml-8 font-medium text-gray-500 hover:text-gray-900 transition duration-150 ease-in-out">Features</a>
|
||||
<a href="#" class="ml-8 font-medium text-gray-500 hover:text-gray-900 transition duration-150 ease-in-out">Marketplace</a>
|
||||
<a href="#" class="ml-8 font-medium text-gray-500 hover:text-gray-900 transition duration-150 ease-in-out">Company</a>
|
||||
<a href="#" class="ml-8 font-medium text-indigo-600 hover:text-indigo-900 transition duration-150 ease-in-out">Log in</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
Mobile menu, show/hide based on menu open state.
|
||||
|
||||
Entering: "duration-150 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 top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden">
|
||||
<div class="rounded-lg shadow-md">
|
||||
<div class="rounded-lg bg-white shadow-xs overflow-hidden" role="menu" aria-orientation="vertical" aria-labelledby="main-menu">
|
||||
<div class="px-5 pt-4 flex items-center justify-between">
|
||||
<div>
|
||||
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/v1/workflow-mark-on-white.svg" alt="" />
|
||||
</div>
|
||||
<div class="-mr-2">
|
||||
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out" aria-label="Close menu">
|
||||
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-2 pt-2 pb-3">
|
||||
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition duration-150 ease-in-out" role="menuitem">Product</a>
|
||||
<a href="#" class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition duration-150 ease-in-out" role="menuitem">Features</a>
|
||||
<a href="#" class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition duration-150 ease-in-out" role="menuitem">Marketplace</a>
|
||||
<a href="#" class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition duration-150 ease-in-out" role="menuitem">Company</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#" class="block w-full px-5 py-3 text-center font-medium text-indigo-600 bg-gray-50 hover:bg-gray-100 hover:text-indigo-700 focus:outline-none focus:bg-gray-100 focus:text-indigo-700 transition duration-150 ease-in-out" role="menuitem">
|
||||
Log in
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main class="mt-10 mx-auto max-w-screen-xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">
|
||||
<div class="sm:text-center lg:text-left">
|
||||
<h2 class="text-4xl tracking-tight leading-10 font-extrabold text-gray-900 sm:text-5xl sm:leading-none md:text-6xl">
|
||||
Data to enrich your
|
||||
<br class="xl:hidden" />
|
||||
<span class="text-indigo-600">online business</span>
|
||||
</h2>
|
||||
<p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
|
||||
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.
|
||||
</p>
|
||||
<div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
|
||||
<div class="rounded-md shadow">
|
||||
<a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo transition duration-150 ease-in-out md:py-4 md:text-lg md:px-10">
|
||||
Get started
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-3 sm:mt-0 sm:ml-3">
|
||||
<a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-indigo-700 bg-indigo-100 hover:text-indigo-600 hover:bg-indigo-50 focus:outline-none focus:shadow-outline-indigo focus:border-indigo-300 transition duration-150 ease-in-out md:py-4 md:text-lg md:px-10">
|
||||
Live demo
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
|
||||
<img class="h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full" src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,149 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="bg-gray-50">
|
||||
<div class="relative overflow-hidden">
|
||||
<div class="block absolute inset-y-0 h-full w-full">
|
||||
<div class="relative h-full">
|
||||
<svg class="absolute right-full transform translate-y-1/3 translate-x-1/4 md:translate-y-1/2 sm:translate-x-1/2 lg:translate-x-full" width="404" height="784" fill="none" viewBox="0 0 404 784">
|
||||
<defs>
|
||||
<pattern id="e229dbec-10e9-49ee-8ec3-0286ca089edf" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
|
||||
<rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="404" height="784" fill="url(#ad9a0a02-b58e-4a1d-8c36-1b649889af63)" />
|
||||
</svg>
|
||||
<svg class="absolute left-full transform -translate-y-3/4 -translate-x-1/4 sm:-translate-x-1/2 md:-translate-y-1/2 lg:-translate-x-3/4" width="404" height="784" fill="none" viewBox="0 0 404 784">
|
||||
<defs>
|
||||
<pattern id="d2a68204-c383-44b1-b99f-42ccff4e5365" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
|
||||
<rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="404" height="784" fill="url(#478e97d6-90df-4a89-8d63-30fdbb3c7e57)" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative pt-6 pb-12 lg:pb-20">
|
||||
<div class="max-w-screen-xl mx-auto px-4 sm:px-6">
|
||||
<nav class="relative flex items-center justify-between sm:h-10 md:justify-center">
|
||||
<div class="flex items-center flex-1 md:absolute md:inset-y-0 md:left-0">
|
||||
<div class="flex items-center justify-between w-full md:w-auto">
|
||||
<a href="#" aria-label="Home">
|
||||
<img class="h-8 w-auto sm:h-10" src="https://tailwindui.com/img/logos/v1/workflow-mark-on-white.svg" alt="Logo" />
|
||||
</a>
|
||||
<div class="-mr-2 flex items-center md:hidden">
|
||||
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out" id="main-menu" aria-label="Main menu" aria-haspopup="true">
|
||||
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden md:flex md:space-x-10">
|
||||
<a href="#" class="font-medium text-gray-500 hover:text-gray-900 transition duration-150 ease-in-out">Product</a>
|
||||
<a href="#" class="font-medium text-gray-500 hover:text-gray-900 transition duration-150 ease-in-out">Features</a>
|
||||
<a href="#" class="font-medium text-gray-500 hover:text-gray-900 transition duration-150 ease-in-out">Marketplace</a>
|
||||
<a href="#" class="font-medium text-gray-500 hover:text-gray-900 transition duration-150 ease-in-out">Company</a>
|
||||
</div>
|
||||
<div class="hidden md:absolute md:flex md:items-center md:justify-end md:inset-y-0 md:right-0">
|
||||
<span class="inline-flex rounded-md shadow">
|
||||
<a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-base leading-6 font-medium rounded-md text-indigo-600 bg-white hover:text-indigo-500 focus:outline-none focus:border-indigo-300 focus:shadow-outline-indigo active:bg-gray-50 active:text-indigo-700 transition duration-150 ease-in-out">
|
||||
Log in
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
Mobile menu, show/hide based on menu open state.
|
||||
|
||||
Entering: "duration-150 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 top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden">
|
||||
<div class="rounded-lg shadow-md">
|
||||
<div class="rounded-lg bg-white shadow-xs overflow-hidden" role="menu" aria-orientation="vertical" aria-labelledby="main-menu">
|
||||
<div class="px-5 pt-4 flex items-center justify-between">
|
||||
<div>
|
||||
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/v1/workflow-mark-on-white.svg" alt="" />
|
||||
</div>
|
||||
<div class="-mr-2">
|
||||
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out" aria-label="Close menu">
|
||||
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-2 pt-2 pb-3">
|
||||
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition duration-150 ease-in-out" role="menuitem">Product</a>
|
||||
<a href="#" class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition duration-150 ease-in-out" role="menuitem">Features</a>
|
||||
<a href="#" class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition duration-150 ease-in-out" role="menuitem">Marketplace</a>
|
||||
<a href="#" class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition duration-150 ease-in-out" role="menuitem">Company</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#" class="block w-full px-5 py-3 text-center font-medium text-indigo-600 bg-gray-50 hover:bg-gray-100 hover:text-indigo-700 focus:outline-none focus:bg-gray-100 focus:text-indigo-700 transition duration-150 ease-in-out" role="menuitem">
|
||||
Log in
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-10 mx-auto max-w-screen-xl px-4 sm:px-6 md:mt-16 lg:mt-20">
|
||||
<div class="text-center">
|
||||
<h2 class="text-4xl tracking-tight leading-10 font-extrabold text-gray-900 sm:text-5xl sm:leading-none md:text-6xl">
|
||||
Data to enrich your
|
||||
<br />
|
||||
<span class="text-indigo-600">online business</span>
|
||||
</h2>
|
||||
<p class="mt-3 max-w-md mx-auto text-base text-gray-500 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
|
||||
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 flex flex-col">
|
||||
<div class="flex-1"></div>
|
||||
<div class="flex-1 w-full bg-gray-800"></div>
|
||||
</div>
|
||||
<div class="max-w-screen-xl mx-auto px-4 sm:px-6">
|
||||
<img class="relative rounded-lg shadow-lg" src="https://tailwindui.com/img/component-images/top-nav-with-multi-column-layout-screenshot.png" alt="App screenshot" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gray-800">
|
||||
<div class="max-w-screen-xl mx-auto pt-16 pb-20 px-4 sm:px-6 md:pb-24 lg:px-8">
|
||||
<h3 class="text-center text-gray-400 text-sm font-semibold uppercase tracking-wide">Trusted by over 26,000 forward-thinking companies</h3>
|
||||
<div class="mt-8 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/v1/tuple-logo.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/v1/mirage-logo.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/v1/statickit-logo.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/v1/transistor-logo.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/v1/workcation-logo.svg" alt="Workcation" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,225 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="relative bg-gray-800 overflow-hidden">
|
||||
<div class="hidden sm:block sm:absolute sm:inset-0">
|
||||
<svg class="absolute bottom-0 right-0 transform translate-x-1/2 mb-48 text-gray-700 lg:top-0 lg:mt-28 lg:mb-0 xl:transform-none xl:translate-x-0" width="364" height="384" viewBox="0 0 364 384" fill="none">
|
||||
<defs>
|
||||
<pattern id="eab71dd9-9d7a-47bd-8044-256344ee00d0" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
|
||||
<rect x="0" y="0" width="4" height="4" fill="currentColor" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="364" height="384" fill="url(#eab71dd9-9d7a-47bd-8044-256344ee00d0)" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="relative pt-6 pb-12 sm:pb-32">
|
||||
<nav class="relative max-w-screen-xl mx-auto flex items-center justify-between px-4 sm:px-6">
|
||||
<div class="flex items-center flex-1">
|
||||
<div class="flex items-center justify-between w-full md:w-auto">
|
||||
<a href="#" aria-label="Home">
|
||||
<img class="h-8 w-auto sm:h-10" src="https://tailwindui.com/img/logos/v1/workflow-mark-on-dark.svg" alt="Logo" />
|
||||
</a>
|
||||
<div class="-mr-2 flex items-center md:hidden">
|
||||
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:bg-gray-700 focus:outline-none focus:bg-gray-700 transition duration-150 ease-in-out" id="main-menu" aria-label="Main menu" aria-haspopup="true">
|
||||
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden space-x-10 md:flex md:ml-10">
|
||||
<a href="#" class="font-medium text-white hover:text-gray-300 transition duration-150 ease-in-out">Product</a>
|
||||
<a href="#" class="font-medium text-white hover:text-gray-300 transition duration-150 ease-in-out">Features</a>
|
||||
<a href="#" class="font-medium text-white hover:text-gray-300 transition duration-150 ease-in-out">Marketplace</a>
|
||||
<a href="#" class="font-medium text-white hover:text-gray-300 transition duration-150 ease-in-out">Company</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden md:flex">
|
||||
<a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-gray-600 hover:bg-gray-500 focus:outline-none focus:shadow-outline-gray focus:border-gray-700 active:bg-gray-700 transition duration-150 ease-in-out">
|
||||
Log in
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!--
|
||||
Mobile menu, show/hide based on menu open state.
|
||||
|
||||
Entering: "duration-150 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 top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden">
|
||||
<div class="rounded-lg shadow-md">
|
||||
<div class="rounded-lg bg-white shadow-xs overflow-hidden" role="menu" aria-orientation="vertical" aria-labelledby="main-menu">
|
||||
<div class="px-5 pt-4 flex items-center justify-between">
|
||||
<div>
|
||||
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/v1/workflow-mark-on-white.svg" alt="" />
|
||||
</div>
|
||||
<div class="-mr-2">
|
||||
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out" aria-label="Close menu">
|
||||
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-1 px-2 pt-2 pb-3">
|
||||
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition duration-150 ease-in-out" role="menuitem">Product</a>
|
||||
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition duration-150 ease-in-out" role="menuitem">Features</a>
|
||||
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition duration-150 ease-in-out" role="menuitem">Marketplace</a>
|
||||
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition duration-150 ease-in-out" role="menuitem">Company</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#" class="block w-full px-5 py-3 text-center font-medium text-indigo-600 bg-gray-50 hover:bg-gray-100 hover:text-indigo-700 focus:outline-none focus:bg-gray-100 focus:text-indigo-700 transition duration-150 ease-in-out" role="menuitem">
|
||||
Log in
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main class="mt-8 sm:mt-16 md:mt-20 lg:mt-24">
|
||||
<div class="mx-auto max-w-screen-xl">
|
||||
<div class="lg:grid lg:grid-cols-12 lg:gap-8">
|
||||
<div class="px-4 sm:px-6 sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left lg:flex lg:items-center">
|
||||
<div>
|
||||
<a href="#" class="inline-flex items-center text-white bg-gray-900 rounded-full p-1 pr-2 sm:text-base lg:text-sm xl:text-base hover:text-gray-200">
|
||||
<span class="px-3 py-0.5 text-white text-xs font-semibold leading-5 uppercase tracking-wide bg-indigo-500 rounded-full">We're hiring</span>
|
||||
<span class="ml-4 text-sm leading-5">Visit our careers page</span>
|
||||
<!-- Heroicon name: chevron-right -->
|
||||
<svg class="ml-2 w-5 h-5 text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</a>
|
||||
<h2 class="mt-4 text-4xl tracking-tight leading-10 font-extrabold text-white sm:mt-5 sm:leading-none sm:text-6xl lg:mt-6 lg:text-5xl xl:text-6xl">
|
||||
Data to enrich your
|
||||
<br class="hidden md:inline" />
|
||||
<span class="text-indigo-400">online business</span>
|
||||
</h2>
|
||||
<p class="mt-3 text-base text-gray-300 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
|
||||
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua ad ad non deserunt sunt.
|
||||
</p>
|
||||
<p class="mt-8 text-sm text-white uppercase tracking-wide font-semibold sm:mt-10">Used by</p>
|
||||
<div class="mt-5 w-full sm:mx-auto sm:max-w-lg lg:ml-0">
|
||||
<div class="flex flex-wrap items-start justify-between">
|
||||
<div class="flex justify-center px-1">
|
||||
<img class="h-9 sm:h-10" src="https://tailwindui.com/img/logos/v1/tuple-logo.svg" alt="Tuple" />
|
||||
</div>
|
||||
<div class="flex justify-center px-1">
|
||||
<img class="h-9 sm:h-10" src="https://tailwindui.com/img/logos/v1/workcation-logo.svg" alt="Workcation" />
|
||||
</div>
|
||||
<div class="flex justify-center px-1">
|
||||
<img class="h-9 sm:h-10" src="https://tailwindui.com/img/logos/v1/statickit-logo.svg" alt="StaticKit" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-12 sm:mt-16 lg:mt-0 lg:col-span-6">
|
||||
<div class="bg-white sm:max-w-md sm:w-full sm:mx-auto sm:rounded-lg sm:overflow-hidden">
|
||||
<div class="px-4 py-8 sm:px-10">
|
||||
<div>
|
||||
<p class="text-sm leading-5 font-medium text-gray-700">
|
||||
Sign in with
|
||||
</p>
|
||||
|
||||
<div class="mt-1 grid grid-cols-3 gap-3">
|
||||
<div>
|
||||
<span class="w-full inline-flex rounded-md shadow-sm">
|
||||
<button type="button" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md bg-white text-sm leading-5 font-medium text-gray-500 hover:text-gray-400 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue transition duration-150 ease-in-out" aria-label="Sign in with Facebook">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M20 10c0-5.523-4.477-10-10-10S0 4.477 0 10c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V10h2.54V7.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.562V10h2.773l-.443 2.89h-2.33v6.988C16.343 19.128 20 14.991 20 10z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span class="w-full inline-flex rounded-md shadow-sm">
|
||||
<button type="button" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md bg-white text-sm leading-5 font-medium text-gray-500 hover:text-gray-400 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue transition duration-150 ease-in-out" aria-label="Sign in with Twitter">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.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.073 4.073 0 01.8 7.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 010 16.407a11.616 11.616 0 006.29 1.84" />
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span class="w-full inline-flex rounded-md shadow-sm">
|
||||
<button type="button" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md bg-white text-sm leading-5 font-medium text-gray-500 hover:text-gray-400 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue transition duration-150 ease-in-out" aria-label="Sign in with GitHub">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.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 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 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.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 relative">
|
||||
<div class="absolute inset-0 flex items-center">
|
||||
<div class="w-full border-t border-gray-300"></div>
|
||||
</div>
|
||||
<div class="relative flex justify-center text-sm leading-5">
|
||||
<span class="px-2 bg-white text-gray-500">
|
||||
Or
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<form action="#" method="POST" class="space-y-6">
|
||||
<div>
|
||||
<label for="name" class="sr-only">
|
||||
Full name
|
||||
</label>
|
||||
<div class="rounded-md shadow-sm">
|
||||
<input id="name" placeholder="Full name" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="mobile-or-email" class="sr-only">
|
||||
Mobile number or email
|
||||
</label>
|
||||
<div class="rounded-md shadow-sm">
|
||||
<input id="mobile-or-email" placeholder="Mobile number or email" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="password" class="sr-only">
|
||||
Password
|
||||
</label>
|
||||
<div class="rounded-md shadow-sm">
|
||||
<input id="password" type="password" placeholder="Password" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span class="block w-full rounded-md shadow-sm">
|
||||
<button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition duration-150 ease-in-out">
|
||||
Create your account
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-6 bg-gray-50 border-t-2 border-gray-200 sm:px-10">
|
||||
<p class="text-xs leading-5 text-gray-500">By signing up, you agree to our <a href="#" class="font-medium text-gray-900 hover:underline">Terms</a>, <a href="#" class="font-medium text-gray-900 hover:underline">Data Policy</a> and <a href="#" class="font-medium text-gray-900 hover:underline">Cookies Policy</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,148 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="relative bg-white overflow-hidden">
|
||||
<div class="hidden lg:block lg:absolute lg:inset-0">
|
||||
<svg class="absolute top-0 left-1/2 transform translate-x-64 -translate-y-8" width="640" height="784" fill="none" viewBox="0 0 640 784">
|
||||
<defs>
|
||||
<pattern id="9ebea6f4-a1f5-4d96-8c4e-4c2abf658047" x="118" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
|
||||
<rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect y="72" width="640" height="640" class="text-gray-50" fill="currentColor" />
|
||||
<rect x="118" width="404" height="784" fill="url(#9ebea6f4-a1f5-4d96-8c4e-4c2abf658047)" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="relative pt-6 pb-16 md:pb-20 lg:pb-24 xl:pb-32">
|
||||
<nav class="relative max-w-screen-xl mx-auto flex items-center justify-between px-4 sm:px-6">
|
||||
<div class="flex items-center flex-1">
|
||||
<div class="flex items-center justify-between w-full md:w-auto">
|
||||
<a href="#" aria-label="Home">
|
||||
<img class="h-8 w-auto sm:h-10" src="https://tailwindui.com/img/logos/v1/workflow-mark-on-white.svg" alt="Logo" />
|
||||
</a>
|
||||
<div class="-mr-2 flex items-center md:hidden">
|
||||
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out" id="main-menu" aria-label="Main menu" aria-haspopup="true">
|
||||
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden md:block md:ml-10">
|
||||
<a href="#" class="font-medium text-gray-500 hover:text-gray-900 transition duration-150 ease-in-out">Product</a>
|
||||
<a href="#" class="ml-10 font-medium text-gray-500 hover:text-gray-900 transition duration-150 ease-in-out">Features</a>
|
||||
<a href="#" class="ml-10 font-medium text-gray-500 hover:text-gray-900 transition duration-150 ease-in-out">Marketplace</a>
|
||||
<a href="#" class="ml-10 font-medium text-gray-500 hover:text-gray-900 transition duration-150 ease-in-out">Company</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden md:block text-right">
|
||||
<span class="inline-flex rounded-md shadow-md">
|
||||
<span class="inline-flex rounded-md shadow-xs">
|
||||
<a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-base leading-6 font-medium rounded-md text-indigo-600 bg-white hover:bg-gray-50 focus:outline-none focus:border-indigo-300 focus:shadow-outline-indigo transition duration-150 ease-in-out">
|
||||
Log in
|
||||
</a>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!--
|
||||
Mobile menu, show/hide based on menu open state.
|
||||
|
||||
Entering: "duration-150 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 top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden">
|
||||
<div class="rounded-lg shadow-md">
|
||||
<div class="rounded-lg bg-white shadow-xs overflow-hidden" role="menu" aria-orientation="vertical" aria-labelledby="main-menu">
|
||||
<div class="px-5 pt-4 flex items-center justify-between">
|
||||
<div>
|
||||
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/v1/workflow-mark-on-white.svg" alt="" />
|
||||
</div>
|
||||
<div class="-mr-2">
|
||||
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out" aria-label="Close menu">
|
||||
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-2 pt-2 pb-3">
|
||||
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition duration-150 ease-in-out" role="menuitem">Product</a>
|
||||
<a href="#" class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition duration-150 ease-in-out" role="menuitem">Features</a>
|
||||
<a href="#" class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition duration-150 ease-in-out" role="menuitem">Marketplace</a>
|
||||
<a href="#" class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition duration-150 ease-in-out" role="menuitem">Company</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#" class="block w-full px-5 py-3 text-center font-medium text-indigo-600 bg-gray-50 hover:bg-gray-100 hover:text-indigo-700 focus:outline-none focus:bg-gray-100 focus:text-indigo-700 transition duration-150 ease-in-out" role="menuitem">
|
||||
Log in
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main class="mt-8 mx-auto max-w-screen-xl px-4 sm:mt-12 sm:px-6 md:mt-20 xl:mt-24">
|
||||
<div class="lg:grid lg:grid-cols-12 lg:gap-8">
|
||||
<div class="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left">
|
||||
<div class="text-sm font-semibold uppercase tracking-wide text-gray-500 sm:text-base lg:text-sm xl:text-base">
|
||||
Coming soon
|
||||
</div>
|
||||
<h2 class="mt-1 text-4xl tracking-tight leading-10 font-extrabold text-gray-900 sm:leading-none sm:text-6xl lg:text-5xl xl:text-6xl">
|
||||
Data to enrich your
|
||||
<br class="hidden md:inline" />
|
||||
<span class="text-indigo-600">online business</span>
|
||||
</h2>
|
||||
<p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
|
||||
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua ad ad non deserunt sunt.
|
||||
</p>
|
||||
<div class="mt-5 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0">
|
||||
<p class="text-base font-medium text-gray-900">
|
||||
Sign up to get notified when it’s ready.
|
||||
</p>
|
||||
<form action="#" method="POST" class="mt-3 sm:flex">
|
||||
<input aria-label="Email" class="appearance-none block w-full px-3 py-3 border border-gray-300 text-base leading-6 rounded-md placeholder-gray-500 shadow-sm focus:outline-none focus:placeholder-gray-400 focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:flex-1" placeholder="Enter your email" />
|
||||
<button type="submit" class="mt-3 w-full px-6 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-gray-800 shadow-sm hover:bg-gray-700 focus:outline-none focus:border-gray-900 focus:shadow-outline-gray active:bg-gray-900 transition duration-150 ease-in-out sm:mt-0 sm:ml-3 sm:flex-shrink-0 sm:inline-flex sm:items-center sm:w-auto">
|
||||
Notify me
|
||||
</button>
|
||||
</form>
|
||||
<p class="mt-3 text-sm leading-5 text-gray-500">
|
||||
We care about the protection of your data. Read our
|
||||
<a href="#" class="font-medium text-gray-900 underline">Privacy Policy</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center">
|
||||
<svg class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-8 scale-75 origin-top sm:scale-100 lg:hidden" width="640" height="784" fill="none" viewBox="0 0 640 784">
|
||||
<defs>
|
||||
<pattern id="4f4f415c-a0e9-44c2-9601-6ded5a34a13e" x="118" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
|
||||
<rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect y="72" width="640" height="640" class="text-gray-50" fill="currentColor" />
|
||||
<rect x="118" width="404" height="784" fill="url(#4f4f415c-a0e9-44c2-9601-6ded5a34a13e)" />
|
||||
</svg>
|
||||
<div class="relative mx-auto w-full rounded-lg shadow-lg lg:max-w-md">
|
||||
<button type="button" class="relative block w-full rounded-lg overflow-hidden focus:outline-none focus:shadow-outline">
|
||||
<img class="w-full" src="https://images.unsplash.com/photo-1556740758-90de374c12ad?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Woman making a sale" />
|
||||
<div class="absolute inset-0 w-full h-full flex items-center justify-center">
|
||||
<svg class="h-20 w-20 text-indigo-500" fill="currentColor" viewBox="0 0 84 84">
|
||||
<circle opacity="0.9" cx="42" cy="42" r="42" fill="white" />
|
||||
<path d="M55.5039 40.3359L37.1094 28.0729C35.7803 27.1869 34 28.1396 34 29.737V54.263C34 55.8604 35.7803 56.8131 37.1094 55.9271L55.5038 43.6641C56.6913 42.8725 56.6913 41.1275 55.5039 40.3359Z" />
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
376
tailwindui/components/marketing/sections/logo-clouds/index.html
Normal file
376
tailwindui/components/marketing/sections/logo-clouds/index.html
Normal file
@@ -0,0 +1,376 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Tailwind UI Components</title>
|
||||
<link href="https://fonts.googleapis.com/css?family=Inter&display=swap" rel="stylesheet"/>
|
||||
<link href="https://cdn.jsdelivr.net/npm/@tailwindcss/ui@latest/dist/tailwind-ui.min.css" rel="stylesheet"/>
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.0.1/dist/alpine.js" defer></script>
|
||||
<link href="https://cdn.jsdelivr.net/npm/highlightjs-themes@1.0.0/darkula.css" rel="stylesheet"/>
|
||||
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/highlight.min.js"></script>
|
||||
<style>
|
||||
* { box-sizing: border-box; }
|
||||
.font-sans { font-family: "Inter", sans-serif; }
|
||||
.hljs {
|
||||
background: #252f3f;
|
||||
color: white;
|
||||
}
|
||||
.hljs-tag {
|
||||
color: white;
|
||||
}
|
||||
.hljs-name {
|
||||
color: #ff8383;
|
||||
}
|
||||
.hljs-attr {
|
||||
color: #ffe484;
|
||||
font-style: italic;
|
||||
}
|
||||
.hljs-string {
|
||||
color: #b5f4a5;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="font-sans antialiased text-gray-900">
|
||||
<main>
|
||||
<div class="py-4 sm:py-12">
|
||||
<div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="pb-2">
|
||||
<nav class="flex items-center text-sm leading-5 font-medium">
|
||||
<a href="/#marketing" class="text-gray-500 hover:text-gray-700 focus:outline-none focus:underline transition duration-150 ease-in-out">
|
||||
Marketing
|
||||
</a>
|
||||
<svg class="flex-shrink-0 mx-2 h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<a href="/#marketing-page-sections" class="text-gray-500 hover:text-gray-700 focus:outline-none focus:underline transition duration-150 ease-in-out">
|
||||
Page Sections
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
<h2 class="text-2xl leading-8 font-semibold font-display text-gray-900 sm:text-3xl sm:leading-9">
|
||||
Logo Clouds
|
||||
</h2>
|
||||
</div>
|
||||
<div class="mt-6 bg-white max-w-8xl mx-auto sm:px-6 lg:px-8">
|
||||
<div class="max-w-8xl mx-auto">
|
||||
|
||||
<div id="component-7443f7f1055f51f840e3e4f3c7db9a5e81d0451b" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-7443f7f1055f51f840e3e4f3c7db9a5e81d0451b">Off-white grid</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/logo-clouds/off_white_grid.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-662d1d47cc8fcba52c417dfdd938b3d1ca4f8495" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-662d1d47cc8fcba52c417dfdd938b3d1ca4f8495">Simple with heading on brand</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/logo-clouds/simple_with_heading_on_brand.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-4dc051a831acee6c88c7f262edb7ceb908991605" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-4dc051a831acee6c88c7f262edb7ceb908991605">Simple with heading</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/logo-clouds/simple_with_heading.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-6e21ecfa89dff477604a1eb19bd926d65223dc0a" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-6e21ecfa89dff477604a1eb19bd926d65223dc0a">Simple</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/logo-clouds/simple.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-4a891bdb65a8bda2770c1a348b4905f4a521a5e1" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-4a891bdb65a8bda2770c1a348b4905f4a521a5e1">Split with grid on right</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/logo-clouds/split_with_grid_on_right.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
(function() {
|
||||
const getDocHeight = doc => {
|
||||
doc = doc || document;
|
||||
const body = doc.body;
|
||||
const html = doc.documentElement;
|
||||
const height = Math.max(
|
||||
body.scrollHeight,
|
||||
body.offsetHeight,
|
||||
html.clientHeight,
|
||||
html.scrollHeight,
|
||||
html.offsetHeight
|
||||
);
|
||||
return height;
|
||||
};
|
||||
|
||||
window.resizableIFrame = function() {
|
||||
return {
|
||||
resizing: !1,
|
||||
width: "100%",
|
||||
init: function() {}
|
||||
};
|
||||
};
|
||||
const iframes = document.querySelectorAll("iframe");
|
||||
Array.from(iframes).forEach(iframe => {
|
||||
iframe.addEventListener("load", e => {
|
||||
const iframe = e.srcElement;
|
||||
const doc = iframe.contentDocument || iframe.contentWindow.document;
|
||||
doc.body.classList.add("antialiased", "font-sans", "bg-white")
|
||||
iframe.style.visibility = "hidden";
|
||||
iframe.style.height = "10px";
|
||||
const height = Math.max(getDocHeight(doc), 256) + "px";
|
||||
iframe.style.height = height;
|
||||
iframe.style.visibility = "visible";
|
||||
|
||||
const html = doc.body.innerHTML.trim();
|
||||
const container = iframe.parentElement.parentElement.parentElement;
|
||||
hljs.configure({useBR: false, tabReplace: ' '});
|
||||
const highlighted = hljs.highlight('html', html);
|
||||
const codeElem = container.children[1].querySelector("code");
|
||||
codeElem.innerHTML = highlighted.value;
|
||||
});
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,34 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="bg-white">
|
||||
<div class="max-w-screen-xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
|
||||
<p class="text-center text-base leading-6 font-semibold uppercase text-gray-600 tracking-wider">
|
||||
Trusted by over 5 very average small businesses
|
||||
</p>
|
||||
<div class="mt-6 grid grid-cols-2 gap-0.5 md:grid-cols-3 lg:mt-8">
|
||||
<div class="col-span-1 flex justify-center py-8 px-8 bg-gray-50">
|
||||
<img class="max-h-12" src="https://tailwindui.com/img/logos/v1/transistor-logo.svg" alt="Workcation" />
|
||||
</div>
|
||||
<div class="col-span-1 flex justify-center py-8 px-8 bg-gray-50">
|
||||
<img class="max-h-12" src="https://tailwindui.com/img/logos/v1/mirage-logo.svg" alt="Mirage" />
|
||||
</div>
|
||||
<div class="col-span-1 flex justify-center py-8 px-8 bg-gray-50">
|
||||
<img class="max-h-12" src="https://tailwindui.com/img/logos/v1/tuple-logo.svg" alt="Tuple" />
|
||||
</div>
|
||||
<div class="col-span-1 flex justify-center py-8 px-8 bg-gray-50">
|
||||
<img class="max-h-12" src="https://tailwindui.com/img/logos/v1/laravel-logo.svg" alt="Laravel" />
|
||||
</div>
|
||||
<div class="col-span-1 flex justify-center py-8 px-8 bg-gray-50">
|
||||
<img class="max-h-12" src="https://tailwindui.com/img/logos/v1/statickit-logo.svg" alt="StaticKit" />
|
||||
</div>
|
||||
<div class="col-span-1 flex justify-center py-8 px-8 bg-gray-50">
|
||||
<img class="max-h-12" src="https://tailwindui.com/img/logos/v1/statamic-logo.svg" alt="Statamic" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,28 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="bg-white">
|
||||
<div class="max-w-screen-xl mx-auto py-12 px-4 sm:px-6 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/v1/tuple-logo.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/v1/mirage-logo.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/v1/statickit-logo.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/v1/transistor-logo.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/v1/workcation-logo.svg" alt="Workcation" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,29 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="bg-indigo-200 bg-opacity-25">
|
||||
<div class="max-w-screen-xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
|
||||
<div class="lg:grid lg:grid-cols-2 lg:gap-8">
|
||||
<h2 class="max-w-md mx-auto text-3xl leading-9 font-extrabold text-indigo-900 text-center lg:max-w-xl lg:text-left">
|
||||
The world's most innovative companies use Workflow
|
||||
</h2>
|
||||
<div class="flow-root self-center mt-8 lg:mt-0">
|
||||
<div class="-mt-4 -ml-8 flex flex-wrap justify-between lg:-ml-4">
|
||||
<div class="mt-4 ml-8 flex flex-grow flex-shrink-0 justify-center lg:flex-grow-0 lg:ml-4">
|
||||
<img class="h-12" src="https://tailwindui.com/img/logos/v1/workcation-logo-indigo-900.svg" alt="Workcation" />
|
||||
</div>
|
||||
<div class="mt-4 ml-8 flex flex-grow flex-shrink-0 justify-center lg:flex-grow-0 lg:ml-4">
|
||||
<img class="h-12" src="https://tailwindui.com/img/logos/v1/tuple-logo-indigo-900.svg" alt="Tuple" />
|
||||
</div>
|
||||
<div class="mt-4 ml-8 flex flex-grow flex-shrink-0 justify-center lg:flex-grow-0 lg:ml-4">
|
||||
<img class="h-12" src="https://tailwindui.com/img/logos/v1/level-logo-indigo-900.svg" alt="Level" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,35 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="bg-indigo-800">
|
||||
<div class="max-w-screen-xl mx-auto py-16 px-4 sm:py-20 sm:px-6 lg:px-8">
|
||||
<div class="lg:space-y-10">
|
||||
<h2 class="text-3xl leading-9 font-extrabold text-white">
|
||||
The world's most innovative companies use Workflow
|
||||
</h2>
|
||||
<div class="flow-root mt-8 lg:mt-0">
|
||||
<div class="-mt-4 -ml-8 flex flex-wrap justify-between lg:-ml-4">
|
||||
<div class="mt-4 ml-8 flex flex-grow flex-shrink-0 lg:flex-grow-0 lg:ml-4">
|
||||
<img class="h-12" src="https://tailwindui.com/img/logos/v1/tuple-logo-indigo-300.svg" alt="Tuple" />
|
||||
</div>
|
||||
<div class="mt-4 ml-8 flex flex-grow flex-shrink-0 lg:flex-grow-0 lg:ml-4">
|
||||
<img class="h-12" src="https://tailwindui.com/img/logos/v1/mirage-logo-indigo-300.svg" alt="Mirage" />
|
||||
</div>
|
||||
<div class="mt-4 ml-8 flex flex-grow flex-shrink-0 lg:flex-grow-0 lg:ml-4">
|
||||
<img class="h-12" src="https://tailwindui.com/img/logos/v1/statickit-logo-indigo-300.svg" alt="StaticKit" />
|
||||
</div>
|
||||
<div class="mt-4 ml-8 flex flex-grow flex-shrink-0 lg:flex-grow-0 lg:ml-4">
|
||||
<img class="h-12" src="https://tailwindui.com/img/logos/v1/transistor-logo-indigo-300.svg" alt="Transistor" />
|
||||
</div>
|
||||
<div class="mt-4 ml-8 flex flex-grow flex-shrink-0 lg:flex-grow-0 lg:ml-4">
|
||||
<img class="h-12" src="https://tailwindui.com/img/logos/v1/workcation-logo-indigo-300.svg" alt="Workcation" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,53 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="bg-white">
|
||||
<div class="max-w-screen-xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
|
||||
<div class="lg:grid lg:grid-cols-2 lg:gap-8 lg:items-center">
|
||||
<div>
|
||||
<h2 class="text-3xl leading-9 font-extrabold text-gray-900 sm:text-4xl sm:leading-10">
|
||||
Used by the world's most average companies
|
||||
</h2>
|
||||
<p class="mt-3 max-w-3xl text-lg leading-7 text-gray-500">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Et, egestas tempus tellus etiam sed. Quam a scelerisque amet ullamcorper eu enim et fermentum, augue.
|
||||
</p>
|
||||
<div class="mt-8 sm:flex">
|
||||
<div class="rounded-md shadow">
|
||||
<a href="#" class="flex items-center justify-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:shadow-outline transition duration-150 ease-in-out">
|
||||
Create Account
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-3 sm:mt-0 sm:ml-3">
|
||||
<a href="#" class="flex items-center justify-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-indigo-700 bg-indigo-100 hover:text-indigo-600 hover:bg-indigo-50 focus:outline-none focus:shadow-outline focus:border-indigo-300 transition duration-150 ease-in-out">
|
||||
Contact Us
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-8 grid grid-cols-2 gap-0.5 md:grid-cols-3 lg:mt-0 lg:grid-cols-2">
|
||||
<div class="col-span-1 flex justify-center py-8 px-8 bg-gray-50">
|
||||
<img class="max-h-12" src="https://tailwindui.com/img/logos/v1/transistor-logo.svg" alt="Workcation" />
|
||||
</div>
|
||||
<div class="col-span-1 flex justify-center py-8 px-8 bg-gray-50">
|
||||
<img class="max-h-12" src="https://tailwindui.com/img/logos/v1/mirage-logo.svg" alt="Mirage" />
|
||||
</div>
|
||||
<div class="col-span-1 flex justify-center py-8 px-8 bg-gray-50">
|
||||
<img class="max-h-12" src="https://tailwindui.com/img/logos/v1/tuple-logo.svg" alt="Tuple" />
|
||||
</div>
|
||||
<div class="col-span-1 flex justify-center py-8 px-8 bg-gray-50">
|
||||
<img class="max-h-12" src="https://tailwindui.com/img/logos/v1/laravel-logo.svg" alt="Laravel" />
|
||||
</div>
|
||||
<div class="col-span-1 flex justify-center py-8 px-8 bg-gray-50">
|
||||
<img class="max-h-12" src="https://tailwindui.com/img/logos/v1/statickit-logo.svg" alt="StaticKit" />
|
||||
</div>
|
||||
<div class="col-span-1 flex justify-center py-8 px-8 bg-gray-50">
|
||||
<img class="max-h-12" src="https://tailwindui.com/img/logos/v1/statamic-logo.svg" alt="Statamic" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,268 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Tailwind UI Components</title>
|
||||
<link href="https://fonts.googleapis.com/css?family=Inter&display=swap" rel="stylesheet"/>
|
||||
<link href="https://cdn.jsdelivr.net/npm/@tailwindcss/ui@latest/dist/tailwind-ui.min.css" rel="stylesheet"/>
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.0.1/dist/alpine.js" defer></script>
|
||||
<link href="https://cdn.jsdelivr.net/npm/highlightjs-themes@1.0.0/darkula.css" rel="stylesheet"/>
|
||||
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/highlight.min.js"></script>
|
||||
<style>
|
||||
* { box-sizing: border-box; }
|
||||
.font-sans { font-family: "Inter", sans-serif; }
|
||||
.hljs {
|
||||
background: #252f3f;
|
||||
color: white;
|
||||
}
|
||||
.hljs-tag {
|
||||
color: white;
|
||||
}
|
||||
.hljs-name {
|
||||
color: #ff8383;
|
||||
}
|
||||
.hljs-attr {
|
||||
color: #ffe484;
|
||||
font-style: italic;
|
||||
}
|
||||
.hljs-string {
|
||||
color: #b5f4a5;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="font-sans antialiased text-gray-900">
|
||||
<main>
|
||||
<div class="py-4 sm:py-12">
|
||||
<div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="pb-2">
|
||||
<nav class="flex items-center text-sm leading-5 font-medium">
|
||||
<a href="/#marketing" class="text-gray-500 hover:text-gray-700 focus:outline-none focus:underline transition duration-150 ease-in-out">
|
||||
Marketing
|
||||
</a>
|
||||
<svg class="flex-shrink-0 mx-2 h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<a href="/#marketing-page-sections" class="text-gray-500 hover:text-gray-700 focus:outline-none focus:underline transition duration-150 ease-in-out">
|
||||
Page Sections
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
<h2 class="text-2xl leading-8 font-semibold font-display text-gray-900 sm:text-3xl sm:leading-9">
|
||||
Newsletter Sections
|
||||
</h2>
|
||||
</div>
|
||||
<div class="mt-6 bg-white max-w-8xl mx-auto sm:px-6 lg:px-8">
|
||||
<div class="max-w-8xl mx-auto">
|
||||
|
||||
<div id="component-0f52d3d53c337a2edbab0e713e230ab1a7786589" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-0f52d3d53c337a2edbab0e713e230ab1a7786589">Simple stacked</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/newsletter-sections/simple_stacked.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-23d5d2abbf34faba035afc6c04280e8d3b35cd60" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-23d5d2abbf34faba035afc6c04280e8d3b35cd60">With paragraph on brand card</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/newsletter-sections/with_paragraph_on_brand_card.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-822d0c07f09476f427b03c69dc62badd08f35fb1" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-822d0c07f09476f427b03c69dc62badd08f35fb1">With paragraph on dark</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/newsletter-sections/with_paragraph_on_dark.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
(function() {
|
||||
const getDocHeight = doc => {
|
||||
doc = doc || document;
|
||||
const body = doc.body;
|
||||
const html = doc.documentElement;
|
||||
const height = Math.max(
|
||||
body.scrollHeight,
|
||||
body.offsetHeight,
|
||||
html.clientHeight,
|
||||
html.scrollHeight,
|
||||
html.offsetHeight
|
||||
);
|
||||
return height;
|
||||
};
|
||||
|
||||
window.resizableIFrame = function() {
|
||||
return {
|
||||
resizing: !1,
|
||||
width: "100%",
|
||||
init: function() {}
|
||||
};
|
||||
};
|
||||
const iframes = document.querySelectorAll("iframe");
|
||||
Array.from(iframes).forEach(iframe => {
|
||||
iframe.addEventListener("load", e => {
|
||||
const iframe = e.srcElement;
|
||||
const doc = iframe.contentDocument || iframe.contentWindow.document;
|
||||
doc.body.classList.add("antialiased", "font-sans", "bg-white")
|
||||
iframe.style.visibility = "hidden";
|
||||
iframe.style.height = "10px";
|
||||
const height = Math.max(getDocHeight(doc), 256) + "px";
|
||||
iframe.style.height = height;
|
||||
iframe.style.visibility = "visible";
|
||||
|
||||
const html = doc.body.innerHTML.trim();
|
||||
const container = iframe.parentElement.parentElement.parentElement;
|
||||
hljs.configure({useBR: false, tabReplace: ' '});
|
||||
const highlighted = hljs.highlight('html', html);
|
||||
const codeElem = container.children[1].querySelector("code");
|
||||
codeElem.innerHTML = highlighted.value;
|
||||
});
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,24 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="bg-white">
|
||||
<div class="max-w-screen-xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
|
||||
<h2 class="text-3xl leading-9 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10">
|
||||
Want product news and updates?
|
||||
<br class="hidden sm:inline" />
|
||||
<span class="text-indigo-600" id="newsletter-headline">Sign up for our newsletter.</span>
|
||||
</h2>
|
||||
<form class="mt-8 sm:flex" aria-labelledby="newsletter-headline">
|
||||
<input aria-label="Email address" type="email" required class="appearance-none w-full px-5 py-3 border border-gray-300 text-base leading-6 rounded-md text-gray-900 bg-white placeholder-gray-500 focus:outline-none focus:shadow-outline focus:border-blue-300 transition duration-150 ease-in-out sm:max-w-xs" placeholder="Enter your email" />
|
||||
<div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3 sm:flex-shrink-0">
|
||||
<button class="w-full flex items-center justify-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:shadow-outline transition duration-150 ease-in-out">
|
||||
Notify me
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,37 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="bg-white">
|
||||
<div class="max-w-screen-xl mx-auto px-4 py-12 sm:px-6 lg:py-16 lg:px-8">
|
||||
<div class="px-6 py-6 bg-indigo-700 rounded-lg md:py-12 md:px-12 lg:py-16 lg:px-16 xl:flex xl:items-center">
|
||||
<div class="xl:w-0 xl:flex-1">
|
||||
<h2 class="text-2xl leading-8 font-extrabold tracking-tight text-white sm:text-3xl sm:leading-9">
|
||||
Want products news and updates?
|
||||
</h2>
|
||||
<p class="mt-3 max-w-3xl text-lg leading-6 text-indigo-200" id="newsletter-headline">
|
||||
Sign up for our newsletter to stay up to date.
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-8 sm:w-full sm:max-w-md xl:mt-0 xl:ml-8">
|
||||
<form class="sm:flex" aria-labelledby="newsletter-headline">
|
||||
<input aria-label="Email address" type="email" required class="appearance-none w-full px-5 py-3 border border-transparent text-base leading-6 rounded-md text-gray-900 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 transition duration-150 ease-in-out" placeholder="Enter your email" />
|
||||
<div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3 sm:flex-shrink-0">
|
||||
<button class="w-full flex items-center justify-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-indigo-500 hover:bg-indigo-400 focus:outline-none focus:bg-indigo-400 transition duration-150 ease-in-out">
|
||||
Notify me
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<p class="mt-3 text-sm leading-5 text-indigo-200">
|
||||
We care about the protection of your data. Read our
|
||||
<a href="#" class="text-white font-medium underline">
|
||||
Privacy Policy.
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,35 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="bg-gray-800">
|
||||
<div class="max-w-screen-xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center">
|
||||
<div class="lg:w-0 lg:flex-1">
|
||||
<h2 class="text-3xl leading-9 font-extrabold tracking-tight text-white sm:text-4xl sm:leading-10" id="newsletter-headline">
|
||||
Sign up for our newsletter
|
||||
</h2>
|
||||
<p class="mt-3 max-w-3xl text-lg leading-6 text-gray-300">
|
||||
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui Lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat.
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-8 lg:mt-0 lg:ml-8">
|
||||
<form class="sm:flex" aria-labelledby="newsletter-headline">
|
||||
<input aria-label="Email address" type="email" required class="appearance-none w-full px-5 py-3 border border-transparent text-base leading-6 rounded-md text-gray-900 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 transition duration-150 ease-in-out sm:max-w-xs" placeholder="Enter your email" />
|
||||
<div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3 sm:flex-shrink-0">
|
||||
<button class="w-full flex items-center justify-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-indigo-500 hover:bg-indigo-400 focus:outline-none focus:bg-indigo-400 transition duration-150 ease-in-out">
|
||||
Notify me
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<p class="mt-3 text-sm leading-5 text-gray-300">
|
||||
We care about the protection of your data. Read our
|
||||
<a href="#" class="text-white font-medium underline">
|
||||
Privacy Policy.
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,212 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="bg-white">
|
||||
<div class="max-w-screen-xl mx-auto py-24 px-4 sm:px-6 lg:px-8">
|
||||
<div class="sm:flex sm:flex-col sm:align-center">
|
||||
<h1 class="text-5xl leading-none font-extrabold text-gray-900 sm:text-center">Pricing Plans</h1>
|
||||
<p class="mt-5 text-xl leading-7 text-gray-500 sm:text-center">Start building for free, then add a site plan to go live. Account plans unlock additional features.</p>
|
||||
<div class="relative self-center mt-6 bg-gray-100 rounded-lg p-0.5 flex sm:mt-8">
|
||||
<button type="button" class="relative w-1/2 bg-white border-gray-200 rounded-md shadow-sm py-2 text-sm leading-5 font-medium text-gray-700 whitespace-no-wrap hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue focus:z-10 active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150 sm:w-auto sm:px-8">Monthly billing</button>
|
||||
<button type="button" class="relative w-1/2 border border-transparent rounded-md py-2 text-sm leading-5 font-medium text-gray-700 whitespace-no-wrap hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue focus:z-10 active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150 sm:w-auto sm:px-8">Yearly billing</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-12 space-y-4 sm:mt-16 sm:space-y-0 sm:grid sm:grid-cols-2 sm:gap-6 lg:max-w-4xl lg:mx-auto xl:max-w-none xl:mx-0 xl:grid-cols-4">
|
||||
<div class="border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200">
|
||||
<div class="p-6">
|
||||
<h2 class="text-lg leading-6 font-medium text-gray-900">Hobby</h2>
|
||||
<p class="mt-4 text-sm leading-5 text-gray-500">All the basics for starting a new business</p>
|
||||
<p class="mt-8">
|
||||
<span class="text-4xl leading-10 font-extrabold text-gray-900">$12</span>
|
||||
<span class="text-base leading-6 font-medium text-gray-500">/mo</span>
|
||||
</p>
|
||||
<button type="button" class="mt-8 w-full bg-gray-800 border border-gray-800 rounded-md py-2 text-sm leading-5 font-semibold text-white hover:bg-gray-700 focus:outline-none focus:shadow-outline-gray transition duration-150 ease-in-out">Buy Hobby</button>
|
||||
</div>
|
||||
<div class="pt-6 pb-8 px-6">
|
||||
<h3 class="text-xs leading-4 font-medium text-gray-900 tracking-wide uppercase">What's included</h3>
|
||||
<ul class="mt-6 space-y-4">
|
||||
<li class="flex space-x-3">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="flex-shrink-0 h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="text-sm leading-5 text-gray-500">Potenti felis, in cras at at ligula nunc.</span>
|
||||
</li>
|
||||
|
||||
<li class="flex space-x-3">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="flex-shrink-0 h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="text-sm leading-5 text-gray-500">Orci neque eget pellentesque.</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200">
|
||||
<div class="p-6">
|
||||
<h2 class="text-lg leading-6 font-medium text-gray-900">Freelancer</h2>
|
||||
<p class="mt-4 text-sm leading-5 text-gray-500">All the basics for starting a new business</p>
|
||||
<p class="mt-8">
|
||||
<span class="text-4xl leading-10 font-extrabold text-gray-900">$24</span>
|
||||
<span class="text-base leading-6 font-medium text-gray-500">/mo</span>
|
||||
</p>
|
||||
<button type="button" class="mt-8 w-full bg-gray-800 border border-gray-800 rounded-md py-2 text-sm leading-5 font-semibold text-white hover:bg-gray-700 focus:outline-none focus:shadow-outline-gray transition duration-150 ease-in-out">Buy Freelancer</button>
|
||||
</div>
|
||||
<div class="pt-6 pb-8 px-6">
|
||||
<h3 class="text-xs leading-4 font-medium text-gray-900 tracking-wide uppercase">What's included</h3>
|
||||
<ul class="mt-6 space-y-4">
|
||||
<li class="flex space-x-3">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="flex-shrink-0 h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="text-sm leading-5 text-gray-500">Potenti felis, in cras at at ligula nunc. </span>
|
||||
</li>
|
||||
|
||||
<li class="flex space-x-3">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="flex-shrink-0 h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="text-sm leading-5 text-gray-500">Orci neque eget pellentesque.</span>
|
||||
</li>
|
||||
|
||||
<li class="flex space-x-3">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="flex-shrink-0 h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="text-sm leading-5 text-gray-500">Donec mauris sit in eu tincidunt etiam.</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200">
|
||||
<div class="p-6">
|
||||
<h2 class="text-lg leading-6 font-medium text-gray-900">Startup</h2>
|
||||
<p class="mt-4 text-sm leading-5 text-gray-500">All the basics for starting a new business</p>
|
||||
<p class="mt-8">
|
||||
<span class="text-4xl leading-10 font-extrabold text-gray-900">$32</span>
|
||||
<span class="text-base leading-6 font-medium text-gray-500">/mo</span>
|
||||
</p>
|
||||
<button type="button" class="mt-8 w-full bg-gray-800 border border-gray-800 rounded-md py-2 text-sm leading-5 font-semibold text-white hover:bg-gray-700 focus:outline-none focus:shadow-outline-gray transition duration-150 ease-in-out">Buy Startup</button>
|
||||
</div>
|
||||
<div class="pt-6 pb-8 px-6">
|
||||
<h3 class="text-xs leading-4 font-medium text-gray-900 tracking-wide uppercase">What's included</h3>
|
||||
<ul class="mt-6 space-y-4">
|
||||
<li class="flex space-x-3">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="flex-shrink-0 h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="text-sm leading-5 text-gray-500">Potenti felis, in cras at at ligula nunc. </span>
|
||||
</li>
|
||||
|
||||
<li class="flex space-x-3">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="flex-shrink-0 h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="text-sm leading-5 text-gray-500">Orci neque eget pellentesque.</span>
|
||||
</li>
|
||||
|
||||
<li class="flex space-x-3">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="flex-shrink-0 h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="text-sm leading-5 text-gray-500">Donec mauris sit in eu tincidunt etiam.</span>
|
||||
</li>
|
||||
|
||||
<li class="flex space-x-3">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="flex-shrink-0 h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="text-sm leading-5 text-gray-500">Faucibus volutpat magna.</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200">
|
||||
<div class="p-6">
|
||||
<h2 class="text-lg leading-6 font-medium text-gray-900">Enterprise</h2>
|
||||
<p class="mt-4 text-sm leading-5 text-gray-500">All the basics for starting a new business</p>
|
||||
<p class="mt-8">
|
||||
<span class="text-4xl leading-10 font-extrabold text-gray-900">$48</span>
|
||||
<span class="text-base leading-6 font-medium text-gray-500">/mo</span>
|
||||
</p>
|
||||
<button type="button" class="mt-8 w-full bg-gray-800 border border-gray-800 rounded-md py-2 text-sm leading-5 font-semibold text-white hover:bg-gray-700 focus:outline-none focus:shadow-outline-gray transition duration-150 ease-in-out">Buy Enterprise</button>
|
||||
</div>
|
||||
<div class="pt-6 pb-8 px-6">
|
||||
<h3 class="text-xs leading-4 font-medium text-gray-900 tracking-wide uppercase">What's included</h3>
|
||||
<ul class="mt-6 space-y-4">
|
||||
<li class="flex space-x-3">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="flex-shrink-0 h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="text-sm leading-5 text-gray-500">Potenti felis, in cras at at ligula nunc. </span>
|
||||
</li>
|
||||
|
||||
<li class="flex space-x-3">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="flex-shrink-0 h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="text-sm leading-5 text-gray-500">Orci neque eget pellentesque.</span>
|
||||
</li>
|
||||
|
||||
<li class="flex space-x-3">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="flex-shrink-0 h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="text-sm leading-5 text-gray-500">Donec mauris sit in eu tincidunt etiam.</span>
|
||||
</li>
|
||||
|
||||
<li class="flex space-x-3">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="flex-shrink-0 h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="text-sm leading-5 text-gray-500">Faucibus volutpat magna.</span>
|
||||
</li>
|
||||
|
||||
<li class="flex space-x-3">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="flex-shrink-0 h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="text-sm leading-5 text-gray-500">Id sed tellus in varius quisque.</span>
|
||||
</li>
|
||||
|
||||
<li class="flex space-x-3">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="flex-shrink-0 h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="text-sm leading-5 text-gray-500">Risus egestas faucibus.</span>
|
||||
</li>
|
||||
|
||||
<li class="flex space-x-3">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="flex-shrink-0 h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="text-sm leading-5 text-gray-500">Risus cursus ullamcorper.</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
484
tailwindui/components/marketing/sections/pricing/index.html
Normal file
484
tailwindui/components/marketing/sections/pricing/index.html
Normal file
@@ -0,0 +1,484 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Tailwind UI Components</title>
|
||||
<link href="https://fonts.googleapis.com/css?family=Inter&display=swap" rel="stylesheet"/>
|
||||
<link href="https://cdn.jsdelivr.net/npm/@tailwindcss/ui@latest/dist/tailwind-ui.min.css" rel="stylesheet"/>
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.0.1/dist/alpine.js" defer></script>
|
||||
<link href="https://cdn.jsdelivr.net/npm/highlightjs-themes@1.0.0/darkula.css" rel="stylesheet"/>
|
||||
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/highlight.min.js"></script>
|
||||
<style>
|
||||
* { box-sizing: border-box; }
|
||||
.font-sans { font-family: "Inter", sans-serif; }
|
||||
.hljs {
|
||||
background: #252f3f;
|
||||
color: white;
|
||||
}
|
||||
.hljs-tag {
|
||||
color: white;
|
||||
}
|
||||
.hljs-name {
|
||||
color: #ff8383;
|
||||
}
|
||||
.hljs-attr {
|
||||
color: #ffe484;
|
||||
font-style: italic;
|
||||
}
|
||||
.hljs-string {
|
||||
color: #b5f4a5;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="font-sans antialiased text-gray-900">
|
||||
<main>
|
||||
<div class="py-4 sm:py-12">
|
||||
<div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="pb-2">
|
||||
<nav class="flex items-center text-sm leading-5 font-medium">
|
||||
<a href="/#marketing" class="text-gray-500 hover:text-gray-700 focus:outline-none focus:underline transition duration-150 ease-in-out">
|
||||
Marketing
|
||||
</a>
|
||||
<svg class="flex-shrink-0 mx-2 h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<a href="/#marketing-page-sections" class="text-gray-500 hover:text-gray-700 focus:outline-none focus:underline transition duration-150 ease-in-out">
|
||||
Page Sections
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
<h2 class="text-2xl leading-8 font-semibold font-display text-gray-900 sm:text-3xl sm:leading-9">
|
||||
Pricing Sections
|
||||
</h2>
|
||||
</div>
|
||||
<div class="mt-6 bg-white max-w-8xl mx-auto sm:px-6 lg:px-8">
|
||||
<div class="max-w-8xl mx-auto">
|
||||
|
||||
<div id="component-c2efafac146b58043f3c53363f33ce607dbea90c" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-c2efafac146b58043f3c53363f33ce607dbea90c">Four tiers with toggle</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/pricing/four_tiers_with_toggle.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-2076a3878c2872e384dc38dc6930d9eddba66416" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-2076a3878c2872e384dc38dc6930d9eddba66416">Single price with details</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/pricing/single_price_with_details.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-06a5e060e2f7b4885a2bafa09cc69f6060650479" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-06a5e060e2f7b4885a2bafa09cc69f6060650479">Single price with feature list</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/pricing/single_price_with_feature_list.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-bed56aeedaa7014a1f27275f4fe87a2a4b7a04c6" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-bed56aeedaa7014a1f27275f4fe87a2a4b7a04c6">Split with brand panel</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/pricing/split_with_brand_panel.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-8042dd299873de5d1f461ee7c4f01a09d7fd6b3e" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-8042dd299873de5d1f461ee7c4f01a09d7fd6b3e">Three tiers with emphasized tier</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/pricing/three_tiers_with_emphasized_tier.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-7114f8f135a583e38aac0d228ef5a9bbe99309b8" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-7114f8f135a583e38aac0d228ef5a9bbe99309b8">Two tiers with extra tier</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/pricing/two_tiers_with_extra_tier.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-9976c6ca1255c79a3d1a80863d3eec8d7156f63f" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-9976c6ca1255c79a3d1a80863d3eec8d7156f63f">With comparison table</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/pricing/with_comparison_table.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
(function() {
|
||||
const getDocHeight = doc => {
|
||||
doc = doc || document;
|
||||
const body = doc.body;
|
||||
const html = doc.documentElement;
|
||||
const height = Math.max(
|
||||
body.scrollHeight,
|
||||
body.offsetHeight,
|
||||
html.clientHeight,
|
||||
html.scrollHeight,
|
||||
html.offsetHeight
|
||||
);
|
||||
return height;
|
||||
};
|
||||
|
||||
window.resizableIFrame = function() {
|
||||
return {
|
||||
resizing: !1,
|
||||
width: "100%",
|
||||
init: function() {}
|
||||
};
|
||||
};
|
||||
const iframes = document.querySelectorAll("iframe");
|
||||
Array.from(iframes).forEach(iframe => {
|
||||
iframe.addEventListener("load", e => {
|
||||
const iframe = e.srcElement;
|
||||
const doc = iframe.contentDocument || iframe.contentWindow.document;
|
||||
doc.body.classList.add("antialiased", "font-sans", "bg-white")
|
||||
iframe.style.visibility = "hidden";
|
||||
iframe.style.height = "10px";
|
||||
const height = Math.max(getDocHeight(doc), 256) + "px";
|
||||
iframe.style.height = height;
|
||||
iframe.style.visibility = "visible";
|
||||
|
||||
const html = doc.body.innerHTML.trim();
|
||||
const container = iframe.parentElement.parentElement.parentElement;
|
||||
hljs.configure({useBR: false, tabReplace: ' '});
|
||||
const highlighted = hljs.highlight('html', html);
|
||||
const codeElem = container.children[1].querySelector("code");
|
||||
codeElem.innerHTML = highlighted.value;
|
||||
});
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,125 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="bg-gray-100">
|
||||
<div class="pt-12 sm:pt-16 lg:pt-20">
|
||||
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center">
|
||||
<h2 class="text-3xl leading-9 font-extrabold text-gray-900 sm:text-4xl sm:leading-10 lg:text-5xl lg:leading-none">
|
||||
Simple no-tricks pricing
|
||||
</h2>
|
||||
<p class="mt-4 text-xl leading-7 text-gray-600">
|
||||
If you're not satisfied, contact us within the first 14 days and we'll send you a full refund.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-8 bg-white pb-16 sm:mt-12 sm:pb-20 lg:pb-28">
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 h-1/2 bg-gray-100"></div>
|
||||
<div class="relative max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-lg mx-auto rounded-lg shadow-lg overflow-hidden lg:max-w-none lg:flex">
|
||||
<div class="flex-1 bg-white px-6 py-8 lg:p-12">
|
||||
<h3 class="text-2xl leading-8 font-extrabold text-gray-900 sm:text-3xl sm:leading-9">
|
||||
Lifetime Membership
|
||||
</h3>
|
||||
<p class="mt-6 text-base leading-6 text-gray-500">
|
||||
Lorem ipsum dolor sit amet consect etur adipisicing elit. Itaque amet indis perferendis blanditiis repellendus etur quidem assumenda.
|
||||
</p>
|
||||
<div class="mt-8">
|
||||
<div class="flex items-center">
|
||||
<h4 class="flex-shrink-0 pr-4 bg-white text-sm leading-5 tracking-wider font-semibold uppercase text-indigo-600">
|
||||
What's included
|
||||
</h4>
|
||||
<div class="flex-1 border-t-2 border-gray-200"></div>
|
||||
</div>
|
||||
<ul class="mt-8 lg:grid lg:grid-cols-2 lg:gap-x-8 lg:gap-y-5">
|
||||
<li class="flex items-start lg:col-span-1">
|
||||
<div class="flex-shrink-0">
|
||||
<!-- Heroicon name: check-circle -->
|
||||
<svg class="h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="ml-3 text-sm leading-5 text-gray-700">
|
||||
Private forum access
|
||||
</p>
|
||||
</li>
|
||||
<li class="mt-5 flex items-start lg:col-span-1 lg:mt-0">
|
||||
<div class="flex-shrink-0">
|
||||
<!-- Heroicon name: check-circle -->
|
||||
<svg class="h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="ml-3 text-sm leading-5 text-gray-700">
|
||||
Member resources
|
||||
</p>
|
||||
</li>
|
||||
<li class="mt-5 flex items-start lg:col-span-1 lg:mt-0">
|
||||
<div class="flex-shrink-0">
|
||||
<!-- Heroicon name: check-circle -->
|
||||
<svg class="h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="ml-3 text-sm leading-5 text-gray-700">
|
||||
Entry to annual conference
|
||||
</p>
|
||||
</li>
|
||||
<li class="mt-5 flex items-start lg:col-span-1 lg:mt-0">
|
||||
<div class="flex-shrink-0">
|
||||
<!-- Heroicon name: check-circle -->
|
||||
<svg class="h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="ml-3 text-sm leading-5 text-gray-700">
|
||||
Official member t-shirt
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="py-8 px-6 text-center bg-gray-50 lg:flex-shrink-0 lg:flex lg:flex-col lg:justify-center lg:p-12">
|
||||
<p class="text-lg leading-6 font-medium text-gray-900">
|
||||
Pay once, own it forever
|
||||
</p>
|
||||
<div class="mt-4 flex items-center justify-center text-5xl leading-none font-extrabold text-gray-900">
|
||||
<span>
|
||||
$349
|
||||
</span>
|
||||
<span class="ml-3 text-xl leading-7 font-medium text-gray-500">
|
||||
USD
|
||||
</span>
|
||||
</div>
|
||||
<p class="mt-4 text-sm leading-5">
|
||||
<a href="#" class="font-medium text-gray-500 underline">
|
||||
Learn about our membership policy
|
||||
</a>
|
||||
</p>
|
||||
<div class="mt-6">
|
||||
<div class="rounded-md shadow">
|
||||
<a href="#" class="flex items-center justify-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-gray-900 hover:bg-gray-800 focus:outline-none focus:shadow-outline transition duration-150 ease-in-out">
|
||||
Get Access
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 text-sm leading-5">
|
||||
<a href="#" class="font-medium text-gray-900">
|
||||
Get a free sample
|
||||
<span class="font-normal text-gray-500">
|
||||
(20MB)
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,104 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="bg-white">
|
||||
<div class="max-w-screen-xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
|
||||
<div class="pb-16 xl:flex xl:items-center xl:justify-between">
|
||||
<div>
|
||||
<h1 class="text-4xl leading-10 font-extrabold sm:text-5xl sm:leading-none sm:tracking-tight">
|
||||
<span class="text-gray-900">Everything you need for </span>
|
||||
<span class="text-indigo-600">$99 a month</span>
|
||||
</h1>
|
||||
<p class="mt-5 text-xl leading-7 text-gray-500">Includes every feature we offer plus unlimited projects and unlimited users.</p>
|
||||
</div>
|
||||
<a href="#" class="mt-8 w-full bg-indigo-600 border border-transparent px-5 py-3 inline-flex items-center justify-center text-base leading-6 font-medium rounded-md text-white hover:bg-indigo-500 focus:outline-none focus:shadow-outline transition duration-150 ease-in-out sm:mt-10 sm:w-auto xl:mt-0">Get started today</a>
|
||||
</div>
|
||||
<div class="border-t border-gray-200 pt-16 xl:grid xl:grid-cols-3 xl:gap-x-8">
|
||||
<div>
|
||||
<h2 class="text-base leading-6 font-semibold text-indigo-600 tracking-wide uppercase">Everything you need</h2>
|
||||
<p class="mt-2 text-3xl leading-9 font-extrabold text-gray-900">All-in-one platform</p>
|
||||
<p class="mt-4 text-lg leading-7 text-gray-500">Ac euismod vel sit maecenas id pellentesque eu sed consectetur. Malesuada adipiscing sagittis vel nulla nec. Urna, sed a lectus elementum blandit et.</p>
|
||||
</div>
|
||||
<div class="mt-4 sm:mt-8 md:mt-10 md:grid md:grid-cols-2 md:gap-x-8 xl:mt-0 xl:col-span-2">
|
||||
<ul class="divide-y divide-gray-200">
|
||||
<li class="py-4 flex space-x-3 md:py-0 md:pb-4">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-6 w-6 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span class="text-base leading-6 text-gray-500">Vitae in pulvinar odio id utobortis in inter.</span>
|
||||
</li>
|
||||
<li class="py-4 flex space-x-3">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-6 w-6 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span class="text-base leading-6 text-gray-500">Sed sed id viverra viverra augue eget massa.</span>
|
||||
</li>
|
||||
<li class="py-4 flex space-x-3">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-6 w-6 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span class="text-base leading-6 text-gray-500">Urna, gravida amet, a, integer venenatis.</span>
|
||||
</li>
|
||||
<li class="py-4 flex space-x-3">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-6 w-6 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span class="text-base leading-6 text-gray-500">Lobortis sed pharetra amet vitae eleifend.</span>
|
||||
</li>
|
||||
<li class="py-4 flex space-x-3">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-6 w-6 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span class="text-base leading-6 text-gray-500">Ullamcorper blandit a consequat donec elit aoreet.</span>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="border-t border-gray-200 divide-y divide-gray-200 md:border-t-0">
|
||||
<li class="py-4 flex space-x-3 md:border-t-0 md:py-0 md:pb-4">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-6 w-6 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span class="text-base leading-6 text-gray-500">Vitae in pulvinar odio id utobortis in inter.</span>
|
||||
</li>
|
||||
<li class="py-4 flex space-x-3">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-6 w-6 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span class="text-base leading-6 text-gray-500">Sed sed id viverra viverra augue eget massa.</span>
|
||||
</li>
|
||||
<li class="py-4 flex space-x-3">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-6 w-6 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span class="text-base leading-6 text-gray-500">Urna, gravida amet, a, integer venenatis.</span>
|
||||
</li>
|
||||
<li class="py-4 flex space-x-3">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-6 w-6 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span class="text-base leading-6 text-gray-500">Lobortis sed pharetra amet vitae eleifend.</span>
|
||||
</li>
|
||||
<li class="py-4 flex space-x-3">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-6 w-6 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span class="text-base leading-6 text-gray-500">Ullamcorper blandit a consequat donec elit aoreet.</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,167 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="relative bg-white">
|
||||
<div class="absolute inset-0" aria-hidden="true">
|
||||
<div class="absolute inset-y-0 right-0 w-1/2 bg-indigo-700"></div>
|
||||
</div>
|
||||
<div class="relative max-w-screen-xl mx-auto lg:px-8 lg:grid lg:grid-cols-2">
|
||||
<div class="bg-white py-16 px-4 sm:py-24 sm:px-6 lg:px-0 lg:pr-8">
|
||||
<div class="max-w-lg mx-auto lg:mx-0">
|
||||
<h2 class="text-base leading-6 font-semibold tracking-wide text-indigo-600 uppercase">
|
||||
Full-featured
|
||||
</h2>
|
||||
<p class="mt-2 text-2xl leading-8 font-extrabold text-gray-900 sm:text-3xl sm:leading-9">Everything you need to talk with your customers</p>
|
||||
<dl class="mt-12 space-y-10">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0 h-12 w-12 flex items-center justify-center bg-indigo-500 rounded-md">
|
||||
<!-- Heroicon name: view-list -->
|
||||
<svg class="h-6 w-6 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<dt class="text-lg leading-6 font-medium text-gray-900">
|
||||
List view
|
||||
</dt>
|
||||
<dd class="mt-2 text-base leading-6 text-gray-500">
|
||||
Nunc a, lacinia sed risus neque, arcu, rhoncus. Id mauris justo facilisis aliquam platea vestibulum condimentum morbi.
|
||||
</dd>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0 h-12 w-12 flex items-center justify-center bg-indigo-500 rounded-md">
|
||||
<!-- Heroicon name: view-boards -->
|
||||
<svg class="h-6 w-6 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<dt class="text-lg leading-6 font-medium text-gray-900">
|
||||
Boards
|
||||
</dt>
|
||||
<dd class="mt-2 text-base leading-6 text-gray-500">
|
||||
Purus lobortis volutpat posuere id integer nunc tellus. Non mauris malesuada feugiat massa mi pellentesque cum est. Pharetra a varius urna rhoncus, tempor rutrum.
|
||||
</dd>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0 h-12 w-12 flex items-center justify-center bg-indigo-500 rounded-md">
|
||||
<!-- Heroicon name: calendar -->
|
||||
<svg class="h-6 w-6 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<dt class="text-lg leading-6 font-medium text-gray-900">
|
||||
Calendar
|
||||
</dt>
|
||||
<dd class="mt-2 text-base leading-6 text-gray-500">
|
||||
Purus lobortis volutpat posuere id integer nunc tellus. Non mauris malesuada feugiat massa mi pellentesque cum est. Pharetra a varius urna rhoncus, tempor rutrum.
|
||||
</dd>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0 h-12 w-12 flex items-center justify-center bg-indigo-500 rounded-md">
|
||||
<!-- Heroicon name: users -->
|
||||
<svg class="h-6 w-6 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<dt class="text-lg leading-6 font-medium text-gray-900">
|
||||
Teams
|
||||
</dt>
|
||||
<dd class="mt-2 text-base leading-6 text-gray-500">
|
||||
Tincidunt sollicitudin interdum nunc sit risus at bibendum vitae. Urna, quam ut sit justo non, consectetur et varius.
|
||||
</dd>
|
||||
</div>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-indigo-700 py-16 px-4 sm:py-24 sm:px-6 lg:bg-none lg:px-0 lg:pl-8 lg:flex lg:items-center lg:justify-end">
|
||||
<div class="max-w-lg mx-auto w-full space-y-8 lg:mx-0">
|
||||
<div>
|
||||
<h2 class="sr-only">Price</h2>
|
||||
<p class="relative grid grid-cols-2">
|
||||
<span class="flex flex-col text-center">
|
||||
<span class="text-5xl leading-none font-extrabold text-white tracking-tight">$99</span>
|
||||
<span class="mt-2 text-base leading-6 font-medium text-indigo-300">Setup fee</span>
|
||||
<span class="sr-only">plus</span>
|
||||
</span>
|
||||
<span class="pointer-events-none absolute h-12 w-full flex items-center justify-center" aria-hidden="true">
|
||||
<!-- Heroicon name: plus -->
|
||||
<svg class="h-6 w-6 text-indigo-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
<span class="flex flex-col text-center">
|
||||
<span class="text-5xl leading-none font-extrabold text-white tracking-tight">$4</span>
|
||||
<span class="mt-2 text-base leading-6 font-medium text-indigo-300">Per month</span>
|
||||
</span>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<ul class="bg-indigo-800 bg-opacity-25 rounded sm:grid sm:grid-cols-2 sm:grid-rows-3 sm:grid-flow-col">
|
||||
<li class="py-4 px-4 flex items-center space-x-3 text-base leading-6 text-white">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-6 w-6 text-indigo-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>Unlimited Projects</span>
|
||||
</li>
|
||||
<li class="border-t border-indigo-600 py-4 px-4 flex items-center space-x-3 text-base leading-6 text-white">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-6 w-6 text-indigo-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>Unlimited storage</span>
|
||||
</li>
|
||||
<li class="border-t border-indigo-600 py-4 px-4 flex items-center space-x-3 text-base leading-6 text-white">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-6 w-6 text-indigo-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>Cancel anytime</span>
|
||||
</li>
|
||||
<li class="border-t border-indigo-600 py-4 px-4 flex items-center space-x-3 text-base leading-6 text-white sm:border-t-0 sm:border-l">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-6 w-6 text-indigo-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>No per user fees</span>
|
||||
</li>
|
||||
<li class="border-t border-indigo-600 py-4 px-4 flex items-center space-x-3 text-base leading-6 text-white sm:border-l">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-6 w-6 text-indigo-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>24/7 support</span>
|
||||
</li>
|
||||
<li class="border-t border-indigo-600 py-4 px-4 flex items-center space-x-3 text-base leading-6 text-white sm:border-l">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-6 w-6 text-indigo-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>Cancel anytime</span>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="#" class="bg-white border border-transparent rounded-md w-full px-8 py-4 flex items-center justify-center text-lg leading-6 font-medium text-indigo-600 hover:text-indigo-500 transition duration-150 ease-in-out md:px-10">
|
||||
Get started today
|
||||
</a>
|
||||
<a href="#" class="block text-center text-base leading-6 font-medium text-indigo-300 hover:text-white transition duration-150 ease-in-out">
|
||||
Try Workflow Lite for free
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,264 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="bg-gray-900">
|
||||
<div class="pt-12 px-4 sm:px-6 lg:px-8 lg:pt-20">
|
||||
<div class="text-center">
|
||||
<h2 class="text-lg leading-6 font-semibold text-gray-300 uppercase tracking-wider">
|
||||
Pricing
|
||||
</h2>
|
||||
<p class="mt- text-3xl leading-9 font-extrabold text-white sm:text-4xl sm:leading-10 lg:text-5xl lg:leading-none">
|
||||
The right price for you, whoever you are
|
||||
</p>
|
||||
<p class="mt-3 max-w-4xl mx-auto text-xl leading-7 text-gray-300 sm:mt-5 sm:text-2xl sm:leading-8">
|
||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos odit doloribus molestiae voluptatum.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-16 bg-white pb-12 lg:mt-20 lg:pb-20">
|
||||
<div class="relative z-0">
|
||||
<div class="absolute inset-0 h-5/6 bg-gray-900 lg:h-2/3"></div>
|
||||
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="relative lg:grid lg:grid-cols-7">
|
||||
<div class="mx-auto max-w-md lg:mx-0 lg:max-w-none lg:col-start-1 lg:col-end-3 lg:row-start-2 lg:row-end-3">
|
||||
<div class="h-full flex flex-col rounded-lg shadow-lg overflow-hidden lg:rounded-none lg:rounded-l-lg">
|
||||
<div class="flex-1 flex flex-col">
|
||||
<div class="bg-white px-6 py-10">
|
||||
<div>
|
||||
<h3 class="text-center text-2xl leading-8 font-medium text-gray-900" id="tier-hobby">
|
||||
Hobby
|
||||
</h3>
|
||||
<div class="mt-4 flex items-center justify-center">
|
||||
<span class="px-3 flex items-start text-6xl leading-none tracking-tight text-gray-900">
|
||||
<span class="mt-2 mr-2 text-4xl font-medium">
|
||||
$
|
||||
</span>
|
||||
<span class="font-extrabold">
|
||||
79
|
||||
</span>
|
||||
</span>
|
||||
<span class="text-xl leading-7 font-medium text-gray-500">
|
||||
/month
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col justify-between border-t-2 border-gray-100 p-6 bg-gray-50 sm:p-10 lg:p-6 xl:p-10">
|
||||
<ul>
|
||||
<li class="flex items-start">
|
||||
<div class="flex-shrink-0">
|
||||
<svg class="h-6 w-6 text-green-500" stroke="currentColor" fill="none" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="ml-3 text-base leading-6 font-medium text-gray-500">
|
||||
Pariatur quod similique
|
||||
</p>
|
||||
</li>
|
||||
<li class="mt-4 flex items-start">
|
||||
<div class="flex-shrink-0">
|
||||
<svg class="h-6 w-6 text-green-500" stroke="currentColor" fill="none" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="ml-3 text-base leading-6 font-medium text-gray-500">
|
||||
Sapiente libero doloribus
|
||||
</p>
|
||||
</li>
|
||||
<li class="mt-4 flex items-start">
|
||||
<div class="flex-shrink-0">
|
||||
<svg class="h-6 w-6 text-green-500" stroke="currentColor" fill="none" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="ml-3 text-base leading-6 font-medium text-gray-500">
|
||||
Vel ipsa esse repudiandae
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="mt-8">
|
||||
<div class="rounded-lg shadow-md">
|
||||
<a href="#" class="block w-full text-center rounded-lg border border-transparent bg-white px-6 py-3 text-base leading-6 font-medium text-indigo-600 hover:text-indigo-500 focus:outline-none focus:shadow-outline transition ease-in-out duration-150" aria-describedby="tier-hobby">
|
||||
Start your trial
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 max-w-lg mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-start-3 lg:col-end-6 lg:row-start-1 lg:row-end-4">
|
||||
<div class="relative z-10 rounded-lg shadow-xl">
|
||||
<div class="pointer-events-none absolute inset-0 rounded-lg border-2 border-indigo-600"></div>
|
||||
<div class="absolute inset-x-0 top-0 transform translate-y-px">
|
||||
<div class="flex justify-center transform -translate-y-1/2">
|
||||
<span class="inline-flex rounded-full bg-indigo-600 px-4 py-1 text-sm leading-5 font-semibold tracking-wider uppercase text-white">
|
||||
Most popular
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-t-lg px-6 pt-12 pb-10">
|
||||
<div>
|
||||
<h3 class="text-center text-3xl leading-9 font-semibold text-gray-900 sm:-mx-6" id="tier-growth">
|
||||
Growth
|
||||
</h3>
|
||||
<div class="mt-4 flex items-center justify-center">
|
||||
<span class="px-3 flex items-start text-6xl leading-none tracking-tight text-gray-900 sm:text-6xl">
|
||||
<span class="mt-2 mr-2 text-4xl font-medium">
|
||||
$
|
||||
</span>
|
||||
<span class="font-extrabold">
|
||||
149
|
||||
</span>
|
||||
</span>
|
||||
<span class="text-2xl leading-8 font-medium text-gray-500">
|
||||
/month
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-t-2 border-gray-100 rounded-b-lg pt-10 pb-8 px-6 bg-gray-50 sm:px-10 sm:py-10">
|
||||
<ul>
|
||||
<li class="flex items-start">
|
||||
<div class="flex-shrink-0">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-6 w-6 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="ml-3 text-base leading-6 font-medium text-gray-500">
|
||||
Quia rem est sed impedit magnam
|
||||
</p>
|
||||
</li>
|
||||
<li class="mt-4 flex items-start">
|
||||
<div class="flex-shrink-0">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-6 w-6 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="ml-3 text-base leading-6 font-medium text-gray-500">
|
||||
Dolorem vero ratione voluptates
|
||||
</p>
|
||||
</li>
|
||||
<li class="mt-4 flex items-start">
|
||||
<div class="flex-shrink-0">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-6 w-6 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="ml-3 text-base leading-6 font-medium text-gray-500">
|
||||
Qui sed ab doloribus voluptatem dolore
|
||||
</p>
|
||||
</li>
|
||||
<li class="mt-4 flex items-start">
|
||||
<div class="flex-shrink-0">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-6 w-6 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="ml-3 text-base leading-6 font-medium text-gray-500">
|
||||
Laborum commodi molestiae id et fugiat
|
||||
</p>
|
||||
</li>
|
||||
<li class="mt-4 flex items-start">
|
||||
<div class="flex-shrink-0">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-6 w-6 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="ml-3 text-base leading-6 font-medium text-gray-500">
|
||||
Nam ut ipsa nesciunt culpa modi dolor
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="mt-10">
|
||||
<div class="rounded-lg shadow-md">
|
||||
<a href="#" class="block w-full text-center rounded-lg border border-transparent bg-indigo-600 px-6 py-4 text-xl leading-6 font-medium text-white hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo transition ease-in-out duration-150" aria-describedby="tier-growth">
|
||||
Start your trial
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 mx-auto max-w-md lg:m-0 lg:max-w-none lg:col-start-6 lg:col-end-8 lg:row-start-2 lg:row-end-3">
|
||||
<div class="h-full flex flex-col rounded-lg shadow-lg overflow-hidden lg:rounded-none lg:rounded-r-lg">
|
||||
<div class="flex-1 flex flex-col">
|
||||
<div class="bg-white px-6 py-10">
|
||||
<div>
|
||||
<h3 class="text-center text-2xl leading-8 font-medium text-gray-900" id="tier-scale">
|
||||
Scale
|
||||
</h3>
|
||||
<div class="mt-4 flex items-center justify-center">
|
||||
<span class="px-3 flex items-start text-6xl leading-none tracking-tight text-gray-900">
|
||||
<span class="mt-2 mr-2 text-4xl font-medium">
|
||||
$
|
||||
</span>
|
||||
<span class="font-extrabold">
|
||||
349
|
||||
</span>
|
||||
</span>
|
||||
<span class="text-xl leading-7 font-medium text-gray-500">
|
||||
/month
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col justify-between border-t-2 border-gray-100 p-6 bg-gray-50 sm:p-10 lg:p-6 xl:p-10">
|
||||
<ul>
|
||||
<li class="flex items-start">
|
||||
<div class="flex-shrink-0">
|
||||
<svg class="h-6 w-6 text-green-500" stroke="currentColor" fill="none" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="ml-3 text-base leading-6 font-medium text-gray-500">
|
||||
Pariatur quod similique
|
||||
</p>
|
||||
</li>
|
||||
<li class="mt-4 flex items-start">
|
||||
<div class="flex-shrink-0">
|
||||
<svg class="h-6 w-6 text-green-500" stroke="currentColor" fill="none" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="ml-3 text-base leading-6 font-medium text-gray-500">
|
||||
Sapiente libero doloribus
|
||||
</p>
|
||||
</li>
|
||||
<li class="mt-4 flex items-start">
|
||||
<div class="flex-shrink-0">
|
||||
<svg class="h-6 w-6 text-green-500" stroke="currentColor" fill="none" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="ml-3 text-base leading-6 font-medium text-gray-500">
|
||||
Vel ipsa esse repudiandae
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="mt-8">
|
||||
<div class="rounded-lg shadow-md">
|
||||
<a href="#" class="block w-full text-center rounded-lg border border-transparent bg-white px-6 py-3 text-base leading-6 font-medium text-indigo-600 hover:text-indigo-500 focus:outline-none focus:shadow-outline transition ease-in-out duration-150" aria-describedby="tier-scale">
|
||||
Start your trial
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,207 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="bg-gray-900">
|
||||
<div class="pt-12 sm:pt-16 lg:pt-24">
|
||||
<div class="max-w-screen-xl mx-auto text-center px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-3xl mx-auto space-y-2 lg:max-w-none">
|
||||
<h2 class="text-lg leading-6 font-semibold text-gray-300 uppercase tracking-wider">
|
||||
Pricing
|
||||
</h2>
|
||||
<p class="text-3xl leading-9 font-extrabold text-white sm:text-4xl sm:leading-10 lg:text-5xl lg:leading-none">
|
||||
The right price for you, whoever you are
|
||||
</p>
|
||||
<p class="text-xl leading-7 text-gray-300">
|
||||
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum sequi unde repudiandae natus.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-8 pb-12 bg-gray-50 sm:mt-12 sm:pb-16 lg:mt-16 lg:pb-24">
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 h-3/4 bg-gray-900"></div>
|
||||
<div class="relative z-10 max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-md mx-auto space-y-4 lg:max-w-5xl lg:grid lg:grid-cols-2 lg:gap-5 lg:space-y-0">
|
||||
<div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
|
||||
<div class="px-6 py-8 bg-white sm:p-10 sm:pb-6">
|
||||
<div>
|
||||
<h3 class="inline-flex px-4 py-1 rounded-full text-sm leading-5 font-semibold tracking-wide uppercase bg-indigo-100 text-indigo-600" id="tier-standard">
|
||||
Standard
|
||||
</h3>
|
||||
</div>
|
||||
<div class="mt-4 flex items-baseline text-6xl leading-none font-extrabold">
|
||||
$49
|
||||
<span class="ml-1 text-2xl leading-8 font-medium text-gray-500">
|
||||
/mo
|
||||
</span>
|
||||
</div>
|
||||
<p class="mt-5 text-lg leading-7 text-gray-500">
|
||||
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col justify-between px-6 pt-6 pb-8 bg-gray-50 space-y-6 sm:p-10 sm:pt-6">
|
||||
<ul class="space-y-4">
|
||||
<li class="flex items-start">
|
||||
<div class="flex-shrink-0">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-6 w-6 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="ml-3 text-base leading-6 text-gray-700">
|
||||
Pariatur quod similique
|
||||
</p>
|
||||
</li>
|
||||
|
||||
<li class="flex items-start">
|
||||
<div class="flex-shrink-0">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-6 w-6 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="ml-3 text-base leading-6 text-gray-700">
|
||||
Sapiente libero doloribus modi nostrum
|
||||
</p>
|
||||
</li>
|
||||
|
||||
<li class="flex items-start">
|
||||
<div class="flex-shrink-0">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-6 w-6 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="ml-3 text-base leading-6 text-gray-700">
|
||||
Vel ipsa esse repudiandae excepturi
|
||||
</p>
|
||||
</li>
|
||||
|
||||
<li class="flex items-start">
|
||||
<div class="flex-shrink-0">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-6 w-6 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="ml-3 text-base leading-6 text-gray-700">
|
||||
Itaque cupiditate adipisci quibusdam
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="rounded-md shadow">
|
||||
<a href="#" class="flex items-center justify-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-gray-900 hover:bg-gray-800 focus:outline-none focus:shadow-outline transition duration-150 ease-in-out" aria-describedby="tier-standard">
|
||||
Get started
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
|
||||
<div class="px-6 py-8 bg-white sm:p-10 sm:pb-6">
|
||||
<div>
|
||||
<h3 class="inline-flex px-4 py-1 rounded-full text-sm leading-5 font-semibold tracking-wide uppercase bg-indigo-100 text-indigo-600" id="tier-standard">
|
||||
Enterprise
|
||||
</h3>
|
||||
</div>
|
||||
<div class="mt-4 flex items-baseline text-6xl leading-none font-extrabold">
|
||||
$79
|
||||
<span class="ml-1 text-2xl leading-8 font-medium text-gray-500">
|
||||
/mo
|
||||
</span>
|
||||
</div>
|
||||
<p class="mt-5 text-lg leading-7 text-gray-500">
|
||||
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col justify-between px-6 pt-6 pb-8 bg-gray-50 space-y-6 sm:p-10 sm:pt-6">
|
||||
<ul class="space-y-4">
|
||||
<li class="flex items-start">
|
||||
<div class="flex-shrink-0">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-6 w-6 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="ml-3 text-base leading-6 text-gray-700">
|
||||
Pariatur quod similique
|
||||
</p>
|
||||
</li>
|
||||
|
||||
<li class="flex items-start">
|
||||
<div class="flex-shrink-0">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-6 w-6 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="ml-3 text-base leading-6 text-gray-700">
|
||||
Sapiente libero doloribus modi nostrum
|
||||
</p>
|
||||
</li>
|
||||
|
||||
<li class="flex items-start">
|
||||
<div class="flex-shrink-0">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-6 w-6 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="ml-3 text-base leading-6 text-gray-700">
|
||||
Vel ipsa esse repudiandae excepturi
|
||||
</p>
|
||||
</li>
|
||||
|
||||
<li class="flex items-start">
|
||||
<div class="flex-shrink-0">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-6 w-6 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="ml-3 text-base leading-6 text-gray-700">
|
||||
Itaque cupiditate adipisci quibusdam
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="rounded-md shadow">
|
||||
<a href="#" class="flex items-center justify-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-gray-900 hover:bg-gray-800 focus:outline-none focus:shadow-outline transition duration-150 ease-in-out" aria-describedby="tier-standard">
|
||||
Get started
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 relative max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8 lg:mt-5">
|
||||
<div class="max-w-md mx-auto lg:max-w-5xl">
|
||||
<div class="rounded-lg bg-gray-100 px-6 py-8 sm:p-10 lg:flex lg:items-center">
|
||||
<div class="flex-1">
|
||||
<div>
|
||||
<h3 class="inline-flex px-4 py-1 rounded-full text-sm leading-5 font-semibold tracking-wide uppercase bg-white text-gray-800">
|
||||
Discounted
|
||||
</h3>
|
||||
</div>
|
||||
<div class="mt-4 text-lg leading-7 text-gray-600">
|
||||
Get full access to all of standard license features for solo projects that make less than $20k gross revenue for
|
||||
<strong class="font-semibold text-gray-900">
|
||||
$29
|
||||
</strong>
|
||||
.
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 rounded-md shadow lg:mt-0 lg:ml-10 lg:flex-shrink-0">
|
||||
<a href="#" class="flex items-center justify-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-gray-900 bg-white hover:text-gray-700 focus:outline-none focus:shadow-outline transition duration-150 ease-in-out">
|
||||
Buy Discounted License
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,991 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="bg-white">
|
||||
<div class="max-w-screen-xl mx-auto bg-white py-16 sm:py-24 sm:px-6 lg:px-8">
|
||||
<!-- xs to lg -->
|
||||
<div class="max-w-2xl mx-auto lg:hidden">
|
||||
<div class="px-4">
|
||||
<h2 class="text-lg leading-6 font-medium text-gray-900">Basic</h2>
|
||||
<p class="mt-4">
|
||||
<span class="text-4xl leading-10 font-extrabold text-gray-900">$9</span>
|
||||
<span class="text-base leading-6 font-medium text-gray-500">/mo</span>
|
||||
</p>
|
||||
<p class="mt-4 text-sm leading-5 text-gray-500">Quis suspendisse ut fermentum neque vivamus non tellus.</p>
|
||||
<button type="button" class="mt-6 border border-gray-800 rounded-md bg-gray-800 w-full py-2 text-sm leading-5 font-semibold text-white hover:bg-gray-700 focus:outline-none focus:shadow-outline-gray transition duration-150 ease-in-out">Buy Basic</button>
|
||||
</div>
|
||||
|
||||
<table class="mt-8 w-full">
|
||||
<caption class="bg-gray-50 border-t border-gray-200 py-3 px-4 text-sm leading-5 font-medium text-gray-900 text-left">
|
||||
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-sm leading-5 font-normal text-gray-500 text-left" scope="row">Molestie lobortis massa.</th>
|
||||
<td class="py-5 pr-4">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="ml-auto h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" 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-sm leading-5 font-normal text-gray-500 text-left" scope="row">Urna purus felis.</th>
|
||||
<td class="py-5 pr-4">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="ml-auto h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" 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-sm leading-5 font-normal text-gray-500 text-left" scope="row">Tellus pulvinar sit dictum.</th>
|
||||
<td class="py-5 pr-4">
|
||||
<!-- Heroicon name: minus -->
|
||||
<svg class="ml-auto h-5 w-5 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" 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-sm leading-5 font-normal text-gray-500 text-left" scope="row">Convallis.</th>
|
||||
<td class="py-5 pr-4">
|
||||
<!-- Heroicon name: minus -->
|
||||
<svg class="ml-auto h-5 w-5 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="sr-only">No</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
|
||||
<table class="w-full">
|
||||
<caption class="bg-gray-50 border-t border-gray-200 py-3 px-4 text-sm leading-5 font-medium text-gray-900 text-left">
|
||||
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-sm leading-5 font-normal text-gray-500 text-left" scope="row">Adipiscing.</th>
|
||||
<td class="py-5 pr-4">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="ml-auto h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" 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-sm leading-5 font-normal text-gray-500 text-left" scope="row">Eget risus integer.</th>
|
||||
<td class="py-5 pr-4">
|
||||
<!-- Heroicon name: minus -->
|
||||
<svg class="ml-auto h-5 w-5 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" 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-sm leading-5 font-normal text-gray-500 text-left" scope="row">Gravida leo urna velit.</th>
|
||||
<td class="py-5 pr-4">
|
||||
<!-- Heroicon name: minus -->
|
||||
<svg class="ml-auto h-5 w-5 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" 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-sm leading-5 font-normal text-gray-500 text-left" scope="row">Elementum ut dapibus mi feugiat cras nisl.</th>
|
||||
<td class="py-5 pr-4">
|
||||
<!-- Heroicon name: minus -->
|
||||
<svg class="ml-auto h-5 w-5 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="sr-only">No</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
|
||||
<table class="w-full">
|
||||
<caption class="bg-gray-50 border-t border-gray-200 py-3 px-4 text-sm leading-5 font-medium text-gray-900 text-left">
|
||||
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-sm leading-5 font-normal text-gray-500 text-left" scope="row">Sit dignissim.</th>
|
||||
<td class="py-5 pr-4">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="ml-auto h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" 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-sm leading-5 font-normal text-gray-500 text-left" scope="row">Congue at nibh et.</th>
|
||||
<td class="py-5 pr-4">
|
||||
<!-- Heroicon name: minus -->
|
||||
<svg class="ml-auto h-5 w-5 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" 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-sm leading-5 font-normal text-gray-500 text-left" scope="row">Volutpat feugiat mattis.</th>
|
||||
<td class="py-5 pr-4">
|
||||
<!-- Heroicon name: minus -->
|
||||
<svg class="ml-auto h-5 w-5 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" 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-sm leading-5 font-normal text-gray-500 text-left" scope="row">Tristique pellentesque ornare diam sapien.</th>
|
||||
<td class="py-5 pr-4">
|
||||
<!-- Heroicon name: minus -->
|
||||
<svg class="ml-auto h-5 w-5 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" 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">
|
||||
<button type="button" class="w-full bg-gray-800 border border-gray-800 rounded-md py-2 text-sm leading-5 font-semibold text-white hover:bg-gray-700 focus:outline-none focus:shadow-outline-gray transition duration-150 ease-in-out">Buy Basic</button>
|
||||
</div>
|
||||
|
||||
<div class="px-4 mt-16">
|
||||
<h2 class="text-lg leading-6 font-medium text-gray-900">Essential</h2>
|
||||
<p class="mt-4">
|
||||
<span class="text-4xl leading-10 font-extrabold text-gray-900">$29</span>
|
||||
<span class="text-base leading-6 font-medium text-gray-500">/mo</span>
|
||||
</p>
|
||||
<p class="mt-4 text-sm leading-5 text-gray-500">Quis eleifend a tincidunt pellentesque. A tempor in sed.</p>
|
||||
<button type="button" class="mt-6 border border-gray-800 rounded-md bg-gray-800 w-full py-2 text-sm leading-5 font-semibold text-white hover:bg-gray-700 focus:outline-none focus:shadow-outline-gray transition duration-150 ease-in-out">Buy Essential</button>
|
||||
</div>
|
||||
|
||||
<table class="mt-8 w-full">
|
||||
<caption class="bg-gray-50 border-t border-gray-200 py-3 px-4 text-sm leading-5 font-medium text-gray-900 text-left">
|
||||
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-sm leading-5 font-normal text-gray-500 text-left" scope="row">Molestie lobortis massa.</th>
|
||||
<td class="py-5 pr-4">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="ml-auto h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" 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-sm leading-5 font-normal text-gray-500 text-left" scope="row">Urna purus felis.</th>
|
||||
<td class="py-5 pr-4">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="ml-auto h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" 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-sm leading-5 font-normal text-gray-500 text-left" scope="row">Tellus pulvinar sit dictum.</th>
|
||||
<td class="py-5 pr-4">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="ml-auto h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" 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-sm leading-5 font-normal text-gray-500 text-left" scope="row">Convallis.</th>
|
||||
<td class="py-5 pr-4">
|
||||
<span class="block text-sm leading-5 text-gray-700 text-right">Up to 20 users</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
|
||||
<table class="w-full">
|
||||
<caption class="bg-gray-50 border-t border-gray-200 py-3 px-4 text-sm leading-5 font-medium text-gray-900 text-left">
|
||||
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-sm leading-5 font-normal text-gray-500 text-left" scope="row">Adipiscing.</th>
|
||||
<td class="py-5 pr-4">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="ml-auto h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" 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-sm leading-5 font-normal text-gray-500 text-left" scope="row">Eget risus integer.</th>
|
||||
<td class="py-5 pr-4">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="ml-auto h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" 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-sm leading-5 font-normal text-gray-500 text-left" scope="row">Gravida leo urna velit.</th>
|
||||
<td class="py-5 pr-4">
|
||||
<!-- Heroicon name: minus -->
|
||||
<svg class="ml-auto h-5 w-5 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" 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-sm leading-5 font-normal text-gray-500 text-left" scope="row">Elementum ut dapibus mi feugiat cras nisl.</th>
|
||||
<td class="py-5 pr-4">
|
||||
<!-- Heroicon name: minus -->
|
||||
<svg class="ml-auto h-5 w-5 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="sr-only">No</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
|
||||
<table class="w-full">
|
||||
<caption class="bg-gray-50 border-t border-gray-200 py-3 px-4 text-sm leading-5 font-medium text-gray-900 text-left">
|
||||
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-sm leading-5 font-normal text-gray-500 text-left" scope="row">Sit dignissim.</th>
|
||||
<td class="py-5 pr-4">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="ml-auto h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" 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-sm leading-5 font-normal text-gray-500 text-left" scope="row">Congue at nibh et.</th>
|
||||
<td class="py-5 pr-4">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="ml-auto h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" 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-sm leading-5 font-normal text-gray-500 text-left" scope="row">Volutpat feugiat mattis.</th>
|
||||
<td class="py-5 pr-4">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="ml-auto h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" 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-sm leading-5 font-normal text-gray-500 text-left" scope="row">Tristique pellentesque ornare diam sapien.</th>
|
||||
<td class="py-5 pr-4">
|
||||
<!-- Heroicon name: minus -->
|
||||
<svg class="ml-auto h-5 w-5 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" 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">
|
||||
<button type="button" class="w-full bg-gray-800 border border-gray-800 rounded-md py-2 text-sm leading-5 font-semibold text-white hover:bg-gray-700 focus:outline-none focus:shadow-outline-gray transition duration-150 ease-in-out">Buy Essential</button>
|
||||
</div>
|
||||
|
||||
<div class="px-4 mt-16">
|
||||
<h2 class="text-lg leading-6 font-medium text-gray-900">Premium</h2>
|
||||
<p class="mt-4">
|
||||
<span class="text-4xl leading-10 font-extrabold text-gray-900">$59</span>
|
||||
<span class="text-base leading-6 font-medium text-gray-500">/mo</span>
|
||||
</p>
|
||||
<p class="mt-4 text-sm leading-5 text-gray-500">Orci volutpat ut sed sed neque, dui eget. Quis tristique non.</p>
|
||||
<button type="button" class="mt-6 border border-gray-800 rounded-md bg-gray-800 w-full py-2 text-sm leading-5 font-semibold text-white hover:bg-gray-700 focus:outline-none focus:shadow-outline-gray transition duration-150 ease-in-out">Buy Premium</button>
|
||||
</div>
|
||||
|
||||
<table class="mt-8 w-full">
|
||||
<caption class="bg-gray-50 border-t border-gray-200 py-3 px-4 text-sm leading-5 font-medium text-gray-900 text-left">
|
||||
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-sm leading-5 font-normal text-gray-500 text-left" scope="row">Molestie lobortis massa.</th>
|
||||
<td class="py-5 pr-4">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="ml-auto h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" 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-sm leading-5 font-normal text-gray-500 text-left" scope="row">Urna purus felis.</th>
|
||||
<td class="py-5 pr-4">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="ml-auto h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" 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-sm leading-5 font-normal text-gray-500 text-left" scope="row">Tellus pulvinar sit dictum.</th>
|
||||
<td class="py-5 pr-4">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="ml-auto h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" 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-sm leading-5 font-normal text-gray-500 text-left" scope="row">Convallis.</th>
|
||||
<td class="py-5 pr-4">
|
||||
<span class="block text-sm leading-5 text-gray-700 text-right">Up to 50 users</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
|
||||
<table class="w-full">
|
||||
<caption class="bg-gray-50 border-t border-gray-200 py-3 px-4 text-sm leading-5 font-medium text-gray-900 text-left">
|
||||
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-sm leading-5 font-normal text-gray-500 text-left" scope="row">Adipiscing.</th>
|
||||
<td class="py-5 pr-4">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="ml-auto h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" 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-sm leading-5 font-normal text-gray-500 text-left" scope="row">Eget risus integer.</th>
|
||||
<td class="py-5 pr-4">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="ml-auto h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" 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-sm leading-5 font-normal text-gray-500 text-left" scope="row">Gravida leo urna velit.</th>
|
||||
<td class="py-5 pr-4">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="ml-auto h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" 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-sm leading-5 font-normal text-gray-500 text-left" scope="row">Elementum ut dapibus mi feugiat cras nisl.</th>
|
||||
<td class="py-5 pr-4">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="ml-auto h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="sr-only">Yes</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
|
||||
<table class="w-full">
|
||||
<caption class="bg-gray-50 border-t border-gray-200 py-3 px-4 text-sm leading-5 font-medium text-gray-900 text-left">
|
||||
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-sm leading-5 font-normal text-gray-500 text-left" scope="row">Sit dignissim.</th>
|
||||
<td class="py-5 pr-4">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="ml-auto h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" 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-sm leading-5 font-normal text-gray-500 text-left" scope="row">Congue at nibh et.</th>
|
||||
<td class="py-5 pr-4">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="ml-auto h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" 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-sm leading-5 font-normal text-gray-500 text-left" scope="row">Volutpat feugiat mattis.</th>
|
||||
<td class="py-5 pr-4">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="ml-auto h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" 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-sm leading-5 font-normal text-gray-500 text-left" scope="row">Tristique pellentesque ornare diam sapien.</th>
|
||||
<td class="py-5 pr-4">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="ml-auto h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" 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">
|
||||
<button type="button" class="w-full bg-gray-800 border border-gray-800 rounded-md py-2 text-sm leading-5 font-semibold text-white hover:bg-gray-700 focus:outline-none focus:shadow-outline-gray transition duration-150 ease-in-out">Buy Premium</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- lg+ -->
|
||||
<div class="hidden lg:block">
|
||||
<table class="w-full h-px table-fixed">
|
||||
<caption class="sr-only">
|
||||
Pricing plan comparison
|
||||
</caption>
|
||||
<thead>
|
||||
|
||||
<tr>
|
||||
<th class="pb-4 px-6 text-sm leading-5 font-medium text-gray-900 text-left" scope="col">
|
||||
<span class="sr-only">Feature by</span>
|
||||
<span>Plans</span>
|
||||
</th>
|
||||
|
||||
<th class="w-1/4 pb-4 px-6 text-lg leading-6 font-medium text-gray-900 text-left" scope="col">Basic</th>
|
||||
|
||||
<th class="w-1/4 pb-4 px-6 text-lg leading-6 font-medium text-gray-900 text-left" scope="col">Essential</th>
|
||||
|
||||
<th class="w-1/4 pb-4 px-6 text-lg leading-6 font-medium text-gray-900 text-left" scope="col">Premium</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody class="border-t border-gray-200 divide-y divide-gray-200">
|
||||
|
||||
<tr>
|
||||
<th class="py-8 px-6 text-sm leading-5 font-medium text-gray-900 text-left align-top" scope="row">Pricing</th>
|
||||
|
||||
<td class="h-full py-8 px-6 align-top">
|
||||
<div class="relative h-full table">
|
||||
<p>
|
||||
<span class="text-4xl leading-10 font-extrabold text-gray-900">$9</span>
|
||||
<span class="text-base leading-6 font-medium text-gray-500">/mo</span>
|
||||
</p>
|
||||
<p class="mt-4 mb-16 text-sm leading-5 text-gray-500">Quis suspendisse ut fermentum neque vivamus non tellus.</p>
|
||||
<button type="button" class="absolute bottom-0 flex-grow w-full bg-gray-800 border border-gray-800 rounded-md 5 py-2 text-sm leading-5 font-semibold text-white hover:bg-gray-700 focus:outline-none focus:shadow-outline-gray transition duration-150 ease-in-out">Buy Basic</button>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td class="h-full py-8 px-6 align-top">
|
||||
<div class="relative h-full table">
|
||||
<p>
|
||||
<span class="text-4xl leading-10 font-extrabold text-gray-900">$29</span>
|
||||
<span class="text-base leading-6 font-medium text-gray-500">/mo</span>
|
||||
</p>
|
||||
<p class="mt-4 mb-16 text-sm leading-5 text-gray-500">Quis eleifend a tincidunt pellentesque. A tempor in sed.</p>
|
||||
<button type="button" class="absolute bottom-0 flex-grow w-full bg-gray-800 border border-gray-800 rounded-md 5 py-2 text-sm leading-5 font-semibold text-white hover:bg-gray-700 focus:outline-none focus:shadow-outline-gray transition duration-150 ease-in-out">Buy Essential</button>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td class="h-full py-8 px-6 align-top">
|
||||
<div class="relative h-full table">
|
||||
<p>
|
||||
<span class="text-4xl leading-10 font-extrabold text-gray-900">$59</span>
|
||||
<span class="text-base leading-6 font-medium text-gray-500">/mo</span>
|
||||
</p>
|
||||
<p class="mt-4 mb-16 text-sm leading-5 text-gray-500">Orci volutpat ut sed sed neque, dui eget. Quis tristique non.</p>
|
||||
<button type="button" class="absolute bottom-0 flex-grow w-full bg-gray-800 border border-gray-800 rounded-md 5 py-2 text-sm leading-5 font-semibold text-white hover:bg-gray-700 focus:outline-none focus:shadow-outline-gray transition duration-150 ease-in-out">Buy Premium</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="bg-gray-50 py-3 pl-6 text-sm leading-5 font-medium text-gray-900 text-left" colspan="4" scope="colgroup">Features</th>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th class="py-5 px-6 text-sm leading-5 font-normal text-gray-500 text-left" scope="row">Molestie lobortis massa.</th>
|
||||
<td class="py-5 px-6">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="sr-only">Included in Basic</span>
|
||||
</td>
|
||||
<td class="py-5 px-6">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="sr-only">Included in Essential</span>
|
||||
</td>
|
||||
<td class="py-5 px-6">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="sr-only">Included in Premium</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th class="py-5 px-6 text-sm leading-5 font-normal text-gray-500 text-left" scope="row">Urna purus felis.</th>
|
||||
<td class="py-5 px-6">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="sr-only">Included in Basic</span>
|
||||
</td>
|
||||
<td class="py-5 px-6">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="sr-only">Included in Essential</span>
|
||||
</td>
|
||||
<td class="py-5 px-6">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="sr-only">Included in Premium</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th class="py-5 px-6 text-sm leading-5 font-normal text-gray-500 text-left" scope="row">Tellus pulvinar sit dictum.</th>
|
||||
<td class="py-5 px-6">
|
||||
<!-- Heroicon name: minus -->
|
||||
<svg class="h-5 w-5 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="sr-only">Not included in Basic</span>
|
||||
</td>
|
||||
<td class="py-5 px-6">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="sr-only">Included in Essential</span>
|
||||
</td>
|
||||
<td class="py-5 px-6">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="sr-only">Included in Premium</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th class="py-5 px-6 text-sm leading-5 font-normal text-gray-500 text-left" scope="row">Convallis.</th>
|
||||
<td class="py-5 px-6">
|
||||
<!-- Heroicon name: minus -->
|
||||
<svg class="h-5 w-5 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" 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 leading-5 text-gray-700">Up to 20 users</span>
|
||||
</td>
|
||||
<td class="py-5 px-6">
|
||||
<span class="block text-sm leading-5 text-gray-700">Up to 50 users</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th class="bg-gray-50 py-3 pl-6 text-sm leading-5 font-medium text-gray-900 text-left" colspan="4" scope="colgroup">Reporting</th>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th class="py-5 px-6 text-sm leading-5 font-normal text-gray-500 text-left" scope="row">Adipiscing.</th>
|
||||
<td class="py-5 px-6">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="sr-only">Included in Basic</span>
|
||||
</td>
|
||||
<td class="py-5 px-6">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="sr-only">Included in Essential</span>
|
||||
</td>
|
||||
<td class="py-5 px-6">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="sr-only">Included in Premium</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th class="py-5 px-6 text-sm leading-5 font-normal text-gray-500 text-left" scope="row">Eget risus integer.</th>
|
||||
<td class="py-5 px-6">
|
||||
<!-- Heroicon name: minus -->
|
||||
<svg class="h-5 w-5 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="sr-only">Not included in Basic</span>
|
||||
</td>
|
||||
<td class="py-5 px-6">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="sr-only">Included in Essential</span>
|
||||
</td>
|
||||
<td class="py-5 px-6">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="sr-only">Included in Premium</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th class="py-5 px-6 text-sm leading-5 font-normal text-gray-500 text-left" scope="row">Gravida leo urna velit.</th>
|
||||
<td class="py-5 px-6">
|
||||
<!-- Heroicon name: minus -->
|
||||
<svg class="h-5 w-5 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="sr-only">Not included in Basic</span>
|
||||
</td>
|
||||
<td class="py-5 px-6">
|
||||
<!-- Heroicon name: minus -->
|
||||
<svg class="h-5 w-5 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="sr-only">Not included in Essential</span>
|
||||
</td>
|
||||
<td class="py-5 px-6">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="sr-only">Included in Premium</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th class="py-5 px-6 text-sm leading-5 font-normal text-gray-500 text-left" scope="row">Elementum ut dapibus mi feugiat cras nisl.</th>
|
||||
<td class="py-5 px-6">
|
||||
<!-- Heroicon name: minus -->
|
||||
<svg class="h-5 w-5 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="sr-only">Not included in Basic</span>
|
||||
</td>
|
||||
<td class="py-5 px-6">
|
||||
<!-- Heroicon name: minus -->
|
||||
<svg class="h-5 w-5 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="sr-only">Not included in Essential</span>
|
||||
</td>
|
||||
<td class="py-5 px-6">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" 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-sm leading-5 font-medium text-gray-900 text-left" colspan="4" scope="colgroup">Support</th>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th class="py-5 px-6 text-sm leading-5 font-normal text-gray-500 text-left" scope="row">Sit dignissim.</th>
|
||||
<td class="py-5 px-6">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="sr-only">Included in Basic</span>
|
||||
</td>
|
||||
<td class="py-5 px-6">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="sr-only">Included in Essential</span>
|
||||
</td>
|
||||
<td class="py-5 px-6">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="sr-only">Included in Premium</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th class="py-5 px-6 text-sm leading-5 font-normal text-gray-500 text-left" scope="row">Congue at nibh et.</th>
|
||||
<td class="py-5 px-6">
|
||||
<!-- Heroicon name: minus -->
|
||||
<svg class="h-5 w-5 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="sr-only">Not included in Basic</span>
|
||||
</td>
|
||||
<td class="py-5 px-6">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="sr-only">Included in Essential</span>
|
||||
</td>
|
||||
<td class="py-5 px-6">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="sr-only">Included in Premium</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th class="py-5 px-6 text-sm leading-5 font-normal text-gray-500 text-left" scope="row">Volutpat feugiat mattis.</th>
|
||||
<td class="py-5 px-6">
|
||||
<!-- Heroicon name: minus -->
|
||||
<svg class="h-5 w-5 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="sr-only">Not included in Basic</span>
|
||||
</td>
|
||||
<td class="py-5 px-6">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="sr-only">Included in Essential</span>
|
||||
</td>
|
||||
<td class="py-5 px-6">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="sr-only">Included in Premium</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th class="py-5 px-6 text-sm leading-5 font-normal text-gray-500 text-left" scope="row">Tristique pellentesque ornare diam sapien.</th>
|
||||
<td class="py-5 px-6">
|
||||
<!-- Heroicon name: minus -->
|
||||
<svg class="h-5 w-5 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="sr-only">Not included in Basic</span>
|
||||
</td>
|
||||
<td class="py-5 px-6">
|
||||
<!-- Heroicon name: minus -->
|
||||
<svg class="h-5 w-5 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="sr-only">Not included in Essential</span>
|
||||
</td>
|
||||
<td class="py-5 px-6">
|
||||
<!-- Heroicon name: check -->
|
||||
<svg class="h-5 w-5 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" 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="pt-5 px-6">
|
||||
<button type="button" class="w-full bg-gray-800 border border-gray-800 rounded-md py-2 text-sm leading-5 font-semibold text-white hover:bg-gray-700 focus:outline-none focus:shadow-outline-gray transition duration-150 ease-in-out">Buy Basic</button>
|
||||
</td>
|
||||
|
||||
<td class="pt-5 px-6">
|
||||
<button type="button" class="w-full bg-gray-800 border border-gray-800 rounded-md py-2 text-sm leading-5 font-semibold text-white hover:bg-gray-700 focus:outline-none focus:shadow-outline-gray transition duration-150 ease-in-out">Buy Essential</button>
|
||||
</td>
|
||||
|
||||
<td class="pt-5 px-6">
|
||||
<button type="button" class="w-full bg-gray-800 border border-gray-800 rounded-md py-2 text-sm leading-5 font-semibold text-white hover:bg-gray-700 focus:outline-none focus:shadow-outline-gray transition duration-150 ease-in-out">Buy Premium</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,268 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Tailwind UI Components</title>
|
||||
<link href="https://fonts.googleapis.com/css?family=Inter&display=swap" rel="stylesheet"/>
|
||||
<link href="https://cdn.jsdelivr.net/npm/@tailwindcss/ui@latest/dist/tailwind-ui.min.css" rel="stylesheet"/>
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.0.1/dist/alpine.js" defer></script>
|
||||
<link href="https://cdn.jsdelivr.net/npm/highlightjs-themes@1.0.0/darkula.css" rel="stylesheet"/>
|
||||
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/highlight.min.js"></script>
|
||||
<style>
|
||||
* { box-sizing: border-box; }
|
||||
.font-sans { font-family: "Inter", sans-serif; }
|
||||
.hljs {
|
||||
background: #252f3f;
|
||||
color: white;
|
||||
}
|
||||
.hljs-tag {
|
||||
color: white;
|
||||
}
|
||||
.hljs-name {
|
||||
color: #ff8383;
|
||||
}
|
||||
.hljs-attr {
|
||||
color: #ffe484;
|
||||
font-style: italic;
|
||||
}
|
||||
.hljs-string {
|
||||
color: #b5f4a5;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="font-sans antialiased text-gray-900">
|
||||
<main>
|
||||
<div class="py-4 sm:py-12">
|
||||
<div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="pb-2">
|
||||
<nav class="flex items-center text-sm leading-5 font-medium">
|
||||
<a href="/#marketing" class="text-gray-500 hover:text-gray-700 focus:outline-none focus:underline transition duration-150 ease-in-out">
|
||||
Marketing
|
||||
</a>
|
||||
<svg class="flex-shrink-0 mx-2 h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<a href="/#marketing-page-sections" class="text-gray-500 hover:text-gray-700 focus:outline-none focus:underline transition duration-150 ease-in-out">
|
||||
Page Sections
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
<h2 class="text-2xl leading-8 font-semibold font-display text-gray-900 sm:text-3xl sm:leading-9">
|
||||
Stats
|
||||
</h2>
|
||||
</div>
|
||||
<div class="mt-6 bg-white max-w-8xl mx-auto sm:px-6 lg:px-8">
|
||||
<div class="max-w-8xl mx-auto">
|
||||
|
||||
<div id="component-089b1de0341ccea88716253a58f8e6a2f6c5de47" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-089b1de0341ccea88716253a58f8e6a2f6c5de47">Simple in card</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/stats-sections/simple_in_card.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-d1c6c98954184ee97128d021ee578eae0dae923f" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-d1c6c98954184ee97128d021ee578eae0dae923f">Simple on brand</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/stats-sections/simple_on_brand.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="component-5989bdb23746cb94bb52949a30d21500bb7844f5" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
|
||||
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
|
||||
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
|
||||
<a href="#component-5989bdb23746cb94bb52949a30d21500bb7844f5">Split with image</a>
|
||||
</h3>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center">
|
||||
<div class="flex items-center text-sm sm:hidden">
|
||||
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center text-sm md:text-base">
|
||||
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
|
||||
Preview
|
||||
</button>
|
||||
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
|
||||
Code
|
||||
</button>
|
||||
<textarea class="hidden">Code goes here</textarea>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<div class="pl-4 pr-3 self-stretch">
|
||||
<div class="h-full border-l border-gray-200"></div>
|
||||
</div>
|
||||
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Copy</title>
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative bg-gray-500">
|
||||
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
|
||||
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
|
||||
<iframe x-ref="iframe" class="w-full" src="/components/marketing/sections/stats-sections/split_with_image.html" style="height: 265px;"></iframe>
|
||||
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
|
||||
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
|
||||
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
|
||||
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
(function() {
|
||||
const getDocHeight = doc => {
|
||||
doc = doc || document;
|
||||
const body = doc.body;
|
||||
const html = doc.documentElement;
|
||||
const height = Math.max(
|
||||
body.scrollHeight,
|
||||
body.offsetHeight,
|
||||
html.clientHeight,
|
||||
html.scrollHeight,
|
||||
html.offsetHeight
|
||||
);
|
||||
return height;
|
||||
};
|
||||
|
||||
window.resizableIFrame = function() {
|
||||
return {
|
||||
resizing: !1,
|
||||
width: "100%",
|
||||
init: function() {}
|
||||
};
|
||||
};
|
||||
const iframes = document.querySelectorAll("iframe");
|
||||
Array.from(iframes).forEach(iframe => {
|
||||
iframe.addEventListener("load", e => {
|
||||
const iframe = e.srcElement;
|
||||
const doc = iframe.contentDocument || iframe.contentWindow.document;
|
||||
doc.body.classList.add("antialiased", "font-sans", "bg-white")
|
||||
iframe.style.visibility = "hidden";
|
||||
iframe.style.height = "10px";
|
||||
const height = Math.max(getDocHeight(doc), 256) + "px";
|
||||
iframe.style.height = height;
|
||||
iframe.style.visibility = "visible";
|
||||
|
||||
const html = doc.body.innerHTML.trim();
|
||||
const container = iframe.parentElement.parentElement.parentElement;
|
||||
hljs.configure({useBR: false, tabReplace: ' '});
|
||||
const highlighted = hljs.highlight('html', html);
|
||||
const codeElem = container.children[1].querySelector("code");
|
||||
codeElem.innerHTML = highlighted.value;
|
||||
});
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,54 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="bg-gray-50 pt-12 sm:pt-16">
|
||||
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
<h2 class="text-3xl leading-9 font-extrabold text-gray-900 sm:text-4xl sm:leading-10">
|
||||
Trusted by developers from over 80 planets
|
||||
</h2>
|
||||
<p class="mt-3 text-xl leading-7 text-gray-500 sm:mt-4">
|
||||
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus repellat laudantium.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 pb-12 bg-white sm:pb-16">
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 h-1/2 bg-gray-50"></div>
|
||||
<div class="relative max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<dl class="rounded-lg bg-white shadow-lg sm:grid sm:grid-cols-3">
|
||||
<div class="flex flex-col border-b border-gray-100 p-6 text-center sm:border-0 sm:border-r">
|
||||
<dt class="order-2 mt-2 text-lg leading-6 font-medium text-gray-500" id="item-1">
|
||||
Pepperoni
|
||||
</dt>
|
||||
<dd class="order-1 text-5xl leading-none font-extrabold text-indigo-600" aria-describedby="item-1">
|
||||
100%
|
||||
</dd>
|
||||
</div>
|
||||
<div class="flex flex-col border-t border-b border-gray-100 p-6 text-center sm:border-0 sm:border-l sm:border-r">
|
||||
<dt class="order-2 mt-2 text-lg leading-6 font-medium text-gray-500">
|
||||
Delivery
|
||||
</dt>
|
||||
<dd class="order-1 text-5xl leading-none font-extrabold text-indigo-600">
|
||||
24/7
|
||||
</dd>
|
||||
</div>
|
||||
<div class="flex flex-col border-t border-gray-100 p-6 text-center sm:border-0 sm:border-l">
|
||||
<dt class="order-2 mt-2 text-lg leading-6 font-medium text-gray-500">
|
||||
Calories
|
||||
</dt>
|
||||
<dd class="order-1 text-5xl leading-none font-extrabold text-indigo-600">
|
||||
100k
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,45 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><html>
|
||||
<head /><body>
|
||||
<div class="bg-indigo-800">
|
||||
<div class="max-w-screen-xl mx-auto py-12 px-4 sm:py-16 sm:px-6 lg:px-8 lg:py-20">
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
<h2 class="text-3xl leading-9 font-extrabold text-white sm:text-4xl sm:leading-10">
|
||||
Trusted by developers from over 80 planets
|
||||
</h2>
|
||||
<p class="mt-3 text-xl leading-7 text-indigo-200 sm:mt-4">
|
||||
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus repellat laudantium.
|
||||
</p>
|
||||
</div>
|
||||
<dl class="mt-10 text-center sm:max-w-3xl sm:mx-auto sm:grid sm:grid-cols-3 sm:gap-8">
|
||||
<div class="flex flex-col">
|
||||
<dt class="order-2 mt-2 text-lg leading-6 font-medium text-indigo-200">
|
||||
Pepperoni
|
||||
</dt>
|
||||
<dd class="order-1 text-5xl leading-none font-extrabold text-white">
|
||||
100%
|
||||
</dd>
|
||||
</div>
|
||||
<div class="flex flex-col mt-10 sm:mt-0">
|
||||
<dt class="order-2 mt-2 text-lg leading-6 font-medium text-indigo-200">
|
||||
Delivery
|
||||
</dt>
|
||||
<dd class="order-1 text-5xl leading-none font-extrabold text-white">
|
||||
24/7
|
||||
</dd>
|
||||
</div>
|
||||
<div class="flex flex-col mt-10 sm:mt-0">
|
||||
<dt class="order-2 mt-2 text-lg leading-6 font-medium text-indigo-200">
|
||||
Calories
|
||||
</dt>
|
||||
<dd class="order-1 text-5xl leading-none font-extrabold text-white">
|
||||
100k+
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user