├── .gitignore
├── img
    ├── faq.png
    ├── tabs.png
    ├── alert.png
    ├── navbar.png
    ├── tooltip.png
    ├── modal-confirm.png
    ├── modal-sidebar.png
    ├── hover-dropdown-menu.png
    ├── modal-sidebar-button.png
    └── click-dropdown-animation.png
├── LICENSE.md
├── alert.html
├── README.md
├── dropdown-animation.html
├── hover-dropdown-menu.html
├── tabs.html
├── modal-confirm.html
├── tooltip.html
├── modal-sidebar.html
├── faq.html
└── navbar.html


/.gitignore:
--------------------------------------------------------------------------------
1 | /test


--------------------------------------------------------------------------------
/img/faq.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/josuapsianturi/tac/HEAD/img/faq.png


--------------------------------------------------------------------------------
/img/tabs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/josuapsianturi/tac/HEAD/img/tabs.png


--------------------------------------------------------------------------------
/img/alert.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/josuapsianturi/tac/HEAD/img/alert.png


--------------------------------------------------------------------------------
/img/navbar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/josuapsianturi/tac/HEAD/img/navbar.png


--------------------------------------------------------------------------------
/img/tooltip.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/josuapsianturi/tac/HEAD/img/tooltip.png


--------------------------------------------------------------------------------
/img/modal-confirm.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/josuapsianturi/tac/HEAD/img/modal-confirm.png


--------------------------------------------------------------------------------
/img/modal-sidebar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/josuapsianturi/tac/HEAD/img/modal-sidebar.png


--------------------------------------------------------------------------------
/img/hover-dropdown-menu.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/josuapsianturi/tac/HEAD/img/hover-dropdown-menu.png


--------------------------------------------------------------------------------
/img/modal-sidebar-button.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/josuapsianturi/tac/HEAD/img/modal-sidebar-button.png


--------------------------------------------------------------------------------
/img/click-dropdown-animation.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/josuapsianturi/tac/HEAD/img/click-dropdown-animation.png


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Josua Putra Sianturi
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/alert.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Alert</title>
 8 |     <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
 9 |     <script src="https://cdn.tailwindcss.com"></script>
10 | </head>
11 | <body>
12 |         <!-- Layout -->
13 |         <div class="flex items-center justify-center h-screen">
14 | 
15 |             <div x-data="{ open: true }" x-show="open" class="bg-green-200 px-6 py-4 border-0 rounded-lg relative mb-4">
16 |                 <span class="text-xl inline-block mr-5 align-middle">
17 |                     <svg class="w-6 h-6 text-gray-700 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
18 |                         <rect width="256" height="256" fill="none" />
19 |                         <path fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="M56.20305 104A71.899 71.899 0 0 1 128.5484 32.002c39.58967.29432 71.25651 33.20133 71.25651 72.90185V112c0 35.81563 7.49325 56.59893 14.093 67.95814A7.999 7.999 0 0 1 207.01628 192H48.98365A7.99908 7.99908 0 0 1 42.103 179.95641c6.60328-11.35959 14.1-32.1426 14.1-67.95641zM96 192v8a32 32 0 0 0 64 0v-8" />
20 |                     </svg>                
21 |                 </span>
22 |                 <span class="inline-block align-middle mr-8 text-green-600">
23 |                     This is a green alert, click x button to close it !
24 |                 </span>
25 |                 <button @click="open = false" class="absolute bg-transparent text-2xl font-semibold leading-none right-0 top-0 mt-4 mr-6 outline-none focus:outline-none">
26 |                     <span>×</span>
27 |                 </button>
28 |             </div>
29 | 
30 |         </div>
31 |         <!-- End Layout -->
32 |     
33 | </body>
34 | </html>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <h1 align="center">
 2 | 
 3 | [Tailwind](https://tailwindcss.com/)  [Alpine](https://github.com/alpinejs/alpine/) Components
 4 | 
 5 | </h1>
 6 | 
 7 | > **Note**
 8 | > Let's check all the components on codepen.io https://codepen.io/colleion/ZMKKLBct
 9 | 
10 | ## VIEW
11 | 1. [Hover dropdown menu](https://github.com/josuapsianturi/tac/blob/master/hover-dropdown-menu.html)   
12 | ![hover-dropdown-menu](https://raw.githubusercontent.com/josuapsianturi/tailwind-alpine-components/master/img/hover-dropdown-menu.png)
13 | 
14 | 2. [Frequently asked questions](https://github.com/josuapsianturi/tac/blob/master/faq.html)   
15 | ![frequently-asked-questions](https://raw.githubusercontent.com/josuapsianturi/tailwind-alpine-components/master/img/faq.png)
16 | 
17 |  3. [Navbar](https://github.com/josuapsianturi/tac/blob/master/navbar.html)   
18 | ![navbar](https://raw.githubusercontent.com/josuapsianturi/tailwind-alpine-components/master/img/navbar.png)
19 | 
20 |  4. [Tooltip](https://github.com/josuapsianturi/tac/blob/master/tooltip.html)   
21 | ![tooltip](https://raw.githubusercontent.com/josuapsianturi/tailwind-alpine-components/master/img/tooltip.png)
22 | 
23 |  5. [Tabs](https://github.com/josuapsianturi/tac/blob/master/tabs.html)   
24 | ![tabs](https://raw.githubusercontent.com/josuapsianturi/tailwind-alpine-components/master/img/tabs.png)
25 | 
26 | 
27 |  6. [Click dropdown animation](https://github.com/josuapsianturi/tac/blob/master/dropdown-animation.html)   
28 | ![Click dropdown animation](https://raw.githubusercontent.com/josuapsianturi/tailwind-alpine-components/master/img/click-dropdown-animation.png)
29 | 
30 |  7. [Modal confirm](https://github.com/josuapsianturi/tac/blob/master/modal-confirm.html)   
31 | ![Modal confirm](https://raw.githubusercontent.com/josuapsianturi/tailwind-alpine-components/master/img/modal-confirm.png)
32 | 
33 |  8. [Modal sidebar](https://github.com/josuapsianturi/tac/blob/master/modal-sidebar.html)   
34 | ![Modal sidebar buttons](https://raw.githubusercontent.com/josuapsianturi/tailwind-alpine-components/master/img/modal-sidebar-button.png)
35 | ![Modal sidebar](https://raw.githubusercontent.com/josuapsianturi/tailwind-alpine-components/master/img/modal-sidebar.png)
36 | 
37 |  9. [Alert](https://github.com/josuapsianturi/tac/blob/master/alert.html)   
38 | ![Alert](https://raw.githubusercontent.com/josuapsianturi/tailwind-alpine-components/master/img/alert.png)
39 | 


--------------------------------------------------------------------------------
/dropdown-animation.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Click Dropdown Animation</title>
 8 |     <script src="https://cdn.tailwindcss.com"></script>
 9 |     <script src="//unpkg.com/alpinejs" defer></script>
10 | </head>
11 | <style>
12 |     [x-cloak] { display: none !important;}
13 | </style>
14 | <body>
15 | 
16 |     <div class="bg-gray-200 flex min-h-screen items-center justify-center ">
17 |         <div x-cloak class="inline-block relative" x-data="{open: false}">
18 |             <button @click="open = !open" @click.away="open = false" 
19 |                 class="focus:outline-none shadow cursor-pointer inline-block text-gray-700 hover:text-gray-900 flex border border-gray-200 rounded p-2 pl-3 pr-1 bg-gray-100" 
20 |                 :class="{ 'shadow-none border-gray-300': open}">
21 |                 Click dropdown
22 |                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" :class="{'-rotate-180': open}" 
23 |                     class="ml-1 transform duration-200 inline-block fill-current text-gray-500 w-6 h-6">
24 |                     <path fill-rule="evenodd" d="M15.3 10.3a1 1 0 011.4 1.4l-4 4a1 1 0 01-1.4 0l-4-4a1 1 0 011.4-1.4l3.3 3.29 3.3-3.3z" />
25 |                 </svg>
26 |             </button>
27 |     
28 |             <ul x-show="open" class="bg-white absolute left-0 shadow w-full rounded text-gray-600 origin-top shadow-lg" 
29 |                 x-transition:enter="transition ease-out duration-200" 
30 |                 x-transition:enter-start="opacity-0 transform scale-y-50" 
31 |                 x-transition:enter-end="opacity-100 transform scale-y-100" 
32 |                 x-transition:leave="transition ease-in duration-200" 
33 |                 x-transition:leave-end="opacity-0 transform scale-y-50">
34 |                 <li><a href="#" class="py-1 px-3 border-b block hover:bg-gray-200">Tailwind</a></li>
35 |                 <li><a href="#" class="py-1 px-3 block hover:bg-gray-200">Alpine</a></li>
36 |                 <li><a href="#" class="py-1 px-3 block hover:bg-gray-200">Laravel</a></li>
37 |                 <li><a href="#" class="py-1 px-3 block hover:bg-gray-200">Livewire</a></li>
38 |             </ul>
39 |         </div>
40 |     </div>
41 |     
42 | </body>
43 | </html>


--------------------------------------------------------------------------------
/hover-dropdown-menu.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Hover Dropdown</title>
 8 |     <script src="https://cdn.tailwindcss.com"></script>
 9 |     <script src="//unpkg.com/alpinejs" defer></script>
10 |   </head>
11 | <style>
12 |     [x-cloak] {display: none !important;}
13 | </style>
14 |   <body>
15 |     <!-- Layout -->
16 |     <div class="flex items-center justify-center h-screen bg-gray-200">
17 |         <!-- Dropdown 1 -->
18 |         <div x-cloak x-data="{ open: false }" @mouseleave="open = false" class="relative inline-block">
19 |             <!-- Dropdown Toggle Button -->
20 |             <button @mouseover="open = true" class="flex items-center px-3 py-2 bg-white rounded-lg">
21 |                 <span class="mr-4">Hover Dropdown</span>
22 |                 <span
23 |                     :class="open = ! open ? '' : '-rotate-180'"
24 |                     class="transition-transform duration-500 transform">
25 |                     <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
26 |                         <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
27 |                     </svg>                
28 |                 </span>
29 |             </button>
30 |             <!-- End Dropdown Toggle Button -->
31 | 
32 |             <!-- Dropdown Menu -->
33 |             <div x-show="open"
34 |                 x-transition:enter="transition ease-out duration-300"
35 |                 x-transition:enter-start="opacity-0 transform scale-90"
36 |                 x-transition:enter-end="opacity-100 transform scale-100"
37 |                 x-transition:leave="transition ease-in duration-300"
38 |                 x-transition:leave-start="opacity-100 transform scale-100"
39 |                 x-transition:leave-end="opacity-0 transform scale-90"
40 |                 class="absolute right-0 py-1 text-gray-500 bg-white rounded-lg shadow-xl w-96">
41 |                 <a href="#" class="block px-4 py-1 hover:text-blue-400">Tailwind</a>
42 |                 <a href="#" class="block px-4 py-1 hover:text-blue-400">Alpine</a>
43 |                 <a href="#" class="block px-4 py-1 hover:text-blue-400">Laravel</a>
44 |                 <a href="#" class="block px-4 py-1 hover:text-blue-400">Livewire</a>
45 |             </div>
46 |             <!-- End Dropdown Menu -->
47 |         </div>
48 |         <!-- End Dropdown 1 -->
49 |     </div>
50 |     <!-- End Layout -->
51 | </body>
52 | </html>


--------------------------------------------------------------------------------
/tabs.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Tabs</title>
 8 |     <script src="https://cdn.tailwindcss.com"></script>
 9 |     <script defer src="https://unpkg.com/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script>
10 |     <script src="//unpkg.com/alpinejs" defer></script>
11 | </head>
12 | <style>
13 |     [x-cloak] { display: none !important; }
14 | </style>
15 | <body class="bg-gray-100">
16 | <!-- Layout -->
17 | <div class="flex items-center justify-center h-screen max-w-2xl px-2 mx-auto">
18 | 
19 |     <div x-data="{ tab: $persist('1')}" class="w-full rounded-md">
20 |         <!-- Tabs Navigation -->
21 |         <div class="flex justify-end px-4 pt-3 space-x-4 font-bold text-white bg-gray-600  text rounded-tr-md rounded-tl-md">
22 |             <button @click="tab = '1'"
23 |                 :class="{ 'bg-gray-700 transition transform ease-in-out duration-300': tab === '1' }" 
24 |                 class="px-4 py-2 font-bold tracking-wider rounded-tr-md rounded-tl-md">
25 |                 Tab 1
26 |             </button>
27 |             <button @click="tab = '2'" 
28 |                 :class="{ 'bg-gray-700 transition transform ease-in-out duration-300': tab === '2' }"  
29 |                 class="px-4 py-2 font-bold tracking-wider rounded-tr-md rounded-tl-md">
30 |                 Tab 2
31 |             </button>
32 |         </div>
33 |         <!-- End Tabs Navigation -->
34 | 
35 |         <!-- Tabs Content -->
36 |         <div x-cloak class="flex px-4 py-2 tracking-wider text-white bg-gray-700 h-72">
37 |             <!-- Tab 1 -->
38 |             <div x-show="tab === '1'">
39 |                 This tabs using persist plugin
40 |             </div>
41 |             <!-- End Tab 1 -->
42 |             <!-- Tab 2 -->
43 |             <div x-show="tab === '2'"
44 |                 class="space-y-3">
45 |                 <a href="https://alpinejs.dev/plugins/persist" class="font-semibold underline"># Persist Plugin</a>  
46 |                 <div class="">Alpine's Persist plugin allows you to persist Alpine state across page loads.</div>  
47 |                 <div class="">
48 |                     This is useful for persisting search filters, <span class="font-semibold">active tabs</span> , 
49 |                     and other features where users will be frustrated if their configuration is reset after refreshing or leaving and revisiting a page.
50 |                 </div>
51 |             </div>
52 |             <!-- End Tab 2 -->
53 |         </div>
54 |         <!-- End Tabs Content -->
55 |     </div>
56 |     
57 | </div> 
58 | <!-- End Layout -->
59 | </body>
60 | </html>


--------------------------------------------------------------------------------
/modal-confirm.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Modal Confirm</title>
 8 |     <script src="https://cdn.tailwindcss.com"></script>
 9 |     <script src="//unpkg.com/alpinejs" defer></script>
10 | </head>
11 | <style>
12 |     [x-cloak] {
13 |         display: none !important;
14 |     }
15 | </style>
16 | <body>
17 |     <!-- Layout -->
18 |     <div class="container mx-auto p-6 text-center">
19 |         <div x-data="{ open: false }" class="mt-6" >
20 |             
21 |             <!-- Modal Button -->
22 |             <button @click="open = true; $nextTick(() => $refs.closeBtn.focus())" class="bg-gray-700 text-white px-4 py-2 rounded no-outline focus:shadow-outline select-none" >Modal Confirm</button>
23 |             <!-- End Modal Button -->
24 |             
25 |             <!-- Open Modal -->
26 |             <div x-show="open" @mousedown.away="open = false" @keydown.window.escape="open = false"
27 |                 x-transition:enter="transition ease-out duration-200"
28 |                 x-transition:enter-start="opacity-0 transform scale-90"
29 |                 x-transition:enter-end="opacity-100 transform scale-100"
30 |                 x-transition:leave="transition ease-in duration-200"
31 |                 x-transition:leave-start="opacity-100 transform scale-100"
32 |                 x-transition:leave-end="opacity-0 transform scale-90"
33 |                 class="absolute top-0 left-0 w-full h-full flex items-center justify-center" style="background-color: rgba(0,0,0,.5);">
34 |                 <div  @click.away="open = false" class="text-left bg-white h-auto p-4 md:max-w-xl md:p-6 lg:p-10 shadow-xl rounded-lg mx-2 md:mx-0" >
35 |                     <div class="flex justify-between items-center">
36 |                         <div class="text-2xl">Modal title</div>
37 | 
38 |                         <!-- Modal Close -->
39 |                         <button class="" @click="open = false">
40 |                             <svg class="w-4 tex-gray-700 fill-current transition duration-150" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512.001 512.001">
41 |                                 <path d="M284.286 256.002L506.143 34.144c7.811-7.811 7.811-20.475 0-28.285-7.811-7.81-20.475-7.811-28.285 0L256 227.717 34.143 5.859c-7.811-7.811-20.475-7.811-28.285 0-7.81 7.811-7.811 20.475 0 28.285l221.857 221.857L5.858 477.859c-7.811 7.811-7.811 20.475 0 28.285a19.938 19.938 0 0014.143 5.857 19.94 19.94 0 0014.143-5.857L256 284.287l221.857 221.857c3.905 3.905 9.024 5.857 14.143 5.857s10.237-1.952 14.143-5.857c7.811-7.811 7.811-20.475 0-28.285L284.286 256.002z" />
42 |                             </svg>
43 |                         </button>
44 |                     <!-- Modal Close -->
45 |                     </div>
46 | 
47 |                     <div class="text-gray-600 mt-4">Lorem ipsum dolor sit amet consectetur adipisicing earum?</div>
48 |                     <div class="flex space-x-4 mt-8">
49 |                         <button x-ref="closeBtn" class="focus:outline-none focus:ring focus:ring-gray-700 hover:bg-gray-700 border border-gray-700 text-gray-700 hover:text-gray-100 px-4 py-2 rounded no-outline focus:shadow-outline select-none" @click="open = false">Confirm</button>
50 |                         <button class="hover:bg-gray-700 border border-gray-700 text-gray-700 hover:text-gray-100 px-4 py-2 rounded no-outline focus:shadow-outline select-none" @click="open = false">Cancel</button>
51 |                     </div>
52 |                 </div>
53 |             </div>
54 |             <!-- End Open Modal -->
55 |         </div>
56 |     </div>
57 |     <!-- End Layout -->
58 | </body>
59 | </html>


--------------------------------------------------------------------------------
/tooltip.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Tooltip</title>
 8 |     <script src="https://cdn.tailwindcss.com"></script>
 9 |     <script src="//unpkg.com/alpinejs" defer></script>
10 | </head>
11 | <style>
12 |     [x-cloak] { display: none !important; }
13 | </style>
14 | <body class="bg-gray-100">
15 | <!-- Layout -->
16 | <div class="flex items-center justify-center min-h-screen space-x-8">
17 | 
18 |     <!-- Notification Tooltip  -->
19 |     <div x-data="{ tooltip: false }" class="relative z-30 inline-flex tracking-wide">
20 |         <div @mouseover="tooltip = true" 
21 |             @mouseleave="tooltip = false" 
22 |             class="px-3 py-2 text-white bg-white rounded-md shadow cursor-pointer">
23 |             <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-bell">
24 |                 <path d="M8 16a2 2 0 001.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 008 16z"></path>
25 |                 <path fill-rule="evenodd" d="M8 1.5A3.5 3.5 0 004.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.018.018 0 00-.003.01l.001.006c0 .002.002.004.004.006a.017.017 0 00.006.004l.007.001h10.964l.007-.001a.016.016 0 00.006-.004.016.016 0 00.004-.006l.001-.007a.017.017 0 00-.003-.01l-1.703-2.554a1.75 1.75 0 01-.294-.97V5A3.5 3.5 0 008 1.5zM3 5a5 5 0 0110 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.518 1.518 0 0113.482 13H2.518a1.518 1.518 0 01-1.263-2.36l1.703-2.554A.25.25 0 003 7.947V5z"></path>
26 |             </svg>
27 |         </div>
28 | 
29 |         <div x-show="tooltip" 
30 |             x-transition.duration.100ms
31 |             x-cloak
32 |             class="relative">
33 |             <div class="absolute bottom-0 z-10 px-2 py-1 -mb-1.5 text-sm text-white transform 
34 |                 -translate-x-full translate-y-full bg-gray-700 rounded-lg shadow-lg min-w-max">
35 |                 You have no unread notifications
36 |             </div>
37 |             <svg class="absolute z-10 w-6 h-5 text-gray-700 transform translate-y-8 fill-current stroke-current -translate-x-9">
38 |                 <rect x="12" y="-10" width="8" height="8" transform="rotate(45)" />
39 |             </svg>
40 |         </div>
41 |     </div>
42 |     <!-- End Notification Tooltip -->
43 | 
44 |     <!-- Image Tooltip  -->
45 |     <div x-data="{ tooltip: false }" class="relative z-30 inline-flex tracking-wide">
46 |         <div @mouseover="tooltip = true" 
47 |             @mouseleave="tooltip = false" 
48 |             class="px-3 py-2 text-white bg-white rounded-md shadow cursor-pointer">
49 |             <svg class="w-4 h-4" viewBox="0 0 24 24" aria-hidden="true">
50 |                 <g>
51 |                     <path d="M19.75 2H4.25C3.01 2 2 3.01 2 4.25v15.5C2 20.99 3.01 22 4.25 22h15.5c1.24 0 2.25-1.01 2.25-2.25V4.25C22 3.01 20.99 2 19.75 2zM4.25 3.5h15.5c.413 0 .75.337.75.75v9.676l-3.858-3.858c-.14-.14-.33-.22-.53-.22h-.003c-.2 0-.393.08-.532.224l-4.317 4.384-1.813-1.806c-.14-.14-.33-.22-.53-.22-.193-.03-.395.08-.535.227L3.5 17.642V4.25c0-.413.337-.75.75-.75zm-.744 16.28l5.418-5.534 6.282 6.254H4.25c-.402 0-.727-.322-.744-.72zm16.244.72h-2.42l-5.007-4.987 3.792-3.85 4.385 4.384v3.703c0 .413-.337.75-.75.75z"></path>
52 |                     <circle cx="8.868" cy="8.309" r="1.542"></circle>
53 |                 </g>
54 |             </svg>
55 |         </div>
56 | 
57 |         <div x-show="tooltip"  
58 |             x-transition.duration.100ms 
59 |             x-cloak
60 |             class="relative">
61 |             <div class="absolute bottom-0 z-10 px-2 py-1 -mb-1.5 text-sm text-white transform 
62 |                 -translate-x-12 translate-y-full bg-gray-700 rounded-lg shadow-lg min-w-max">
63 |                 Media
64 |             </div>
65 |         </div>
66 |     </div>
67 |     <!-- End Image Tooltip -->
68 | 
69 | </div>
70 | <!-- End Layout -->
71 | </body>
72 | </html>


--------------------------------------------------------------------------------
/modal-sidebar.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Modal Sidebar</title>
 8 |     <script src="https://cdn.tailwindcss.com"></script>
 9 |     <script src="//unpkg.com/alpinejs" defer></script>
10 | </head>
11 | <style>
12 |     [x-cloak] {
13 |         display: none !important;
14 |     }
15 | </style>
16 | <body class="bg-gray-200 text-gray-800">
17 |     <header class="bg-white shadow-md">
18 |         <nav x-cloak x-data="{open: true}" class="container mx-auto px-4 flex item-center justify-between py-4">
19 |             <div class="flex">
20 |                 <button @click="open = true" class="bg-gray-100 hover:bg-gray-200 transition ease-out duration-200 rounded p-2">
21 |                     <svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
22 |                         <path fill="#494c4e" d="M23 6H1c-.552 0-1-.448-1-1s.448-1 1-1h22c.553 0 1 .448 1 1s-.447 1-1 1zM23 13H1c-.552 0-1-.447-1-1s.448-1 1-1h22c.553 0 1 .447 1 1s-.447 1-1 1zM23 20H1c-.552 0-1-.447-1-1s.448-1 1-1h22c.553 0 1 .447 1 1s-.447 1-1 1z" />
23 |                     </svg>
24 |                 </button>
25 |             </div> 
26 | 
27 |             <!-- Sidebar -->
28 |             <div x-show="open" @click.away="open = false"  @keydown.window.escape="open = false" 
29 |                 x-transition:enter="transition ease-out duration-200 -ml-64"
30 |                 x-transition:enter-end="transform translate-x-64"
31 |                 x-transition:leave="transition ease-out duration-200"
32 |                 x-transition:leave-end="transform -translate-x-64"
33 |                 class="absolute top-0 left-0 bg-white border border-right h-full w-72 ">
34 |                 <div class="flex justify-end m-3">
35 |                     <button @click="open = false" class="text-2xl mr-3 mt-1"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
36 |                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
37 |                     </svg>
38 |                     </button>
39 |                 </div>
40 |                 <div class="mt-10 px-6">
41 |                 <a class="hover:text-gray-800 hover:bg-gray-100 flex items-center p-2 my-6 transition-colors duration-200 text-gray-600 rounded-lg" href="#">
42 |                     <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
43 |                         <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" />
44 |                     </svg>                    
45 |                     <span class="mx-4 text-lg font-normal">
46 |                         Users
47 |                     </span>
48 |                     <span class="flex-grow text-right">
49 |                     </span>
50 |                 </a>
51 |                 <a class="hover:text-gray-800 hover:bg-gray-100 flex items-center p-2 my-6 transition-colors duration-200 text-gray-600 rounded-lg" href="#">
52 |                 <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
53 |                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
54 |                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
55 |                 </svg>                    
56 |                     <span class="mx-4 text-lg font-normal">
57 |                         Settings
58 |                     </span>
59 |                     <span class="flex-grow text-right">
60 |                     </span>
61 |                 </a>
62 |                 </div>
63 |             </div>
64 |             <!-- End Sidebar -->
65 |         </nav>
66 |     </header>
67 | </body>
68 | </html>


--------------------------------------------------------------------------------
/faq.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>tac-faq</title>
  8 |     <script src="https://cdn.tailwindcss.com"></script>
  9 |     <script src="//unpkg.com/alpinejs" defer></script>
 10 | </head>
 11 | <body>
 12 | <!-- Layout -->
 13 | <div class="h-screen max-w-5xl px-2 py-3 mx-auto mt-32 tracking-wide md:px-4 md:mt-44">
 14 |     <!-- Title -->
 15 |     <div class="flex justify-center text-3xl">Frequently Asked Questions</div>
 16 |     <!-- End Title -->
 17 | 
 18 |     <!-- Accordion -->
 19 |     <div class="grid gap-3 py-8 text-lg leading-6 text-gray-800 md:gap-8 md:grid-cols-2">
 20 |         <div class="space-y-3">
 21 |             <!-- 1 -->
 22 |             <div x-data="accordion(1)"
 23 |                 class="relative transition-all duration-700 border rounded-xl hover:shadow-2xl">
 24 |                 <div @click="handleClick()"
 25 |                     class="w-full p-4 text-left cursor-pointer">
 26 |                     <div class="flex items-center justify-between">
 27 |                         <span class="tracking-wide">What is x-data ?</span>
 28 |                         <span :class="handleRotate()"
 29 |                             class="transition-transform duration-500 transform fill-current ">
 30 |                             <svg class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
 31 |                                 <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
 32 |                             </svg>                
 33 |                         </span>
 34 |                     </div>
 35 |                 </div>
 36 | 
 37 |                 <div x-ref="tab"
 38 |                     :style="handleToggle()"
 39 |                     class="relative overflow-hidden transition-all duration-700 max-h-0">
 40 |                     <div class="px-6 pb-4 text-gray-600">
 41 |                         Declare a new Alpine component and its data for a block of HTML                    </div>
 42 |                 </div>
 43 |             </div>
 44 |             <!-- End 1 -->
 45 | 
 46 |             <!-- 2 -->
 47 |             <div x-data="accordion(2)"
 48 |                 class="relative transition-all duration-700 border rounded-xl hover:shadow-2xl">
 49 |                 <div @click="handleClick()"  class="w-full p-4 text-left cursor-pointer">
 50 |                     <div class="flex items-center justify-between">
 51 |                         <span class="tracking-wide">What is x-bind ?</span>
 52 |                         <span :class="handleRotate()"
 53 |                             class="transition-transform duration-500 transform fill-current ">
 54 |                             <svg class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
 55 |                                 <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
 56 |                             </svg>                
 57 |                         </span>
 58 |                     </div>
 59 |                 </div>
 60 | 
 61 |                 <div x-ref="tab"
 62 |                     :style="handleToggle()"
 63 |                     class="relative overflow-hidden transition-all duration-700 max-h-0">
 64 |                     <div class="px-6 pb-4 text-gray-600">
 65 |                         Dynamically set HTML attributes on an element.
 66 |                     </div>
 67 |                 </div>
 68 |             </div>
 69 |             <!-- End 2 -->
 70 |         </div>
 71 | 
 72 |         <div class="space-y-3">
 73 |             <!-- 3 -->
 74 |             <div x-data="accordion(3)"
 75 |                 class="relative transition-all duration-700 border rounded-xl hover:shadow-2xl">
 76 |                 <div @click="handleClick()"  class="w-full p-4 text-left cursor-pointer">
 77 |                     <div class="flex items-center justify-between">
 78 |                         <span class="tracking-wide">What is $store ?</span>
 79 |                         <span :class="handleRotate()"
 80 |                             class="transition-transform duration-500 transform fill-current ">
 81 |                             <svg class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
 82 |                                 <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
 83 |                             </svg>                
 84 |                         </span>
 85 |                     </div>
 86 |                 </div>
 87 | 
 88 |                 <div x-ref="tab"
 89 |                     :style="handleToggle()"
 90 |                     class="relative overflow-hidden transition-all duration-700 max-h-0">
 91 |                     <div class="px-6 pb-4 text-gray-600">
 92 |                         Access a global store registered using Alpine.store(...)
 93 |                     </div>
 94 |                 </div>
 95 |             </div>
 96 |             <!-- End 3 -->
 97 | 
 98 |             <!-- 4 -->
 99 |             <div x-data="accordion(4)"
100 |                 class="relative transition-all duration-700 border rounded-xl hover:shadow-2xl">
101 |                 <div @click="handleClick()"  class="w-full p-4 text-left cursor-pointer">
102 |                     <div class="flex items-center justify-between">
103 |                         <span class="tracking-wide">What is x-on ?</span>
104 |                         <span :class="handleRotate()"
105 |                             class="transition-transform duration-500 transform fill-current ">
106 |                             <svg class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
107 |                                 <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
108 |                             </svg>                
109 |                         </span>
110 |                     </div>
111 |                 </div>
112 | 
113 |                 <div x-ref="tab"
114 |                     :style="handleToggle()"
115 |                     class="relative overflow-hidden transition-all duration-700 max-h-0">
116 |                     <div class="px-6 pb-4 text-gray-600">
117 |                         Listen for browser events on an element
118 |                     </div>
119 |                 </div>
120 |             </div>
121 |             <!-- End 4 -->
122 |         </div>
123 |     </div>
124 |     <!-- End Accordion -->
125 | </div>
126 | <!-- End Layout -->
127 | 
128 | <script>
129 | // Faq
130 | document.addEventListener('alpine:init', () => {
131 | 	Alpine.store('accordion', {
132 | 	  tab: 0
133 | 	});
134 | 
135 | 	Alpine.data('accordion', (idx) => ({
136 | 	  init() {
137 | 		this.idx = idx;
138 | 	  },
139 | 	  idx: -1,
140 | 	  handleClick() {
141 | 		this.$store.accordion.tab = this.$store.accordion.tab === this.idx ? 0 : this.idx;
142 | 	  },
143 | 	  handleRotate() {
144 | 		return this.$store.accordion.tab === this.idx ? '-rotate-180' : '';
145 | 	  },
146 | 	  handleToggle() {
147 | 		return this.$store.accordion.tab === this.idx ? `max-height: ${this.$refs.tab.scrollHeight}px` : '';
148 | 	  }
149 | 	}));
150 |   })
151 | //  end faq
152 | </script>
153 |     
154 | </body>
155 | </html>


--------------------------------------------------------------------------------
/navbar.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Navbar</title>
  8 |     <script src="https://cdn.tailwindcss.com"></script>
  9 |     <script src="//unpkg.com/alpinejs" defer></script>
 10 | </head>
 11 | <style>
 12 | [x-cloak] {display: none !important;}
 13 | hr {border-top: 1px solid #c5c5c5;}     
 14 | </style>
 15 | <body>
 16 | <nav x-cloak x-data="accordion(6)"
 17 |     class="fixed top-0 z-40 flex flex-wrap items-center justify-between w-full px-4 py-5 tracking-wide bg-white shadow-md bg-white bg-opacity-90 md:py-8 md:px-8 lg:px-14">
 18 |     <!-- Left nav -->
 19 |         <div class="flex items-center">
 20 |             <a href="#" class="text-3xl tracking-wide">
 21 |                 Navbar
 22 |             </a>
 23 |         </div>
 24 |     <!-- End left nav -->
 25 | 
 26 |     <!-- Right nav -->
 27 |         <!-- Show menu sm,md -->
 28 |         <!-- Toggle button -->
 29 |         <div @click="handleClick()"
 30 |             x-data="{open : false}"
 31 |             class="block text-gray-600 cursor-pointer lg:hidden">
 32 |             <button @click="open = ! open" class="w-6 h-6 text-lg">
 33 |                 <svg x-show="! open" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"
 34 |                     :clas="{'transition-full each-in-out transform duration-500':! open}">
 35 |                     <rect width="48" height="48" fill="white" fill-opacity="0.01"></rect>
 36 |                     <path d="M7.94977 11.9498H39.9498" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
 37 |                     <path d="M7.94977 23.9498H39.9498" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
 38 |                     <path d="M7.94977 35.9498H39.9498" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
 39 |                 </svg>
 40 | 
 41 |                 <svg x-show="open" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x">
 42 |                     <line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line>
 43 |                 </svg>
 44 |             </button>
 45 |         </div>
 46 |         <!-- End toggle button -->
 47 | 
 48 |         <!-- Toggle menu -->
 49 |         <div x-ref="tab"
 50 |             :style="handleToggle()"
 51 |             class="relative w-full overflow-hidden transition-all duration-700 lg:hidden max-h-0">
 52 |             <div class="flex flex-col my-3 space-y-2 text-lg hover:font-b text-gray-600">
 53 |                 <a href="#" class="hover:text-gray-900"><span>Link</span></a>
 54 |                 <hr>
 55 |                 <a href="#" class="hover:text-gray-900"><span>Link</span></a>
 56 |                 <hr>
 57 |                 <a href="#" class="hover:text-gray-900"><span>Link</span></a>
 58 |             </div>
 59 |             <div class="py-6 px-5 space-y-6">
 60 |                 <div class="grid grid-cols-2 gap-y-4 gap-x-8">        
 61 |                   <a href="#" class="text-base font-medium text-gray-900 hover:text-gray-700">
 62 |                     About
 63 |                   </a>
 64 |         
 65 |                   <a href="#" class="text-base font-medium text-gray-900 hover:text-gray-700">
 66 |                     Contact
 67 |                   </a>
 68 |                 </div>
 69 |             </div>  
 70 |             <div>
 71 |                 <a href="#" class="w-full flex items-center justify-center text-white px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-gray-600 hover:bg-gray-700">
 72 |                   Sign up
 73 |                 </a>
 74 |                 <p class="mt-6 text-center text-base font-medium text-gray-500">
 75 |                   Existing customer?
 76 |                     <a href="#" class="text-gray-600 hover:text-gray-900">
 77 |                         Sign in
 78 |                     </a>
 79 |                 </p>
 80 |             </div>
 81 |         </div>
 82 |         <!-- End toggle menu -->
 83 |         <!-- End show menu sm,md -->
 84 | 
 85 |         <!-- Show Menu lg -->
 86 |         <div class="hidden w-full lg:flex lg:items-center lg:w-auto">
 87 |             <div class="items-center flex-1 pt-6 justify-center text-lg text-gray-500 lg:pt-0 list-reset lg:flex">
 88 |                     <div class="mr-3">
 89 |                         <a href="#"
 90 |                             class="inline-block px-4 py-2 no-underline hover:text-gray-900 text-gray-600">
 91 |                             Link
 92 |                         </a>
 93 |                     </div>
 94 | 
 95 |                     <div class="mr-3">
 96 |                         <a href="#"
 97 |                             class="inline-block px-4 py-2 no-underline hover:text-gray-900 text-gray-600">
 98 |                             Link
 99 |                         </a>
100 |                     </div>
101 | 
102 |                     <!-- Dropdown 1 -->
103 |                     <div x-data="{ open: false }" 
104 |                         @mouseleave="open = false" class="relative inline-block" 
105 |                         :class="{'text-gray-900': open, 'text-gray-600': !open }">
106 |                         <!-- Dropdown Toggle Button -->
107 |                         <button @mouseover="open = true" class="flex items-center p-2 rounded-md">
108 |                             <span class="mr-4">Hover Dropdown</span>
109 |                             <span :class="open = ! open ? '': '-rotate-180'"
110 |                                 class="transition-transform duration-500 transform">
111 |                                 <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
112 |                                     <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
113 |                                 </svg>                
114 |                             </span>
115 |                         </button>
116 |                         <!-- End Dropdown Toggle Button -->
117 | 
118 |                         <!-- Dropdown Menu -->
119 |                         <div x-show="open"
120 |                             x-transition:enter="transition ease-out duration-300"
121 |                             x-transition:enter-start="opacity-0 transform scale-90"
122 |                             x-transition:enter-end="opacity-100 transform scale-100"
123 |                             x-transition:leave="transition ease-in duration-300"
124 |                             x-transition:leave-start="opacity-100 transform scale-100"
125 |                             x-transition:leave-end="opacity-0 transform scale-90"
126 |                             class="absolute right-0 py-1 text-gray-500 bg-white rounded-lg shadow-xl min-w-max">
127 |                             <a href="#" class="block px-4 py-1 hover:text-gray-900 hover:bg-gray-100">Lorem, ipsum.</a>
128 |                             <a href="#" class="block px-4 py-1 hover:text-gray-900 hover:bg-gray-100">Lorem, ipsum dolor.</a>
129 |                             <a href="#" class="block px-4 py-1 hover:text-gray-900 hover:bg-gray-100">Lorem ipsum dolor sit amet.</a>
130 |                         </div>
131 |                         <!-- End Dropdown Menu -->
132 |                     </div>
133 |                     <!-- End Dropdown 1 -->
134 |             </div>
135 |         </div>
136 |         <div class="hidden w-full lg:flex lg:items-center lg:w-auto">
137 |             <div class="items-center flex-1 pt-6 justify-center text-lg text-gray-500 lg:pt-0 list-reset lg:flex">
138 |                 <a href="#" class="whitespace-nowrap text-base font-medium text-gray-500 hover:text-gray-900">
139 |                 Sign in
140 |                 </a>
141 |                 <a href="#" class="ml-8 whitespace-nowrap inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-gray-600 hover:bg-gray-700">
142 |                 Sign up
143 |                 </a>
144 |             </div>
145 |         </div>
146 |         <!-- End show Menu lg -->
147 |     <!-- End right nav -->
148 | </nav>
149 | <script>
150 | // navbar
151 | document.addEventListener('alpine:init', () => {
152 | 	Alpine.store('accordion', {
153 | 	  tab: 0
154 | 	});
155 | 
156 | 	Alpine.data('accordion', (idx) => ({
157 | 	  init() {
158 | 		this.idx = idx;
159 | 	  },
160 | 	  idx: -1,
161 | 	  handleClick() {
162 | 		this.$store.accordion.tab = this.$store.accordion.tab === this.idx ? 0 : this.idx;
163 | 	  },
164 | 	  handleRotate() {
165 | 		return this.$store.accordion.tab === this.idx ? '-rotate-180' : '';
166 | 	  },
167 | 	  handleToggle() {
168 | 		return this.$store.accordion.tab === this.idx ? `max-height: ${this.$refs.tab.scrollHeight}px` : '';
169 | 	  }
170 | 	}));
171 |   })
172 | //  end navbar
173 | </script>
174 | </body>
175 | </html>


--------------------------------------------------------------------------------