Default Accordion
Accordion Header One
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
Accordion Header Two
Accordion Header Three
<div class="accordion accordion-primary accordion-wrapper">
<div class="accordion-item mb-5">
<div class="accordion-header bg-primary-light text-primary py-[0.7rem] px-3 border border-transparent rounded-md relative cursor-pointer text-sm duration-500 accordion-btn active" data-dz-item="collapseOne">
<span class="accordion-header-icon"></span>
<span class="accordion-header-text">Accordion Header One</span>
<span class="accordion-header-indicator"></span>
</div>
<div id="collapseOne" class="accordion-content">
<div class="accordion-body-text py-3.5 px-3 sm:text-sm text-xs text-body-color">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
<div class="accordion-item mb-5">
<div class="accordion-header bg-primary-light text-primary py-[0.7rem] px-3 border border-transparent rounded-md relative cursor-pointer text-sm duration-500 accordion-btn" data-dz-item="collapseTwo">
<span class="accordion-header-icon"></span>
<span class="accordion-header-text">Accordion Header Two</span>
<span class="accordion-header-indicator"></span>
</div>
<div id="collapseTwo" class="accordion-content hide">
<div class="accordion-body-text py-3.5 px-3 sm:text-sm text-xs text-body-color">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
<div class="accordion-item mb-5">
<div class="accordion-header bg-primary-light text-primary py-[0.7rem] px-3 border border-transparent rounded-md relative cursor-pointer text-sm duration-500 accordion-btn" data-dz-item="collapseThree">
<span class="accordion-header-icon"></span>
<span class="accordion-header-text">Accordion Header Three</span>
<span class="accordion-header-indicator"></span>
</div>
<div id="collapseThree" class="accordion-content hide">
<div class="accordion-body-text py-3.5 px-3 sm:text-sm text-xs text-body-color">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
</div>
Accordion bordered
Accordion Header One
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
Accordion Header Two
Accordion Header Three
<div class="accordion accordion-danger-solid accordion-wrapper">
<div class="accordion-item mb-5">
<div class="accordion-header dark:text-white bg-danger-light dark:bg-[#ff5e5e26] text-black py-[0.7rem] px-3 border border-transparent rounded-md relative cursor-pointer text-sm duration-500 accordion-btn active" data-dz-item="collapseOne1">
<span class="accordion-header-icon"></span>
<span class="accordion-header-text">Accordion Header One</span>
<span class="accordion-header-indicator"></span>
</div>
<div id="collapseOne1" class="accordion-content border-2 border-danger border-t-0 rounded-es-md rounded-ee-md">
<div class="accordion-body-text py-3.5 px-3 sm:text-sm text-xs text-body-color">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
<div class="accordion-item mb-5">
<div class="accordion-header dark:text-white bg-danger-light dark:bg-[#ff5e5e26] text-black py-[0.7rem] px-3 border border-transparent rounded-md relative cursor-pointer text-sm duration-500 accordion-btn" data-dz-item="collapseTwo1">
<span class="accordion-header-icon"></span>
<span class="accordion-header-text">Accordion Header Two</span>
<span class="accordion-header-indicator"></span>
</div>
<div id="collapseTwo1" class="accordion-content border-2 border-danger border-t-0 rounded-es-md rounded-ee-md hide">
<div class="accordion-body-text py-3.5 px-3 sm:text-sm text-xs text-body-color">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
<div class="accordion-item mb-5">
<div class="accordion-header dark:text-white bg-danger-light dark:bg-[#ff5e5e26] text-black py-[0.7rem] px-3 border border-transparent rounded-md relative cursor-pointer text-sm duration-500 accordion-btn" data-dz-item="collapseThree1">
<span class="accordion-header-icon"></span>
<span class="accordion-header-text">Accordion Header Three</span>
<span class="accordion-header-indicator"></span>
</div>
<div id="collapseThree1" class="accordion-content border-2 border-danger border-t-0 rounded-es-md rounded-ee-md hide">
<div class="accordion-body-text py-3.5 px-3 sm:text-sm text-xs text-body-color">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
</div>
Accordion without space
Accordion Header One
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
Accordion Header Two
Accordion Header Three
<div class="accordion accordion-no-gutter accordion-header-bg accordion-wrapper">
<div class="accordion-item">
<div class="accordion-header dark:text-white bg-[#F3F0EC] dark:bg-[#151C2C] py-[0.7rem] px-3 border border-transparent rounded-ss-md rounded-se-md relative cursor-pointer text-sm duration-500 accordion-btn active" data-dz-item="collapseOne2">
<span class="accordion-header-icon"></span>
<span class="accordion-header-text">Accordion Header One</span>
<span class="accordion-header-indicator"></span>
</div>
<div id="collapseOne2" class="accordion-content">
<div class="accordion-body-text py-3.5 px-3 sm:text-sm text-xs text-body-color">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header dark:text-white bg-[#F3F0EC] dark:bg-[#151C2C] py-[0.7rem] px-3 border border-transparent relative cursor-pointer text-sm duration-500 accordion-btn" data-dz-item="collapseTwo2">
<span class="accordion-header-icon"></span>
<span class="accordion-header-text">Accordion Header Two</span>
<span class="accordion-header-indicator"></span>
</div>
<div id="collapseTwo2" class="accordion-content hide">
<div class="accordion-body-text py-3.5 px-3 sm:text-sm text-xs text-body-color">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header dark:text-white bg-[#F3F0EC] dark:bg-[#151C2C] py-[0.7rem] px-3 border border-transparent rounded-es-md rounded-ee-md relative cursor-pointer text-sm duration-500 accordion-btn" data-dz-item="collapseThree2">
<span class="accordion-header-icon"></span>
<span class="accordion-header-text">Accordion Header Three</span>
<span class="accordion-header-indicator"></span>
</div>
<div id="collapseThree2" class="accordion-content hide">
<div class="accordion-body-text py-3.5 px-3 sm:text-sm text-xs text-body-color">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
</div>
Accordion without space with border
Accordion Header One
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
Accordion Header Two
Accordion Header Three
<div class="accordion accordion-no-gutter accordion-bordered accordion-wrapper">
<div class="accordion-item">
<div class="accordion-header dark:text-white py-[0.7rem] px-3 border border-[#E6E6E6] dark:border-[#ffffff1a] border-b-0 rounded-ss-md rounded-se-md relative cursor-pointer text-sm duration-500 accordion-btn active" data-dz-item="collapseOne3">
<span class="accordion-header-icon"></span>
<span class="accordion-header-text">Accordion Header One</span>
<span class="accordion-header-indicator"></span>
</div>
<div id="collapseOne3" class="accordion-content border border-[#E6E6E6] dark:border-[#ffffff1a] border-b-0">
<div class="accordion-body-text py-3.5 px-3 sm:text-sm text-xs text-body-color">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header dark:text-white py-[0.7rem] px-3 border border-[#E6E6E6] dark:border-[#ffffff1a] border-b-0 relative cursor-pointer text-sm duration-500 accordion-btn" data-dz-item="collapseTwo3">
<span class="accordion-header-icon"></span>
<span class="accordion-header-text">Accordion Header Two</span>
<span class="accordion-header-indicator"></span>
</div>
<div id="collapseTwo3" class="accordion-content border border-[#E6E6E6] dark:border-[#ffffff1a] border-b-0 hide">
<div class="accordion-body-text py-3.5 px-3 sm:text-sm text-xs text-body-color">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header dark:text-white py-[0.7rem] px-3 border border-[#E6E6E6] dark:border-[#ffffff1a] rounded-es-md rounded-ee-md relative cursor-pointer text-sm duration-500 accordion-btn" data-dz-item="collapseThree3">
<span class="accordion-header-icon"></span>
<span class="accordion-header-text">Accordion Header Three</span>
<span class="accordion-header-indicator"></span>
</div>
<div id="collapseThree3" class="accordion-content rounded-es-md rounded-ee-md border border-[#E6E6E6] dark:border-transparent border-t-0 hide">
<div class="accordion-body-text py-3.5 px-3 sm:text-sm text-xs text-body-color">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
</div>
Accordion indicator in left position
Accordion Header One
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
Accordion Header Two
Accordion Header Three
<div class="accordion accordion-start-indicator accordion-wrapper">
<div class="accordion-item mb-5">
<div class="accordion-header dark:text-white py-[0.7rem] px-3 border border-[#E6E6E6] dark:border-[#ffffff1a] rounded-md relative cursor-pointer text-sm duration-500 accordion-btn active" data-dz-item="collapseOne4">
<span class="accordion-header-icon"></span>
<span class="accordion-header-text">Accordion Header One</span>
<span class="accordion-header-indicator"></span>
</div>
<div id="collapseOne4" class="accordion-content">
<div class="accordion-body-text py-3.5 px-3 sm:text-sm text-xs text-body-color">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
<div class="accordion-item mb-5">
<div class="accordion-header dark:text-white py-[0.7rem] px-3 border border-[#E6E6E6] dark:border-[#ffffff1a] rounded-md relative cursor-pointer text-sm duration-500 accordion-btn" data-dz-item="collapseTwo4">
<span class="accordion-header-icon"></span>
<span class="accordion-header-text">Accordion Header Two</span>
<span class="accordion-header-indicator"></span>
</div>
<div id="collapseTwo4" class="accordion-content hide">
<div class="accordion-body-text py-3.5 px-3 sm:text-sm text-xs text-body-color">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
<div class="accordion-item mb-5">
<div class="accordion-header dark:text-white py-[0.7rem] px-3 border border-[#E6E6E6] dark:border-[#ffffff1a] rounded-md relative cursor-pointer text-sm duration-500 accordion-btn" data-dz-item="collapseThree4">
<span class="accordion-header-icon"></span>
<span class="accordion-header-text">Accordion Header Three</span>
<span class="accordion-header-indicator"></span>
</div>
<div id="collapseThree4" class="accordion-content hide">
<div class="accordion-body-text py-3.5 px-3 sm:text-sm text-xs text-body-color">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
</div>
Accordion with icon
<div class="accordion accordion-with-icon accordion-wrapper">
<div class="accordion-item mb-5">
<div class="accordion-header dark:text-white py-[0.7rem] px-3 border border-[#E6E6E6] dark:border-[#ffffff1a] rounded-md relative cursor-pointer text-sm duration-500 accordion-btn active" data-dz-item="collapseOne5">
<span class="accordion-header-icon absolute right-auto left-[1.5625rem] font-['themify']"></span>
<span class="accordion-header-text pl-10">Accordion Header One</span>
<span class="accordion-header-indicator"></span>
</div>
<div id="collapseOne5" class="accordion-content">
<div class="accordion-body-text py-3.5 px-3 sm:text-sm text-xs text-body-color">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
<div class="accordion-item mb-5">
<div class="accordion-header dark:text-white py-[0.7rem] px-3 border border-[#E6E6E6] dark:border-[#ffffff1a] rounded-md relative cursor-pointer text-sm duration-500 accordion-btn" data-dz-item="collapseTwo5">
<span class="accordion-header-icon absolute right-auto left-[1.5625rem] font-['themify']"></span>
<span class="accordion-header-text pl-10">Accordion Header Two</span>
<span class="accordion-header-indicator"></span>
</div>
<div id="collapseTwo5" class="accordion-content hide">
<div class="accordion-body-text py-3.5 px-3 sm:text-sm text-xs text-body-color">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
<div class="accordion-item mb-5">
<div class="accordion-header dark:text-white py-[0.7rem] px-3 border border-[#E6E6E6] dark:border-[#ffffff1a] rounded-md relative cursor-pointer text-sm duration-500 accordion-btn" data-dz-item="collapseThree5">
<span class="accordion-header-icon absolute right-auto left-[1.5625rem] font-['themify']"></span>
<span class="accordion-header-text pl-10">Accordion Header Three</span>
<span class="accordion-header-indicator"></span>
</div>
<div id="collapseThree5" class="accordion-content hide">
<div class="accordion-body-text py-3.5 px-3 sm:text-sm text-xs text-body-color">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
</div>
Accordion header background
Accordion Header One
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
Accordion Header Two
Accordion Header Three
<div class="accordion accordion-header-bg accordion-bordered accordion-wrapper">
<div class="accordion-item mb-5">
<div class="accordion-header text-white bg-primary py-[0.7rem] px-3 border border-transparent dark:border-[#ffffff1a] rounded-md relative cursor-pointer text-sm duration-500 accordion-btn active" data-dz-item="collapseOne6">
<span class="accordion-header-icon"></span>
<span class="accordion-header-text">Accordion Header One</span>
<span class="accordion-header-indicator"></span>
</div>
<div id="collapseOne6" class="accordion-content border border-[#E6E6E6] dark:border-[#ffffff1a] border-t-0 rounded-es-md rounded-ee-md">
<div class="accordion-body-text py-3.5 px-3 sm:text-sm text-xs text-body-color">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
<div class="accordion-item mb-5">
<div class="accordion-header text-white bg-info py-[0.7rem] px-3 border border-transparent dark:border-[#ffffff1a] rounded-md relative cursor-pointer text-sm duration-500 accordion-btn" data-dz-item="collapseTwo6">
<span class="accordion-header-icon"></span>
<span class="accordion-header-text">Accordion Header Two</span>
<span class="accordion-header-indicator"></span>
</div>
<div id="collapseTwo6" class="accordion-content border border-[#E6E6E6] dark:border-[#ffffff1a] border-t-0 rounded-es-md rounded-ee-md hide">
<div class="accordion-body-text py-3.5 px-3 sm:text-sm text-xs text-body-color">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
<div class="accordion-item mb-5">
<div class="accordion-header text-white bg-primary py-[0.7rem] px-3 border border-transparent dark:border-[#ffffff1a] rounded-md relative cursor-pointer text-sm duration-500 accordion-btn" data-dz-item="collapseThree6">
<span class="accordion-header-icon"></span>
<span class="accordion-header-text">Accordion Header Three</span>
<span class="accordion-header-indicator"></span>
</div>
<div id="collapseThree6" class="accordion-content border border-[#E6E6E6] dark:border-[#ffffff1a] border-t-0 rounded-es-md rounded-ee-md hide">
<div class="accordion-body-text py-3.5 px-3 sm:text-sm text-xs text-body-color">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
</div>
Accordion solid background
Accordion Header One
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
Accordion Header Two
Accordion Header Three
<div class="accordion accordion-solid-bg accordion-bordered accordion-wrapper">
<div class="accordion-item mb-5">
<div class="accordion-header dark:text-white bg-primary-light py-[0.7rem] px-3 border border-transparent rounded-md relative cursor-pointer text-sm duration-500 accordion-btn active" data-dz-item="collapseOne7">
<span class="accordion-header-icon"></span>
<span class="accordion-header-text">Accordion Header One</span>
<span class="accordion-header-indicator"></span>
</div>
<div id="collapseOne7" class="accordion-content bg-primary-light rounded-es-md rounded-ee-md">
<div class="accordion-body-text py-3.5 px-3 sm:text-sm text-xs text-body-color">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
<div class="accordion-item mb-5">
<div class="accordion-header dark:text-white bg-primary-light py-[0.7rem] px-3 border border-transparent rounded-md relative cursor-pointer text-sm duration-500 accordion-btn" data-dz-item="collapseTwo7">
<span class="accordion-header-icon"></span>
<span class="accordion-header-text">Accordion Header Two</span>
<span class="accordion-header-indicator"></span>
</div>
<div id="collapseTwo7" class="accordion-content bg-primary-light rounded-es-md rounded-ee-md hide">
<div class="accordion-body-text py-3.5 px-3 sm:text-sm text-xs text-body-color">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
<div class="accordion-item mb-5">
<div class="accordion-header dark:text-white bg-primary-light py-[0.7rem] px-3 border border-transparent rounded-md relative cursor-pointer text-sm duration-500 accordion-btn" data-dz-item="collapseThree7">
<span class="accordion-header-icon"></span>
<span class="accordion-header-text">Accordion Header Three</span>
<span class="accordion-header-indicator"></span>
</div>
<div id="collapseThree7" class="accordion-content bg-primary-light rounded-es-md rounded-ee-md hide">
<div class="accordion-body-text py-3.5 px-3 sm:text-sm text-xs text-body-color">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
</div>
Accordion active background
Accordion Header One
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
Accordion Header Two
Accordion Header Three
<div class="accordion accordion-active-header accordion-wrapper">
<div class="accordion-item mb-5">
<div class="accordion-header text-dark py-[0.7rem] px-3 border border-[#E6E6E6] dark:border-[#ffffff1a] rounded-md relative cursor-pointer text-sm duration-500 accordion-btn active" data-dz-item="collapseOne8">
<span class="accordion-header-icon"></span>
<span class="accordion-header-text">Accordion Header One</span>
<span class="accordion-header-indicator"></span>
</div>
<div id="collapseOne8" class="accordion-content">
<div class="accordion-body-text py-3.5 px-3 sm:text-sm text-xs text-body-color">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
<div class="accordion-item mb-5">
<div class="accordion-header text-dark py-[0.7rem] px-3 border border-[#E6E6E6] dark:border-[#ffffff1a] rounded-md relative cursor-pointer text-sm duration-500 accordion-btn" data-dz-item="collapseTwo8">
<span class="accordion-header-icon"></span>
<span class="accordion-header-text">Accordion Header Two</span>
<span class="accordion-header-indicator"></span>
</div>
<div id="collapseTwo8" class="accordion-content hide">
<div class="accordion-body-text py-3.5 px-3 sm:text-sm text-xs text-body-color">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
<div class="accordion-item mb-5">
<div class="accordion-header text-dark py-[0.7rem] px-3 border border-[#E6E6E6] dark:border-[#ffffff1a] rounded-md relative cursor-pointer text-sm duration-500 accordion-btn" data-dz-item="collapseThree8">
<span class="accordion-header-icon"></span>
<span class="accordion-header-text">Accordion Header Three</span>
<span class="accordion-header-indicator"></span>
</div>
<div id="collapseThree8" class="accordion-content hide">
<div class="accordion-body-text py-3.5 px-3 sm:text-sm text-xs text-body-color">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
</div>
Accordion header shadow
Accordion Header One
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
Accordion Header Two
Accordion Header Three
<div class="accordion accordion-header-shadow accordion-rounded accordion-wrapper">
<div class="accordion-item mb-5">
<div class="accordion-header dark:text-white shadow-[0_0_0.9375rem_-0.1875rem_rgba(0,0,0,0.3)] py-[0.7rem] px-3 border border-transparent rounded-md relative cursor-pointer text-sm duration-500 accordion-btn active" data-dz-item="collapseOne9">
<span class="accordion-header-icon"></span>
<span class="accordion-header-text">Accordion Header One</span>
<span class="accordion-header-indicator"></span>
</div>
<div id="collapseOne9" class="accordion-content">
<div class="accordion-body-text py-3.5 px-3 sm:text-sm text-xs text-body-color">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
<div class="accordion-item mb-5">
<div class="accordion-header dark:text-white shadow-[0_0_0.9375rem_-0.1875rem_rgba(0,0,0,0.3)] py-[0.7rem] px-3 border border-transparent rounded-md relative cursor-pointer text-sm duration-500 accordion-btn" data-dz-item="collapseTwo9">
<span class="accordion-header-icon"></span>
<span class="accordion-header-text">Accordion Header Two</span>
<span class="accordion-header-indicator"></span>
</div>
<div id="collapseTwo9" class="accordion-content hide">
<div class="accordion-body-text py-3.5 px-3 sm:text-sm text-xs text-body-color">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
<div class="accordion-item mb-5">
<div class="accordion-header dark:text-white shadow-[0_0_0.9375rem_-0.1875rem_rgba(0,0,0,0.3)] py-[0.7rem] px-3 border border-transparent rounded-md relative cursor-pointer text-sm duration-500 accordion-btn" data-dz-item="collapseThree9">
<span class="accordion-header-icon"></span>
<span class="accordion-header-text">Accordion Header Three</span>
<span class="accordion-header-indicator"></span>
</div>
<div id="collapseThree9" class="accordion-content hide">
<div class="accordion-body-text py-3.5 px-3 sm:text-sm text-xs text-body-color">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
</div>
Accordion rounded stylish
Accordion Header One
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
Accordion Header Two
Accordion Header Three
<div class="accordion accordion-rounded-stylish accordion-bordered accordion-wrapper">
<div class="accordion-item mb-5">
<div class="accordion-header dark:text-white py-[0.7rem] px-3 border border-[#E6E6E6] dark:border-[#ffffff1a] rounded-md relative cursor-pointer text-sm duration-500 accordion-btn active" data-dz-item="collapseOne10">
<span class="accordion-header-icon"></span>
<span class="accordion-header-text">Accordion Header One</span>
<span class="accordion-header-indicator"></span>
</div>
<div id="collapseOne10" class="accordion-content border border-[#E6E6E6] dark:border-[#ffffff1a] border-t-0 rounded-es-md rounded-ee-md">
<div class="accordion-body-text py-3.5 px-3 sm:text-sm text-xs text-body-color">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
<div class="accordion-item mb-5">
<div class="accordion-header dark:text-white py-[0.7rem] px-3 border border-[#E6E6E6] dark:border-[#ffffff1a] rounded-md relative cursor-pointer text-sm duration-500 accordion-btn" data-dz-item="collapseTwo10">
<span class="accordion-header-icon"></span>
<span class="accordion-header-text">Accordion Header Two</span>
<span class="accordion-header-indicator"></span>
</div>
<div id="collapseTwo10" class="accordion-content border border-[#E6E6E6] dark:border-[#ffffff1a] border-t-0 rounded-es-md rounded-ee-md hide">
<div class="accordion-body-text py-3.5 px-3 sm:text-sm text-xs text-body-color">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
<div class="accordion-item mb-5">
<div class="accordion-header dark:text-white py-[0.7rem] px-3 border border-[#E6E6E6] dark:border-[#ffffff1a] rounded-md relative cursor-pointer text-sm duration-500 accordion-btn" data-dz-item="collapseThree10">
<span class="accordion-header-icon"></span>
<span class="accordion-header-text">Accordion Header Three</span>
<span class="accordion-header-indicator"></span>
</div>
<div id="collapseThree10" class="accordion-content border border-[#E6E6E6] dark:border-[#ffffff1a] border-t-0 rounded-es-md rounded-ee-md hide">
<div class="accordion-body-text py-3.5 px-3 sm:text-sm text-xs text-body-color">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
</div>
Accordion gradient
Accordion Header One
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
Accordion Header Two
Accordion Header Three
<div class="accordion accordion-rounded-stylish accordion-gradient accordion-wrapper">
<div class="accordion-item mb-5">
<div class="accordion-header dark:text-white py-[0.7rem] px-3 border border-transparent rounded-md relative cursor-pointer text-sm duration-500 accordion-btn active" data-dz-item="collapseOne11">
<span class="accordion-header-icon"></span>
<span class="accordion-header-text">Accordion Header One</span>
<span class="accordion-header-indicator"></span>
</div>
<div id="collapseOne11" class="accordion-content rounded-es-md rounded-ee-md">
<div class="accordion-body-text py-3.5 px-3 sm:text-sm text-xs text-white">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
<div class="accordion-item mb-5">
<div class="accordion-header dark:text-white py-[0.7rem] px-3 border border-transparent rounded-md relative cursor-pointer text-sm duration-500 accordion-btn" data-dz-item="collapseTwo11">
<span class="accordion-header-icon"></span>
<span class="accordion-header-text">Accordion Header Two</span>
<span class="accordion-header-indicator"></span>
</div>
<div id="collapseTwo11" class="accordion-content rounded-es-md rounded-ee-md hide">
<div class="accordion-body-text py-3.5 px-3 sm:text-sm text-xs text-white">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
<div class="accordion-item mb-5">
<div class="accordion-header dark:text-white py-[0.7rem] px-3 border border-transparent rounded-md relative cursor-pointer text-sm duration-500 accordion-btn" data-dz-item="collapseThree11">
<span class="accordion-header-icon"></span>
<span class="accordion-header-text">Accordion Header Three</span>
<span class="accordion-header-indicator"></span>
</div>
<div id="collapseThree11" class="accordion-content rounded-es-md rounded-ee-md hide">
<div class="accordion-body-text py-3.5 px-3 sm:text-sm text-xs text-white">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
</div>