1import{L as d,B as h}from"./breadcrumb-282e6fa8.js";import{C as n}from"./custom-syntax-57ab595c.js";import{_ as g,r as s,o as u,c as y,w as i,a as o,b as e,d as t}from"./index-6682805e.js";import"./logo-light-a5f5d186.js";import"./logo-dark-a5f5d186.js";const b={components:{CustomSyntax:n,Layout:d,Breadcrumb:h,Prism:n},data(){return{}}},p={class:"grid 2xl:grid-cols-2 grid-cols-1 gap-6"};function f(v,a,m,x,w,k){const c=s("Breadcrumb"),r=s("CustomSyntax"),l=s("Layout");return u(),y(l,null,{default:i(()=>[o(c,{title:"Accordion",subtitle:"Components"}),e("div",p,[o(r,{title:"Default Accordion"},{"card-body":i(()=>a[0]||(a[0]=[e("div",{class:"hs-accordion-group"},[e("div",{class:"hs-accordion active",id:"hs-basic-heading-one"},[e("button",{class:"hs-accordion-toggle hs-accordion-active:text-blue-600 group py-3 inline-flex items-center gap-x-3 w-full font-semibold text-left text-gray-800 transition hover:text-gray-500 dark:hs-accordion-active:text-blue-500 dark:text-gray-200 dark:hover:text-gray-400","aria-controls":"hs-basic-collapse-one"},[t(" Accordion #1 "),e("i",{class:"mgc_add_line hs-accordion-active:hidden hs-accordion-active:text-blue-600 hs-accordion-active:group-hover:text-blue-600 block w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"}),e("i",{class:"mgc_minimize_line hs-accordion-active:block hs-accordion-active:text-blue-600 hs-accordion-active:group-hover:text-blue-600 hidden w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"})]),e("div",{id:"hs-basic-collapse-one",class:"hs-accordion-content w-full overflow-hidden transition-[height] duration-300","aria-labelledby":"hs-basic-heading-one"},[e("p",{class:"text-gray-800 dark:text-gray-200"}," Tailwind CSS offers a seamless way to build modern websites without having to leave your HTML. The framework functions by scanning all of your HTML files, JavaScript components, and templates for class names, automatically generating corresponding styles, and writing them to a static CSS file. This approach is fast, flexible, and reliable, requiring zero runtime. Whether you need to create form layouts, tables, or modal dialogs, Tailwind CSS provides everything necessary to design beautiful, responsive web applications. Additionally, the framework includes checkout forms, shopping carts, and product views, making it the ideal choice for developing your next e-commerce front-end. ")])]),e("div",{class:"hs-accordion",id:"hs-basic-heading-two"},[e("button",{class:"hs-accordion-toggle hs-accordion-active:text-blue-600 group py-3 inline-flex items-center gap-x-3 w-full font-semibold text-left text-gray-800 transition hover:text-gray-500 dark:hs-accordion-active:text-blue-500 dark:text-gray-200 dark:hover:text-gray-400","aria-controls":"hs-basic-collapse-two"},[t(" Accordion #2 "),e("i",{class:"mgc_add_line hs-accordion-active:hidden hs-accordion-active:text-blue-600 hs-accordion-active:group-hover:text-blue-600 block w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"}),e("i",{class:"mgc_minimize_line hs-accordion-active:block hs-accordion-active:text-blue-600 hs-accordion-active:group-hover:text-blue-600 hidden w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"})]),e("div",{id:"hs-basic-collapse-two",class:"hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300","aria-labelledby":"hs-basic-heading-two"},[e("p",{class:"text-gray-800 dark:text-gray-200"}," Tailwind CSS offers a seamless way to build modern websites without having to leave your HTML. The framework functions by scanning all of your HTML files, JavaScript components, and templates for class names, automatically generating corresponding styles, and writing them to a static CSS file. This approach is fast, flexible, and reliable, requiring zero runtime. Whether you need to create form layouts, tables, or modal dialogs, Tailwind CSS provides everything necessary to design beautiful, responsive web applications. Additionally, the framework includes checkout forms, shopping carts, and product views, making it the ideal choice for developing your next e-commerce front-end. ")])]),e("div",{class:"hs-accordion",id:"hs-basic-heading-three"},[e("button",{class:"hs-accordion-toggle hs-accordion-active:text-blue-600 group py-3 inline-flex items-center gap-x-3 w-full font-semibold text-left text-gray-800 transition hover:text-gray-500 dark:hs-accordion-active:text-blue-500 dark:text-gray-200 dark:hover:text-gray-400","aria-controls":"hs-basic-collapse-three"},[t(" Accordion #3 "),e("i",{class:"mgc_add_line hs-accordion-active:hidden hs-accordion-active:text-blue-600 hs-accordion-active:group-hover:text-blue-600 block w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"}),e("i",{class:"mgc_minimize_line hs-accordion-active:block hs-accordion-active:text-blue-600 hs-accordion-active:group-hover:text-blue-600 hidden w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"})]),e("div",{id:"hs-basic-collapse-three",class:"hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300","aria-labelledby":"hs-basic-heading-three"},[e("p",{class:"text-gray-800 dark:text-gray-200"}," Tailwind CSS offers a seamless way to build modern websites without having to leave your HTML. The framework functions by scanning all of your HTML files, JavaScript components, and templates for class names, automatically generating corresponding styles, and writing them to a static CSS file. This approach is fast, flexible, and reliable, requiring zero runtime. Whether you need to create form layouts, tables, or modal dialogs, Tailwind CSS provides everything necessary to design beautiful, responsive web applications. Additionally, the framework includes checkout forms, shopping carts, and product views, making it the ideal choice for developing your next e-commerce front-end. ")])])],-1)])),_:1}),o(r,{title:"Always Open"},{"card-body":i(()=>a[1]||(a[1]=[e("div",{class:"hs-accordion-group","data-hs-accordion-always-open":""},[e("div",{class:"hs-accordion active",id:"hs-basic-always-open-heading-one"},[e("button",{class:"hs-accordion-toggle hs-accordion-active:text-blue-600 py-3 inline-flex items-center gap-x-3 w-full font-semibold text-left text-gray-800 transition hover:text-gray-500 dark:hs-accordion-active:text-blue-500 dark:text-gray-200 dark:hover:text-gray-400","aria-controls":"hs-basic-always-open-collapse-one"},[t(" Accordion #1 "),e("i",{class:"mgc_add_line hs-accordion-active:hidden hs-accordion-active:text-blue-600 hs-accordion-active:group-hover:text-blue-600 block w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"}),e("i",{class:"mgc_minimize_line hs-accordion-active:block hs-accordion-active:text-blue-600 hs-accordion-active:group-hover:text-blue-600 hidden w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"})]),e("div",{id:"hs-basic-always-open-collapse-one",class:"hs-accordion-content w-full overflow-hidden transition-[height] duration-300","aria-labelledby":"hs-basic-always-open-heading-one"},[e("p",{class:"text-gray-800 dark:text-gray-200"}," Tailwind CSS offers a seamless way to build modern websites without having to leave your HTML. The framework functions by scanning all of your HTML files, JavaScript components, and templates for class names, automatically generating corresponding styles, and writing them to a static CSS file. This approach is fast, flexible, and reliable, requiring zero runtime. Whether you need to create form layouts, tables, or modal dialogs, Tailwind CSS provides everything necessary to design beautiful, responsive web applications. Additionally, the framework includes checkout forms, shopping carts, and product views, making it the ideal choice for developing your next e-commerce front-end. ")])]),e("div",{class:"hs-accordion",id:"hs-basic-always-open-heading-two"},[e("button",{class:"hs-accordion-toggle hs-accordion-active:text-blue-600 py-3 inline-flex items-center gap-x-3 w-full font-semibold text-left text-gray-800 transition hover:text-gray-500 dark:hs-accordion-active:text-blue-500 dark:text-gray-200 dark:hover:text-gray-400","aria-controls":"hs-basic-always-open-collapse-two"},[t(" Accordion #2 "),e("i",{class:"mgc_add_line hs-accordion-active:hidden hs-accordion-active:text-blue-600 hs-accordion-active:group-hover:text-blue-600 block w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"}),e("i",{class:"mgc_minimize_line hs-accordion-active:block hs-accordion-active:text-blue-600 hs-accordion-active:group-hover:text-blue-600 hidden w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"})]),e("div",{id:"hs-basic-always-open-collapse-two",class:"hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300","aria-labelledby":"hs-basic-always-open-heading-two"},[e("p",{class:"text-gray-800 dark:text-gray-200"}," Tailwind CSS offers a seamless way to build modern websites without having to leave your HTML. The framework functions by scanning all of your HTML files, JavaScript components, and templates for class names, automatically generating corresponding styles, and writing them to a static CSS file. This approach is fast, flexible, and reliable, requiring zero runtime. Whether you need to create form layouts, tables, or modal dialogs, Tailwind CSS provides everything necessary to design beautiful, responsive web applications. Additionally, the framework includes checkout forms, shopping carts, and product views, making it the ideal choice for developing your next e-commerce front-end. ")])]),e("div",{class:"hs-accordion",id:"hs-basic-always-open-heading-three"},[e("button",{class:"hs-accordion-toggle hs-accordion-active:text-blue-600 py-3 inline-flex items-center gap-x-3 w-full font-semibold text-left text-gray-800 transition hover:text-gray-500 dark:hs-accordion-active:text-blue-500 dark:text-gray-200 dark:hover:text-gray-400","aria-controls":"hs-basic-always-open-collapse-three"},[t(" Accordion #3 "),e("i",{class:"mgc_add_line hs-accordion-active:hidden hs-accordion-active:text-blue-600 hs-accordion-active:group-hover:text-blue-600 block w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"}),e("i",{class:"mgc_minimize_line hs-accordion-active:block hs-accordion-active:text-blue-600 hs-accordion-active:group-hover:text-blue-600 hidden w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"})]),e("div",{id:"hs-basic-always-open-collapse-three",class:"hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300","aria-labelledby":"hs-basic-always-open-heading-three"},[e("p",{class:"text-gray-800 dark:text-gray-200"}," Tailwind CSS offers a seamless way to build modern websites without having to leave your HTML. The framework functions by scanning all of your HTML files, JavaScript components, and templates for class names, automatically generating corresponding styles, and writing them to a static CSS file. This approach is fast, flexible, and reliable, requiring zero runtime. Whether you need to create form layouts, tables, or modal dialogs, Tailwind CSS provides everything necessary to design beautiful, responsive web applications. Additionally, the framework includes checkout forms, shopping carts, and product views, making it the ideal choice for developing your next e-commerce front-end. ")])])],-1)])),_:1}),o(r,{title:"Bordered"},{"card-body":i(()=>a[2]||(a[2]=[e("div",{class:"hs-accordion-group"},[e("div",{class:"hs-accordion active bg-white border -mt-px first:rounded-t-lg last:rounded-b-lg dark:bg-gray-800 dark:border-gray-700",i
1d:"hs-bordered-heading-one"},[e("button",{class:"hs-accordion-toggle hs-accordion-active:text-blue-600 inline-flex items-center gap-x-3 w-full font-semibold text-left text-gray-800 transition py-4 px-5 hover:text-gray-500 dark:hs-accordion-active:text-blue-500 dark:text-gray-200 dark:hover:text-gray-400","aria-controls":"hs-basic-bordered-collapse-one"},[t(" Accordion #1 "),e("i",{class:"mgc_add_line hs-accordion-active:hidden hs-accordion-active:text-blue-600 hs-accordion-active:group-hover:text-blue-600 block w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"}),e("i",{class:"mgc_minimize_line hs-accordion-active:block hs-accordion-active:text-blue-600 hs-accordion-active:group-hover:text-blue-600 hidden w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"})]),e("div",{id:"hs-basic-bordered-collapse-one",class:"hs-accordion-content w-full overflow-hidden transition-[height] duration-300","aria-labelledby":"hs-bordered-heading-one"},[e("div",{class:"pb-4 px-5"},[e("p",{class:"text-gray-800 dark:text-gray-200"}," Tailwind CSS offers a seamless way to build modern websites without having to leave your HTML. The framework functions by scanning all of your HTML files, JavaScript components, and templates for class names, automatically generating corresponding styles, and writing them to a static CSS file. This approach is fast, flexible, and reliable, requiring zero runtime. Whether you need to create form layouts, tables, or modal dialogs, Tailwind CSS provides everything necessary to design beautiful, responsive web applications. Additionally, the framework includes checkout forms, shopping carts, and product views, making it the ideal choice for developing your next e-commerce front-end. ")])])]),e("div",{class:"hs-accordion bg-white border -mt-px first:rounded-t-lg last:rounded-b-lg dark:bg-gray-800 dark:border-gray-700",id:"hs-bordered-heading-two"},[e("button",{class:"hs-accordion-toggle hs-accordion-active:text-blue-600 inline-flex items-center gap-x-3 w-full font-semibold text-left text-gray-800 transition py-4 px-5 hover:text-gray-500 dark:hs-accordion-active:text-blue-500 dark:text-gray-200 dark:hover:text-gray-400","aria-controls":"hs-basic-bordered-collapse-two"},[t(" Accordion #2 "),e("i",{class:"mgc_add_line hs-accordion-active:hidden hs-accordion-active:text-blue-600 hs-accordion-active:group-hover:text-blue-600 block w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"}),e("i",{class:"mgc_minimize_line hs-accordion-active:block hs-accordion-active:text-blue-600 hs-accordion-active:group-hover:text-blue-600 hidden w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"})]),e("div",{id:"hs-basic-bordered-collapse-two",class:"hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300","aria-labelledby":"hs-bordered-heading-two"},[e("div",{class:"pb-4 px-5"},[e("p",{class:"text-gray-800 dark:text-gray-200"}," Tailwind CSS offers a seamless way to build modern websites without having to leave your HTML. The framework functions by scanning all of your HTML files, JavaScript components, and templates for class names, automatically generating corresponding styles, and writing them to a static CSS file. This approach is fast, flexible, and reliable, requiring zero runtime. Whether you need to create form layouts, tables, or modal dialogs, Tailwind CSS provides everything necessary to design beautiful, responsive web applications. Additionally, the framework includes checkout forms, shopping carts, and product views, making it the ideal choice for developing your next e-commerce front-end. ")])])]),e("div",{class:"hs-accordion bg-white border -mt-px first:rounded-t-lg last:rounded-b-lg dark:bg-gray-800 dark:border-gray-700",id:"hs-bordered-heading-three"},[e("button",{class:"hs-accordion-toggle hs-accordion-active:text-blue-600 inline-flex items-center gap-x-3 w-full font-semibold text-left text-gray-800 transition py-4 px-5 hover:text-gray-500 dark:hs-accordion-active:text-blue-500 dark:text-gray-200 dark:hover:text-gray-400","aria-controls":"hs-basic-bordered-collapse-three"},[t(" Accordion #3 "),e("i",{class:"mgc_add_line hs-accordion-active:hidden hs-accordion-active:text-blue-600 hs-accordion-active:group-hover:text-blue-600 block w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"}),e("i",{class:"mgc_minimize_line hs-accordion-active:block hs-accordion-active:text-blue-600 hs-accordion-active:group-hover:text-blue-600 hidden w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"})]),e("div",{id:"hs-basic-bordered-collapse-three",class:"hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300","aria-labelledby":" hs-bordered-heading-three"},[e("div",{class:"pb-4 px-5"},[e("p",{class:"text-gray-800 dark:text-gray-200"}," Tailwind CSS offers a seamless way to build modern websites without having to leave your HTML. The framework functions by scanning all of your HTML files, JavaScript components, and templates for class names, automatically generating corresponding styles, and writing them to a static CSS file. This approach is fast, flexible, and reliable, requiring zero runtime. Whether you need to create form layouts, tables, or modal dialogs, Tailwind CSS provides everything necessary to design beautiful, responsive web applications. Additionally, the framework includes checkout forms, shopping carts, and product views, making it the ideal choice for developing your next e-commerce front-end. ")])])])],-1)])),_:1}),o(r,{title:"With Icon"},{"card-body":i(()=>a[3]||(a[3]=[e("div",{class:"hs-accordion-group"},[e("div",{class:"hs-accordion active",id:"hs-basic-with-title-and-arrow-stretched-heading-one"},[e("button",{class:"hs-accordion-toggle hs-accordion-active:text-blue-600 group py-3 inline-flex items-center justify-between gap-x-3 w-full font-semibold text-left text-gray-800 transition hover:text-gray-500 dark:hs-accordion-active:text-blue-500 dark:text-gray-200 dark:hover:text-gray-400","aria-controls":"hs-basic-with-title-and-arrow-stretched-collapse-one"},[e("i",{class:"mgc_store_2_line text-lg"}),t(" Accordion #1 "),e("i",{class:"mgc_down_line hs-accordion-active:rotate-180 ms-auto transition-all text-xl"})]),e("div",{id:"hs-basic-with-title-and-arrow-stretched-collapse-one",class:"hs-accordion-content w-full overflow-hidden transition-[height] duration-300","aria-labelledby":"hs-basic-with-title-and-arrow-stretched-heading-one"},[e("p",{class:"text-gray-800 dark:text-gray-200"}," Tailwind CSS offers a seamless way to build modern websites without having to leave your HTML. The framework functions by scanning all of your HTML files, JavaScript components, and templates for class names, automatically generating corresponding styles, and writing them to a static CSS file. This approach is fast, flexible, and reliable, requiring zero runtime. Whether you need to create form layouts, tables, or modal dialogs, Tailwind CSS provides everything necessary to design beautiful, responsive web applications. Additionally, the framework includes checkout forms, shopping carts, and product views, making it the ideal choice for developing your next e-commerce front-end. ")])]),e("div",{class:"hs-accordion",id:"hs-basic-with-title-and-arrow-stretched-heading-two"},[e("button",{class:"hs-accordion-toggle hs-accordion-active:text-blue-600 group py-3 inline-flex items-center justify-between gap-x-3 w-full font-semibold text-left text-gray-800 transition hover:text-gray-500 dark:hs-accordion-active:text-blue-500 dark:text-gray-200 dark:hover:text-gray-400","aria-controls":"hs-basic-with-title-and-arrow-stretched-collapse-two"},[e("i",{class:"mgc_safe_flash_line text-lg"}),t(" Accordion #2 "),e("i",{class:"mgc_down_line hs-accordion-active:rotate-180 ms-auto transition-all text-xl"})]),e("div",{id:"hs-basic-with-title-and-arrow-stretched-collapse-two",class:"hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300","aria-labelledby":"hs-basic-with-title-and-arrow-stretched-heading-two"},[e("p",{class:"text-gray-800 dark:text-gray-200"}," Tailwind CSS offers a seamless way to build modern websites without having to leave your HTML. The framework functions by scanning all of your HTML files, JavaScript components, and templates for class names, automatically generating corresponding styles, and writing them to a static CSS file. This approach is fast, flexible, and reliable, requiring zero runtime. Whether you need to create form layouts, tables, or modal dialogs, Tailwind CSS provides everything necessary to design beautiful, responsive web applications. Additionally, the framework includes checkout forms, shopping carts, and product views, making it the ideal choice for developing your next e-commerce front-end. ")])]),e("div",{class:"hs-accordion",id:"hs-basic-with-title-and-arrow-stretched-heading-three"},[e("button",{class:"hs-accordion-toggle hs-accordion-active:text-blue-600 group py-3 inline-flex items-center justify-between gap-x-3 w-full font-semibold text-left text-gray-800 transition hover:text-gray-500 dark:hs-accordion-active:text-blue-500 dark:text-gray-200 dark:hover:text-gray-400","aria-controls":"hs-basic-with-title-and-arrow-stretched-collapse-three"},[e("i",{class:"mgc_home_3_line text-lg"}),t(" Accordion #3 "),e("i",{class:"mgc_down_line hs-accordion-active:rotate-180 ms-auto transition-all text-xl"})]),e("div",{id:"hs-basic-with-title-and-arrow-stretched-collapse-three",class:"hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300","aria-labelledby":"hs-basic-with-title-and-arrow-stretched-heading-three"},[e("p",{class:"text-gray-800 dark:text-gray-200"}," Tailwind CSS offers a seamless way to build modern websites without having to leave your HTML. The framework functions by scanning all of your HTML files, JavaScript components, and templates for class names, automatically generating corresponding styles, and writing them to a static CSS file. This approach is fast, flexible, and reliable, requiring zero runtime. Whether you need to create form layouts, tables, or modal dialogs, Tailwind CSS provides everything necessary to design beautiful, responsive web applications. Additionally, the framework includes checkout forms, shopping carts, and product views, making it the ideal choice for developing your next e-commerce front-end. ")])])],-1)])),_:1}),o(r,{title:"With arrow"},{"card-body":i(()=>a[4]||(a[4]=[e("div",{class:"hs-accordion-group"},[e("div",{class:"hs-accordion active",id:"hs-basic-with-title-and-arrow-stretched-heading-one"},[e("button",{class:"hs-accordion-toggle hs-accordion-active:text-blue-600 group py-3 inline-flex items-center justify-between gap-x-3 w-full font-semibold text-left text-gray-800 transition hover:text-gray-500 dark:hs-accordion-active:text-blue-500 dark:text-gray-200 dark:hover:text-gray-400","aria-controls":"hs-basic-with-title-and-arrow-stretched-collapse-one"},[t(" Accordion #1 "),e("i",{class:"mgc_down_line hs-accordion-active:rotate-180 ms-auto transition-all text-xl"})]),e("div",{id:"hs-basic-with-title-and-arrow-stretched-collapse-one",class:"hs-accordion-content w-full overflow-hidden transition-[height] duration-300","aria-labelledby":"hs-basic-with-title-and-arrow-stretched-heading-one"},[e("p",{class:"text-gray-800 dark:text-gray-200"}," Tailwind CSS offers a seamless way to build modern websites without having to leave your HTML. The framework functions by scanning all of your HTML files, JavaScript components, and templates for class names, automatically generating corresponding styles, and writing them to a static CSS file. This approach is fast, flexible, and reliable, requiring zero runtime. Whether you need to create form layouts, tables, or modal dialogs, Tailwind CSS provides everything necessary to design beautiful, responsive web applications. Additionally, the framework includes checkout forms, shopping carts, and product views, making it the ideal choice for developing your next e-commerce front-end. ")])]),e("div",{class:"hs-accordion",id:"hs-basic-with-title-and-arrow-stretched-heading-two"},[e("button",{class:"hs-accordion-toggle hs-accordion-active:text-blue-600 group py-3 inline-flex items-center justify-between gap-x-3 w-full font-semibold text-left text-gray-800 transition hover:text-gray-500 dark:hs-accordion-active:text-blue-500 dark:text-gray-200 dark:hover:text-gray-400","aria-controls":"hs-basic-with-title-and-arrow-stretched-collapse-two"},[t(" Accordion #2 "),e("i",{class:"mgc_down_line hs-accordion-active:rotate-180 ms-auto transition-all text-xl"})]),e("div",{id:"hs-basic-with-title-and-arrow-stretched-collapse-two",class:"hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300","aria-labelledby":"hs-basic-with-title-and-arrow-stretched-heading-two"},[e("p",{class:"text-gray-800 dark:text-gray-200"}," Tailwind CSS offers a seamless way to build modern websites without having to leave your HTML. The framework functions by scanning all of your HTML files, JavaScript components, and templates for class names, automatically generating corresponding styles, and writing them to a static CSS file. This approach is fast, flexible, and reliable, requiring zero runtime. Whether you need to create form layouts, tables, or modal dialogs, Tailwind CSS provides everything necessary to design beautiful, responsive web applications. Additionally, the framework includes checkout forms, shopping carts, and product views, making it the ideal choice for developing your next e-commerce front-end. ")])]),e("div",{class:"hs-accordion",id:"hs-basic-with-title-and-arrow-stretched-heading-three"},[e("button",{class:"hs-accordion-toggle hs-accordion-active:text-blue-600 group py-3 inline-flex items-center justify-between gap-x-3 w-full font-semibold text-left text-gray-800 transition hover:text-gray-500 dark:hs-accordion-active:text-blue-500 dark:text-gray-200 dark:hover:text-gray-400","aria-controls":"hs-basic-with-title-and-arrow-stretched-collapse-three"},[t(" Accordion #3 "),e("i",{class:"mgc_down_line hs-accordion-active:rotate-180 ms-auto transition-all text-xl"})]),e("div",{id:"hs-basic-with-title-and-arrow-stretched-collapse-three",class:"hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300","aria-labelledby":"hs-basic-with-title-and-arrow-stretched-heading-three"},[e("p",{class:"text-gray-800 dark:text-gray-200"}," Tailwind CSS offers a seamless way to build modern websites without having to leave your HTML. The framework functions by scanning all of your HTML files, JavaScript components, and templates for class names, automatically generating corresponding styles, and writing them to a static CSS file. This approach is fast, flexible, and reliable, requiring zero runtime. Whether you need to create form layouts, tables, or modal dialogs, Tailwind CSS provides everything necessary to design beautiful, responsive web applications. Additionally, the framework includes checkout forms, shopping carts, and product views, making it the ideal choice for developing your next e-commerce front-end. ")])])],-1)])),_:1}),o(r,{title:"No arrow"},{"card-body":i(()=>a[5]||(a[5]=[e("div",{class:"hs-accordion-group"},[e("div",{class:"hs-accordion active",id:"hs-basic-with-title-and-arrow-stretched-heading-one"},[e("button",{class:"hs-accordion-toggle hs-accordion-active:text-blue-600 group py-3 inline-flex items-center justify-between gap-x-3 w-full font-semibold text-left text-gray-800 transition hover:text-gray-500 dark:hs-accordion-active:text-blue-500 dark:text-gray-200 dark:hover:text-gray-400","aria-controls":"hs-basic-with-title-and-arrow-stretched-collapse-one"}," Accordion #1 "),e("div",{id:"hs-basic-with-title-and-arrow-stretched-collapse-one",class:"hs-accordion-content w-full overflow-hidden transition-[height] duration-300","aria-labelledby":"hs-basic-with-title-and-arrow-stretched-heading-one"},[e("p",{class:"text-gray-800 dark:text-gray-200"}," Tailwind CSS offers a seamless way to build modern websites without having to leave your HTML. The framework functions by scanning all of your HTML files, JavaScript components, and templates for class names, automatically generating corresponding styles, and writing them to a static CSS file. This approach is fa
1st, flexible, and reliable, requiring zero runtime. Whether you need to create form layouts, tables, or modal dialogs, Tailwind CSS provides everything necessary to design beautiful, responsive web applications. Additionally, the framework includes checkout forms, shopping carts, and product views, making it the ideal choice for developing your next e-commerce front-end. ")])]),e("div",{class:"hs-accordion",id:"hs-basic-with-title-and-arrow-stretched-heading-two"},[e("button",{class:"hs-accordion-toggle hs-accordion-active:text-blue-600 group py-3 inline-flex items-center justify-between gap-x-3 w-full font-semibold text-left text-gray-800 transition hover:text-gray-500 dark:hs-accordion-active:text-blue-500 dark:text-gray-200 dark:hover:text-gray-400","aria-controls":"hs-basic-with-title-and-arrow-stretched-collapse-two"}," Accordion #2 "),e("div",{id:"hs-basic-with-title-and-arrow-stretched-collapse-two",class:"hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300","aria-labelledby":"hs-basic-with-title-and-arrow-stretched-heading-two"},[e("p",{class:"text-gray-800 dark:text-gray-200"}," Tailwind CSS offers a seamless way to build modern websites without having to leave your HTML. The framework functions by scanning all of your HTML files, JavaScript components, and templates for class names, automatically generating corresponding styles, and writing them to a static CSS file. This approach is fast, flexible, and reliable, requiring zero runtime. Whether you need to create form layouts, tables, or modal dialogs, Tailwind CSS provides everything necessary to design beautiful, responsive web applications. Additionally, the framework includes checkout forms, shopping carts, and product views, making it the ideal choice for developing your next e-commerce front-end. ")])]),e("div",{class:"hs-accordion",id:"hs-basic-with-title-and-arrow-stretched-heading-three"},[e("button",{class:"hs-accordion-toggle hs-accordion-active:text-blue-600 group py-3 inline-flex items-center justify-between gap-x-3 w-full font-semibold text-left text-gray-800 transition hover:text-gray-500 dark:hs-accordion-active:text-blue-500 dark:text-gray-200 dark:hover:text-gray-400","aria-controls":"hs-basic-with-title-and-arrow-stretched-collapse-three"}," Accordion #3 "),e("div",{id:"hs-basic-with-title-and-arrow-stretched-collapse-three",class:"hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300","aria-labelledby":"hs-basic-with-title-and-arrow-stretched-heading-three"},[e("p",{class:"text-gray-800 dark:text-gray-200"}," Tailwind CSS offers a seamless way to build modern websites without having to leave your HTML. The framework functions by scanning all of your HTML files, JavaScript components, and templates for class names, automatically generating corresponding styles, and writing them to a static CSS file. This approach is fast, flexible, and reliable, requiring zero runtime. Whether you need to create form layouts, tables, or modal dialogs, Tailwind CSS provides everything necessary to design beautiful, responsive web applications. Additionally, the framework includes checkout forms, shopping carts, and product views, making it the ideal choice for developing your next e-commerce front-end. ")])])],-1)])),_:1}),o(r,{title:"Nested"},{"card-body":i(()=>a[6]||(a[6]=[e("div",{class:"hs-accordion-group"},[e("div",{class:"hs-accordion active",id:"hs-basic-nested-heading-one"},[e("button",{class:"hs-accordion-toggle hs-accordion-active:text-blue-600 py-3 inline-flex items-center gap-x-3 w-full font-semibold text-left text-gray-800 transition hover:text-gray-500 dark:hs-accordion-active:text-blue-500 dark:text-gray-200 dark:hover:text-gray-400","aria-controls":"hs-basic-nested-collapse-one"},[t(" Accordion #1 "),e("i",{class:"mgc_add_line hs-accordion-active:hidden hs-accordion-active:text-blue-600 hs-accordion-active:group-hover:text-blue-600 block w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"}),e("i",{class:"mgc_minimize_line hs-accordion-active:block hs-accordion-active:text-blue-600 hs-accordion-active:group-hover:text-blue-600 hidden w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"})]),e("div",{id:"hs-basic-nested-collapse-one",class:"hs-accordion-content w-full overflow-hidden transition-[height] duration-300","aria-labelledby":"hs-basic-nested-heading-one"},[e("div",{class:"hs-accordion-group pl-6"},[e("div",{class:"hs-accordion active",id:"hs-basic-nested-sub-heading-one"},[e("button",{class:"hs-accordion-toggle hs-accordion-active:text-blue-600 py-3 inline-flex items-center gap-x-3 w-full font-semibold text-left text-gray-800 transition hover:text-gray-500 dark:hs-accordion-active:text-blue-500 dark:text-gray-200 dark:hover:text-gray-400","aria-controls":"hs-basic-nested-sub-collapse-one"},[t(" Sub accordion #1 "),e("i",{class:"mgc_add_line hs-accordion-active:hidden hs-accordion-active:text-blue-600 hs-accordion-active:group-hover:text-blue-600 block w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"}),e("i",{class:"mgc_minimize_line hs-accordion-active:block hs-accordion-active:text-blue-600 hs-accordion-active:group-hover:text-blue-600 hidden w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"})]),e("div",{id:"hs-basic-nested-sub-collapse-one",class:"hs-accordion-content w-full overflow-hidden transition-[height] duration-300","aria-labelledby":"hs-basic-nested-sub-heading-one"},[e("p",{class:"text-gray-800 dark:text-gray-200"}," Tailwind CSS offers a seamless way to build modern websites without having to leave your HTML. The framework functions by scanning all of your HTML files, JavaScript components, and templates for class names, automatically generating corresponding styles, and writing them to a static CSS file. This approach is fast, flexible, and reliable, requiring zero runtime. Whether you need to create form layouts, tables, or modal dialogs, Tailwind CSS provides everything necessary to design beautiful, responsive web applications. Additionally, the framework includes checkout forms, shopping carts, and product views, making it the ideal choice for developing your next e-commerce front-end. ")])]),e("div",{class:"hs-accordion",id:"hs-basic-nested-sub-heading-two"},[e("button",{class:"hs-accordion-toggle hs-accordion-active:text-blue-600 py-3 inline-flex items-center gap-x-3 w-full font-semibold text-left text-gray-800 transition hover:text-gray-500 dark:hs-accordion-active:text-blue-500 dark:text-gray-200 dark:hover:text-gray-400","aria-controls":"hs-basic-nested-sub-collapse-two"},[t(" Sub accordion #2 "),e("i",{class:"mgc_add_line hs-accordion-active:hidden hs-accordion-active:text-blue-600 hs-accordion-active:group-hover:text-blue-600 block w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"}),e("i",{class:"mgc_minimize_line hs-accordion-active:block hs-accordion-active:text-blue-600 hs-accordion-active:group-hover:text-blue-600 hidden w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"})]),e("div",{id:"hs-basic-nested-sub-collapse-two",class:"hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300","aria-labelledby":"hs-basic-nested-sub-heading-two"},[e("p",{class:"text-gray-800 dark:text-gray-200"}," Tailwind CSS offers a seamless way to build modern websites without having to leave your HTML. The framework functions by scanning all of your HTML files, JavaScript components, and templates for class names, automatically generating corresponding styles, and writing them to a static CSS file. This approach is fast, flexible, and reliable, requiring zero runtime. Whether you need to create form layouts, tables, or modal dialogs, Tailwind CSS provides everything necessary to design beautiful, responsive web applications. Additionally, the framework includes checkout forms, shopping carts, and product views, making it the ideal choice for developing your next e-commerce front-end. ")])]),e("div",{class:"hs-accordion",id:"hs-basic-nested-sub-heading-three"},[e("button",{class:"hs-accordion-toggle hs-accordion-active:text-blue-600 py-3 inline-flex items-center gap-x-3 w-full font-semibold text-left text-gray-800 transition hover:text-gray-500 dark:hs-accordion-active:text-blue-500 dark:text-gray-200 dark:hover:text-gray-400","aria-controls":"hs-basic-nested-sub-collapse-three"},[t(" Sub accordion #3 "),e("i",{class:"mgc_add_line hs-accordion-active:hidden hs-accordion-active:text-blue-600 hs-accordion-active:group-hover:text-blue-600 block w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"}),e("i",{class:"mgc_minimize_line hs-accordion-active:block hs-accordion-active:text-blue-600 hs-accordion-active:group-hover:text-blue-600 hidden w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"})]),e("div",{id:"hs-basic-nested-sub-collapse-three",class:"hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300","aria-labelledby":"hs-basic-nested-sub-heading-three"},[e("p",{class:"text-gray-800 dark:text-gray-200"}," Tailwind CSS offers a seamless way to build modern websites without having to leave your HTML. The framework functions by scanning all of your HTML files, JavaScript components, and templates for class names, automatically generating corresponding styles, and writing them to a static CSS file. This approach is fast, flexible, and reliable, requiring zero runtime. Whether you need to create form layouts, tables, or modal dialogs, Tailwind CSS provides everything necessary to design beautiful, responsive web applications. Additionally, the framework includes checkout forms, shopping carts, and product views, making it the ideal choice for developing your next e-commerce front-end. ")])])])])]),e("div",{class:"hs-accordion",id:"hs-basic-nested-heading-two"},[e("button",{class:"hs-accordion-toggle hs-accordion-active:text-blue-600 py-3 inline-flex items-center gap-x-3 w-full font-semibold text-left text-gray-800 transition hover:text-gray-500 dark:hs-accordion-active:text-blue-500 dark:text-gray-200 dark:hover:text-gray-400","aria-controls":"hs-basic-nested-collapse-two"},[t(" Accordion #2 "),e("i",{class:"mgc_add_line hs-accordion-active:hidden hs-accordion-active:text-blue-600 hs-accordion-active:group-hover:text-blue-600 block w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"}),e("i",{class:"mgc_minimize_line hs-accordion-active:block hs-accordion-active:text-blue-600 hs-accordion-active:group-hover:text-blue-600 hidden w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"})]),e("div",{id:"hs-basic-nested-collapse-two",class:"hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300","aria-labelledby":"hs-basic-nested-heading-two"},[e("p",{class:"text-gray-800 dark:text-gray-200"}," Tailwind CSS offers a seamless way to build modern websites without having to leave your HTML. The framework functions by scanning all of your HTML files, JavaScript components, and templates for class names, automatically generating corresponding styles, and writing them to a static CSS file. This approach is fast, flexible, and reliable, requiring zero runtime. Whether you need to create form layouts, tables, or modal dialogs, Tailwind CSS provides everything necessary to design beautiful, responsive web applications. Additionally, the framework includes checkout forms, shopping carts, and product views, making it the ideal choice for developing your next e-commerce front-end. ")])]),e("div",{class:"hs-accordion",id:"hs-basic-nested-heading-three"},[e("button",{class:"hs-accordion-toggle hs-accordion-active:text-blue-600 py-3 inline-flex items-center gap-x-3 w-full font-semibold text-left text-gray-800 transition hover:text-gray-500 dark:hs-accordion-active:text-blue-500 dark:text-gray-200 dark:hover:text-gray-400","aria-controls":"hs-basic-nested-collapse-three"},[t(" Accordion #3 "),e("i",{class:"mgc_add_line hs-accordion-active:hidden hs-accordion-active:text-blue-600 hs-accordion-active:group-hover:text-blue-600 block w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"}),e("i",{class:"mgc_minimize_line hs-accordion-active:block hs-accordion-active:text-blue-600 hs-accordion-active:group-hover:text-blue-600 hidden w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"})]),e("div",{id:"hs-basic-nested-collapse-three",class:"hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300","aria-labelledby":"hs-basic-nested-heading-three"},[e("p",{class:"text-gray-800 dark:text-gray-200"}," Tailwind CSS offers a seamless way to build modern websites without having to leave your HTML. The framework functions by scanning all of your HTML files, JavaScript components, and templates for class names, automatically generating corresponding styles, and writing them to a static CSS file. This approach is fast, flexible, and reliable, requiring zero runtime. Whether you need to create form layouts, tables, or modal dialogs, Tailwind CSS provides everything necessary to design beautiful, responsive web applications. Additionally, the framework includes checkout forms, shopping carts, and product views, making it the ideal choice for developing your next e-commerce front-end. ")])])],-1)])),_:1})])]),_:1})}const A=g(b,[["render",f],["__file","C:/Users/Admin/youngwork/halclick/src/views/base-ui/accordions.vue"]]);export{A as default};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.