-
Notifications
You must be signed in to change notification settings - Fork 0
/
accordion.html
45 lines (43 loc) · 2.55 KB
/
accordion.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
<div class="flex justify-center items-center w-screen min-h-screen p-10 border ">
<div class="flex flex-col w-56">
<button class="group ">
<div class="flex items-center justify-between h-12 px-3 font-semibold hover:bg-gray-200">
<span class="truncate">Heading One</span>
<svg class="h-4 w-4" 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 class="max-h-0 overflow-hidden duration-300 group-focus:max-h-40">
<a class="flex items-center h-8 px-4 text-sm hover:bg-gray-200" href="#">Item A</a>
<a class="flex items-center h-8 px-4 text-sm hover:bg-gray-200" href="#">Item B</a>
<a class="flex items-center h-8 px-4 text-sm hover:bg-gray-200" href="#">Item C</a>
</div>
</button>
<button class="group">
<div class="flex items-center justify-between h-12 px-3 font-semibold hover:bg-gray-200">
<span class="truncate">Heading Two</span>
<svg class="h-4 w-4" 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 class="max-h-0 overflow-hidden duration-300 group-focus:max-h-40">
<a class="flex items-center h-8 px-4 text-sm hover:bg-gray-200" href="#">Item A</a>
<a class="flex items-center h-8 px-4 text-sm hover:bg-gray-200" href="#">Item B</a>
<a class="flex items-center h-8 px-4 text-sm hover:bg-gray-200" href="#">Item C</a>
</div>
</button>
<button class="group">
<div class="flex items-center justify-between h-12 px-3 font-semibold hover:bg-gray-200">
<span class="truncate">Heading Three</span>
<svg class="h-4 w-4 flex-shrink-0" 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 class="max-h-0 overflow-hidden duration-300 group-focus:max-h-40">
<a class="flex items-center h-8 px-4 text-sm hover:bg-gray-200" href="#">Item A</a>
<a class="flex items-center h-8 px-4 text-sm hover:bg-gray-200" href="#">Item B</a>
<a class="flex items-center h-8 px-4 text-sm hover:bg-gray-200" href="#">Item C</a>
</div>
</button>
</div>
</div>