/
index.html
163 lines (152 loc) · 9.43 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Fly-out Menu</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.x.x/dist/cdn.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
inter: ['Inter', 'sans-serif'],
},
},
},
};
</script>
</head>
<body class="relative font-inter antialiased">
<main class="relative min-h-screen flex flex-col justify-center bg-slate-50 overflow-hidden">
<div class="w-full max-w-6xl mx-auto px-4 md:px-6 py-24">
<!-- Menu -->
<nav class="flex justify-center">
<ul class="flex flex-wrap items-center font-medium text-sm">
<li class="p-4 lg:px-8">
<a class="text-slate-800 hover:text-slate-900" href="#">Prospects</a>
</li>
<li class="p-4 lg:px-8">
<a class="text-slate-800 hover:text-slate-900" href="#">History</a>
</li>
<li
class="p-4 lg:px-8 relative flex items-center space-x-1"
x-data="{ open: false }"
@mouseenter="open = true"
@mouseleave="open = false"
>
<a
class="text-slate-800 hover:text-slate-900"
href="#0"
:aria-expanded="open"
>Flyout Menu</a>
<button
class="shrink-0 p-1"
:aria-expanded="open"
@click.prevent="open = !open"
>
<span class="sr-only">Show submenu for "Flyout Menu"</span>
<svg class="w-3 h-3 fill-slate-500" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
<path d="M10 2.586 11.414 4 6 9.414.586 4 2 2.586l4 4z" />
</svg>
</button>
<!-- 2nd level menu -->
<ul
class="origin-top-right absolute top-full left-1/2 -translate-x-1/2 min-w-[240px] bg-white border border-slate-200 p-2 rounded-lg shadow-xl [&[x-cloak]]:hidden"
x-show="open"
x-transition:enter="transition ease-out duration-200 transform"
x-transition:enter-start="opacity-0 -translate-y-2"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-out duration-200"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
x-cloak
@focusout="await $nextTick();!$el.contains($focus.focused()) && (open = false)"
>
<li>
<a class="text-slate-800 hover:bg-slate-50 flex items-center p-2" href="#">
<div class="flex items-center justify-center bg-white border border-slate-200 rounded shadow-sm h-7 w-7 shrink-0 mr-3">
<svg class="fill-indigo-500" xmlns="http://www.w3.org/2000/svg" width="9" height="12">
<path d="M8.724.053A.5.5 0 0 0 8.2.1L4.333 3H1.5A1.5 1.5 0 0 0 0 4.5v3A1.5 1.5 0 0 0 1.5 9h2.833L8.2 11.9a.5.5 0 0 0 .8-.4V.5a.5.5 0 0 0-.276-.447Z" />
</svg>
</div>
<span class="whitespace-nowrap">Priority Ratings</span>
</a>
</li>
<li>
<a class="text-slate-800 hover:bg-slate-50 flex items-center p-2" href="#">
<div class="flex items-center justify-center bg-white border border-slate-200 rounded shadow-sm h-7 w-7 shrink-0 mr-3">
<svg class="fill-indigo-500" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
<path d="M11.953 4.29a.5.5 0 0 0-.454-.292H6.14L6.984.62A.5.5 0 0 0 6.12.173l-6 7a.5.5 0 0 0 .379.825h5.359l-.844 3.38a.5.5 0 0 0 .864.445l6-7a.5.5 0 0 0 .075-.534Z" />
</svg>
</div>
<span class="whitespace-nowrap">Insights</span>
</a>
</li>
<li>
<a class="text-slate-800 hover:bg-slate-50 flex items-center p-2" href="#">
<div class="flex items-center justify-center bg-white border border-slate-200 rounded shadow-sm h-7 w-7 shrink-0 mr-3">
<svg class="fill-indigo-500" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
<path d="M6 0a6 6 0 1 0 0 12A6 6 0 0 0 6 0ZM2 6a4 4 0 0 1 4-4v8a4 4 0 0 1-4-4Z" />
</svg>
</div>
<span class="whitespace-nowrap">Item Mirror</span>
</a>
</li>
<li>
<a class="text-slate-800 hover:bg-slate-50 flex items-center p-2" href="#">
<div class="flex items-center justify-center bg-white border border-slate-200 rounded shadow-sm h-7 w-7 shrink-0 mr-3">
<svg class="fill-indigo-500" xmlns="http://www.w3.org/2000/svg" width="11" height="11">
<path d="M10.866.134a.458.458 0 0 0-.481-.106L.302 3.695a.458.458 0 0 0-.014.856l4.4 1.76 1.76 4.4c.07.175.24.29.427.29h.007a.458.458 0 0 0 .424-.302L10.973.615a.458.458 0 0 0-.107-.48Z" />
</svg>
</div>
<span class="whitespace-nowrap">Support Center</span>
</a>
</li>
</ul>
</li>
<li class="p-4 lg:px-8">
<a class="text-slate-800 hover:text-slate-900" href="#">Contacts</a>
</li>
<li class="p-4 lg:px-8">
<a class="text-slate-800 hover:text-slate-900" href="#">Numbers</a>
</li>
</ul>
</nav>
<!-- End: Menu -->
</div>
</main>
<!-- Page footer -->
<footer class="absolute left-6 right-6 md:left-12 md:right-auto bottom-4 md:bottom-8 text-center md:text-left">
<a class="text-xs text-slate-500 hover:underline" href="https://cruip.com">©Cruip - Tailwind CSS templates</a>
</footer>
<!-- Banner with links -->
<div class="fixed bottom-0 right-0 w-full md:bottom-6 md:right-12 md:w-auto z-50" :class="bannerOpen ? '' : 'hidden'" x-data="{ bannerOpen: true }">
<div class="bg-slate-800 text-sm p-3 md:rounded shadow flex justify-between">
<div class="text-slate-500 inline-flex">
<a class="font-medium hover:underline text-slate-300" href="https://cruip.com/build-a-hoverable-dropdown-menu-with-tailwind-css-and-alpine-js/">
Read Tutorial
</a>
<span class="italic px-1.5">or</span>
<a class="font-medium hover:underline text-indigo-500 flex items-center" href="https://github.com/cruip/cruip-tutorials/blob/main/flyout-menu/index.html" target="_blank" rel="noreferrer">
<span>Download</span>
<svg class="fill-indigo-400 ml-1" xmlns="http://www.w3.org/2000/svg" width="9" height="9">
<path d="m1.649 8.514-.91-.915 5.514-5.523H2.027l.01-1.258h6.388v6.394H7.158l.01-4.226z" />
</svg>
</a>
</div>
<button class="text-slate-500 hover:text-slate-400 pl-2 ml-3 border-l border-slate-700" @click="bannerOpen = false">
<span class="sr-only">Close</span>
<svg class="w-4 h-4 shrink-0 fill-current" viewBox="0 0 16 16">
<path d="M12.72 3.293a1 1 0 00-1.415 0L8.012 6.586 4.72 3.293a1 1 0 00-1.414 1.414L6.598 8l-3.293 3.293a1 1 0 101.414 1.414l3.293-3.293 3.293 3.293a1 1 0 001.414-1.414L9.426 8l3.293-3.293a1 1 0 000-1.414z" />
</svg>
</button>
</div>
</div>
</body>
</html>