<div class="accordion-default" id="accordionExample" x-data="{selected:1}">
	<div class="border -mt-px first:rounded-t-lg last:rounded-b-lg border-border">
		<h2 class="text-dark"  @click="selected !== 1 ? selected = 1 : selected = null">
			<button class="accordion-button py-[11px] px-3 text-sm inline-flex items-center w-full transition font-normal" 
			:class="{'active': selected === 1,'': selected !=1}"
			type="button">
			Accordion Item #1
			</button>
		</h2>
		<div x-show="selected == 1" x-collapse>
			<div class="py-3.5 px-5 border-t border-border">
			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="border -mt-px first:rounded-t-lg last:rounded-b-lg border-border">
		<h2 class="text-dark"  @click="selected !== 2 ? selected = 2 : selected = null">
			<button class="accordion-button py-[11px] px-3 text-sm inline-flex items-center w-full transition font-normal" 
			:class="{'active': selected === 2,'': selected !=2}"
			type="button">
			Accordion Item #2
			</button>
		</h2>
		<div x-show="selected == 2" x-collapse>
			<div class="py-3.5 px-5 border-t border-border">
			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="border -mt-px first:rounded-t-lg last:rounded-b-lg border-border">
		<h2 class="text-dark"  @click="selected !== 3 ? selected = 3 : selected = null">
			<button class="accordion-button py-[11px] px-3 text-sm inline-flex items-center w-full transition font-normal" 
			:class="{'active': selected === 3,'': selected !=3}"
			type="button">
			Accordion Item #3
			</button>
		</h2>
		<div x-show="selected == 3" x-collapse>
			<div class="py-3.5 px-5 border-t border-border">
			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>
														
													

														
<div class="accordion accordion-default" id="accordionPanelsStayOpenExample">
	<div class="border -mt-px first:rounded-t-lg last:rounded-b-lg border-border"  x-data="{ open1: false }">
		<h2 class="text-dark" @click="open1 = !open1">
			<button class="accordion-button py-[11px] px-3 text-sm inline-flex items-center w-full transition font-normal" 
			:class="open1 ? 'accordion-button active' : 'accordion-button'"
			type="button">
			Accordion Item #1
			</button>
		</h2>
		<div x-show="open1" x-collapse>
			<div class="py-3.5 px-5 border-t border-border">
			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="border -mt-px first:rounded-t-lg last:rounded-b-lg border-border"  x-data="{ open2: false }">
		<h2 class="text-dark" @click="open2 = !open2">
			<button class="accordion-button py-[11px] px-3 text-sm inline-flex items-center w-full transition font-normal" 
			:class="open2 ? 'accordion-button active' : 'accordion-button'"
			type="button">
			Accordion Item #2
			</button>
		</h2>
		<div x-show="open2" x-collapse>
			<div class="py-3.5 px-5 border-t border-border">
			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="border -mt-px first:rounded-t-lg last:rounded-b-lg border-border"  x-data="{ open3: false }">
		<h2 class="text-dark" @click="open3 = !open3">
			<button class="accordion-button py-[11px] px-3 text-sm inline-flex items-center w-full transition font-normal" 
			:class="open3 ? 'accordion-button active' : 'accordion-button'"
			type="button">
			Accordion Item #3
			</button>
		</h2>
		<div x-show="open3" x-collapse>
			<div class="py-3.5 px-5 border-t border-border">
			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>
														
													

														
<div class="accordion accordion-primary" x-data="{selected:1}">
	<div class="border -mt-px first:rounded-t-lg last:rounded-b-lg border-border overflow-hidden">
		<h2 class="text-dark"  @click="selected !== 1 ? selected = 1 : selected = null">
			<button class="accordion-button py-[11px] px-3 text-sm flex items-center w-full transition font-normal" type="button"
			:class="{' active bg-primary text-white': selected === 1,'': selected !=1}">
			Accordion Item #1
			</button>
		</h2>
		<div x-show="selected == 1" x-collapse>
			<div class="py-3.5 px-5 border-t border-border">
			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="border -mt-px first:rounded-t-lg last:rounded-b-lg border-border overflow-hidden">
		<h2 class="text-dark"  @click="selected !== 2 ? selected = 2 : selected = null">
			<button class="accordion-button py-[11px] px-3 text-sm flex items-center w-full transition font-normal" type="button"
			:class="{' active bg-primary text-white': selected === 2,'': selected !=2}">
			Accordion Item #2
			</button>
		</h2>
		<div x-show="selected == 2" x-collapse>
			<div class="py-3.5 px-5 border-t border-border">
			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="border -mt-px first:rounded-t-lg last:rounded-b-lg border-border overflow-hidden">
		<h2 class="text-dark"  @click="selected !== 3 ? selected = 3 : selected = null">
			<button class="accordion-button py-[11px] px-3 text-sm flex items-center w-full transition font-normal" type="button"
			:class="{' active bg-primary text-white': selected === 3,'': selected !=3}">
			Accordion Item #3
			</button>
		</h2>
		<div x-show="selected == 3" x-collapse>
			<div class="py-3.5 px-5 border-t border-border">
			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>
														
													

														
<div class="accordion accordion-danger-solid" x-data="{selected:1}">
	<div class="border -mt-px first:rounded-t-lg last:rounded-b-lg border-dangerlight overflow-hidden">
		<h2 class="text-dark"  @click="selected !== 1 ? selected = 1 : selected = null">
			<button class="accordion-button py-[11px] px-3 text-sm flex items-center w-full transition font-normal bg-dangerlight" type="button"
			:class="{'active !bg-danger text-white': selected === 1,'': selected !=1}">
			Accordion Item #1
			</button>
		</h2>
		<div x-show="selected == 1" x-collapse>
			<div class="py-3.5 px-5 border-2 border-danger">
			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="border -mt-px first:rounded-t-lg last:rounded-b-lg border-dangerlight overflow-hidden">
		<h2 class="text-dark"  @click="selected !== 2 ? selected = 2 : selected = null">
			<button class="accordion-button py-[11px] px-3 text-sm flex items-center w-full transition font-normal bg-dangerlight" type="button"
			:class="{'active !bg-danger text-white': selected === 2,'': selected !=2}">
			Accordion Item #2
			</button>
		</h2>
		<div x-show="selected == 2" x-collapse>
			<div class="py-3.5 px-5 border-2 border-danger">
			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="border -mt-px first:rounded-t-lg last:rounded-b-lg border-dangerlight overflow-hidden">
		<h2 class="text-dark"  @click="selected !== 3 ? selected = 3 : selected = null">
			<button class="accordion-button py-[11px] px-3 text-sm flex items-center w-full transition font-normal bg-dangerlight" type="button"
			:class="{'active !bg-danger text-white': selected === 3,'': selected !=3}">
			Accordion Item #3
			</button>
		</h2>
		<div x-show="selected == 3" x-collapse>
			<div class="py-3.5 px-5 border-2 border-danger rounded-b-lg">
			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>
														
													

														
<div class="accordion accordion-no-gutter accordion-header-bg" x-data="{selected:1}">
	<div class="-mt-px first:rounded-t-lg last:rounded-b-lg overflow-hidden">
		<h2 class="text-dark"  @click="selected !== 1 ? selected = 1 : selected = null">
			<button class="accordion-button py-[11px] px-3 text-sm flex items-center w-full transition font-normal bg-light" type="button"
			:class="{'active ': selected === 1,'': selected !=1}">
			Accordion Item #1
			</button>
		</h2>
		<div x-show="selected == 1" x-collapse>
			<div class="py-3.5 px-5">
			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="-mt-px first:rounded-t-lg last:rounded-b-lg overflow-hidden">
		<h2 class="text-dark"  @click="selected !== 2 ? selected = 2 : selected = null">
			<button class="accordion-button py-[11px] px-3 text-sm flex items-center w-full transition font-normal bg-light" type="button"
			:class="{'active ': selected === 2,'': selected !=2}">
			Accordion Item #2
			</button>
		</h2>
		<div x-show="selected == 2" x-collapse>
			<div class="py-3.5 px-5">
			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="-mt-px first:rounded-t-lg last:rounded-b-lg overflow-hidden">
		<h2 class="text-dark"  @click="selected !== 3 ? selected = 3 : selected = null">
			<button class="accordion-button py-[11px] px-3 text-sm flex items-center w-full transition font-normal bg-light" type="button"
			:class="{'active ': selected === 3,'': selected !=3}">
			Accordion Item #3
			</button>
		</h2>
		<div x-show="selected == 3" x-collapse>
			<div class="py-3.5 px-5 rounded-b-lg">
			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>
														
													

														
<div class="accordion accordion-no-gutter accordion-bordered" x-data="{selected:1}">
	<div class="border -mt-px first:rounded-t-lg last:rounded-b-lg border-border">
		<h2 class="text-dark"  @click="selected !== 1 ? selected = 1 : selected = null">
			<button class="accordion-button py-[11px] px-3 text-sm inline-flex items-center w-full transition font-normal" 
			:class="{'active': selected === 1,'': selected !=1}"
			type="button">
			Accordion Header 1
			</button>
		</h2>
		<div x-show="selected == 1" x-collapse>
			<div class="py-3.5 px-5 border-t border-border">
			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="border -mt-px first:rounded-t-lg last:rounded-b-lg border-border">
		<h2 class="text-dark"  @click="selected !== 2 ? selected = 2 : selected = null">
			<button class="accordion-button py-[11px] px-3 text-sm inline-flex items-center w-full transition font-normal" 
			:class="{'active': selected === 2,'': selected !=2}"
			type="button">
			Accordion Header 2
			</button>
		</h2>
		<div x-show="selected == 2" x-collapse>
			<div class="py-3.5 px-5 border-t border-border">
			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="border -mt-px first:rounded-t-lg last:rounded-b-lg border-border">
		<h2 class="text-dark"  @click="selected !== 3 ? selected = 3 : selected = null">
			<button class="accordion-button py-[11px] px-3 text-sm inline-flex items-center w-full transition font-normal" 
			:class="{'active': selected === 3,'': selected !=3}"
			type="button">
			Accordion Header 3
			</button>
		</h2>
		<div x-show="selected == 3" x-collapse>
			<div class="py-3.5 px-5 border-t border-border">
			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>
														
													

														
<div class="accordion accordion-left-indicator" x-data="{selected:1}">
	<div class="-mt-px first:rounded-t-lg last:rounded-b-lg overflow-hidden">
		<h2 class="text-dark"  @click="selected !== 1 ? selected = 1 : selected = null">
			<button class="accordion-button py-[11px] px-3 text-sm flex items-center w-full transition font-normal bg-light pl-12 after:left-4 after:right-auto" type="button"
			:class="{'active ': selected === 1,'': selected !=1}">
			Accordion Header One
			</button>
		</h2>
		<div x-show="selected == 1" x-collapse>
			<div class="py-3.5 px-5">
			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="-mt-px first:rounded-t-lg last:rounded-b-lg overflow-hidden">
		<h2 class="text-dark"  @click="selected !== 2 ? selected = 2 : selected = null">
			<button class="accordion-button py-[11px] px-3 text-sm flex items-center w-full transition font-normal bg-light pl-12 after:left-4 after:right-auto" type="button"
			:class="{'active ': selected === 2,'': selected !=2}">
			Accordion Header Two
			</button>
		</h2>
		<div x-show="selected == 2" x-collapse>
			<div class="py-3.5 px-5">
			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="-mt-px first:rounded-t-lg last:rounded-b-lg overflow-hidden">
		<h2 class="text-dark"  @click="selected !== 3 ? selected = 3 : selected = null">
			<button class="accordion-button py-[11px] px-3 text-sm flex items-center w-full transition font-normal bg-light pl-12 after:left-4 after:right-auto" type="button"
			:class="{'active ': selected === 3,'': selected !=3}">
			Accordion Header Three
			</button>
		</h2>
		<div x-show="selected == 3" x-collapse>
			<div class="py-3.5 px-5 rounded-b-lg">
			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>
														
													

														
<div class="accordion accordion-with-icon" x-data="{selected:1}">
	<div class="border border-border -mt-px first:rounded-t-lg last:rounded-b-lg overflow-hidden">
		<h2 class="text-dark"  @click="selected !== 1 ? selected = 1 : selected = null">
			<button class="accordion-button py-[11px] px-3 text-sm flex items-center w-full transition font-normal bg-bodybg" type="button"
			:class="{'active ': selected === 1,'': selected !=1}">
			<span class="absolute right-auto left-[25px] font-['themify'] before:content-['\e645']"></span>
			<span class="pl-10">Accordion Header One</span>
			</button>
		</h2>
		<div x-show="selected == 1" x-collapse>
			<div class="py-3.5 px-5 border-t border-border">
			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="border border-border -mt-px first:rounded-t-lg last:rounded-b-lg overflow-hidden">
		<h2 class="text-dark"  @click="selected !== 2 ? selected = 2 : selected = null">
			<button class="accordion-button py-[11px] px-3 text-sm flex items-center w-full transition font-normal bg-bodybg" type="button"
			:class="{'active ': selected === 2,'': selected !=2}">
			<span class="absolute right-auto left-[25px] font-['themify'] before:content-['\e645']"></span>
			<span class="pl-10">Accordion Header Two</span>
			</button>
		</h2>
		<div x-show="selected == 2" x-collapse>
			<div class="py-3.5 px-5 border-t border-border">
			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="border border-border -mt-px first:rounded-t-lg last:rounded-b-lg overflow-hidden">
		<h2 class="text-dark"  @click="selected !== 3 ? selected = 3 : selected = null">
			<button class="accordion-button py-[11px] px-3 text-sm flex items-center w-full transition font-normal bg-bodybg" type="button"
			:class="{'active ': selected === 3,'': selected !=3}">
			<span class="absolute right-auto left-[25px] font-['themify'] before:content-['\e645']"></span>
			<span class="pl-10">Accordion Header Three</span>
			</button>
		</h2>
		<div x-show="selected == 3" x-collapse>
			<div class="py-3.5 px-5 border-t border-border rounded-b-lg">
			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>
														
													

														
<div class="accordion accordion-header-bg accordion-bordered" x-data="{selected:1}">
	<div class="-mt-px first:rounded-t-lg last:rounded-b-lg overflow-hidden">
		<h2 class="text-dark"  @click="selected !== 1 ? selected = 1 : selected = null">
			<button class="accordion-button py-[11px] px-3 text-sm flex items-center w-full transition font-normal bg-primary text-white" type="button"
			:class="{' active': selected === 1,'': selected !=1}">
			Accordion Item #1
			</button>
		</h2>
		<div x-show="selected == 1" x-collapse>
			<div class="py-3.5 px-5 border border-border border-t-0">
			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="-mt-px first:rounded-t-lg last:rounded-b-lg overflow-hidden">
		<h2 class="text-dark"  @click="selected !== 2 ? selected = 2 : selected = null">
			<button class="accordion-button py-[11px] px-3 text-sm flex items-center w-full transition font-normal bg-info text-white" type="button"
			:class="{' active': selected === 2,'': selected !=2}">
			Accordion Item #2
			</button>
		</h2>
		<div x-show="selected == 2" x-collapse>
			<div class="py-3.5 px-5 border border-border border-t-0">
			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="-mt-px first:rounded-t-lg last:rounded-b-lg overflow-hidden">
		<h2 class="text-dark"  @click="selected !== 3 ? selected = 3 : selected = null">
			<button class="accordion-button py-[11px] px-3 text-sm flex items-center w-full transition font-normal bg-primary text-white" type="button"
			:class="{' active': selected === 3,'': selected !=3}">
			Accordion Item #3
			</button>
		</h2>
		<div x-show="selected == 3" x-collapse>
			<div class="py-3.5 px-5 border border-border border-t-0">
			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>
														
													

														
<div class="accordion accordion-solid-bg" x-data="{selected:1}">
	<div class="border -mt-px first:rounded-t-lg last:rounded-b-lg border-primary overflow-hidden">
		<h2 class="text-dark"  @click="selected !== 1 ? selected = 1 : selected = null">
			<button class="accordion-button py-[11px] px-3 text-sm flex items-center w-full transition font-normal bg-primary text-white" type="button"
			:class="{' active': selected === 1,'': selected !=1}">
			Accordion Item #1
			</button>
		</h2>
		<div x-show="selected == 1" x-collapse>
			<div class="py-3.5 px-5 border-t border-primary bg-primary 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="border -mt-px first:rounded-t-lg last:rounded-b-lg border-primary overflow-hidden">
		<h2 class="text-dark"  @click="selected !== 2 ? selected = 2 : selected = null">
			<button class="accordion-button py-[11px] px-3 text-sm flex items-center w-full transition font-normal bg-primary text-white" type="button"
			:class="{' active': selected === 2,'': selected !=2}">
			Accordion Item #2
			</button>
		</h2>
		<div x-show="selected == 2" x-collapse>
			<div class="py-3.5 px-5 border-t border-primary bg-primary 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="border -mt-px first:rounded-t-lg last:rounded-b-lg border-primary overflow-hidden">
		<h2 class="text-dark"  @click="selected !== 3 ? selected = 3 : selected = null">
			<button class="accordion-button py-[11px] px-3 text-sm flex items-center w-full transition font-normal bg-primary text-white" type="button"
			:class="{' active': selected === 3,'': selected !=3}">
			Accordion Item #3
			</button>
		</h2>
		<div x-show="selected == 3" x-collapse>
			<div class="py-3.5 px-5 border-t border-primary bg-primary 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>
														
													

														
<div class="accordion accordion-active-header" x-data="{selected:1}">
	<div class="border border-border -mt-px first:rounded-t-lg last:rounded-b-lg overflow-hidden">
		<h2 class="text-dark"  @click="selected !== 1 ? selected = 1 : selected = null">
			<button class="accordion-button py-[11px] px-3 text-sm flex items-center w-full transition font-normal bg-bodybg" type="button"
			:class="{' !bg-info !text-white active ': selected === 1,'': selected !=1}">
			Accordion Header One
			</button>
		</h2>
		<div x-show="selected == 1" x-collapse>
			<div class="py-3.5 px-5 border-t border-border">
			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="border border-border -mt-px first:rounded-t-lg last:rounded-b-lg overflow-hidden">
		<h2 class="text-dark"  @click="selected !== 2 ? selected = 2 : selected = null">
			<button class="accordion-button py-[11px] px-3 text-sm flex items-center w-full transition font-normal bg-bodybg" type="button"
			:class="{' !bg-info !text-white active ': selected === 2,'': selected !=2}">
			Accordion Header Two
			</button>
		</h2>
		<div x-show="selected == 2" x-collapse>
			<div class="py-3.5 px-5 border-t border-border">
			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="border border-border -mt-px first:rounded-t-lg last:rounded-b-lg overflow-hidden">
		<h2 class="text-dark"  @click="selected !== 3 ? selected = 3 : selected = null">
			<button class="accordion-button py-[11px] px-3 text-sm flex items-center w-full transition font-normal bg-bodybg" type="button"
			:class="{' !bg-info !text-white active ': selected === 3,'': selected !=3}">
			Accordion Header Three
			</button>
		</h2>
		<div x-show="selected == 3" x-collapse>
			<div class="py-3.5 px-5 border-t border-border rounded-b-lg">
			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>
														
													

														
<div class="accordion accordion-header-shadow accordion-rounded-lg" x-data="{selected:1}">
	<div class="-mt-px first:rounded-t-lg last:rounded-b-lg">
		<h2 class="text-dark"  @click="selected !== 1 ? selected = 1 : selected = null">
			<button class="accordion-button py-[11px] px-3 text-sm inline-flex items-center shadow-accordion w-full transition border border-border font-normal" 
			:class="{'active': selected === 1,'': selected !=1}"
			type="button">
			Accordion Header 1
			</button>
		</h2>
		<div x-show="selected == 1" x-collapse>
			<div class="py-3.5 px-5">
			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="-mt-px first:rounded-t-lg last:rounded-b-lg">
		<h2 class="text-dark"  @click="selected !== 2 ? selected = 2 : selected = null">
			<button class="accordion-button py-[11px] px-3 text-sm inline-flex items-center w-full transition font-normal border border-border shadow-accordion" 
			:class="{'active': selected === 2,'': selected !=2}"
			type="button">
			Accordion Header 2
			</button>
		</h2>
		<div x-show="selected == 2" x-collapse>
			<div class="py-3.5 px-5">
			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="-mt-px first:rounded-t-lg last:rounded-b-lg">
		<h2 class="text-dark"  @click="selected !== 3 ? selected = 3 : selected = null">
			<button class="accordion-button py-[11px] px-3 text-sm inline-flex items-center w-full transition font-normal border border-border shadow-accordion" 
			:class="{'active': selected === 3,'': selected !=3}"
			type="button">
			Accordion Header 3
			</button>
		</h2>
		<div x-show="selected == 3" x-collapse>
			<div class="py-3.5 px-5">
			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>
														
													

														
<div class="accordion accordion-rounded-stylish accordion-bordered" x-data="{selected:1}">
	<div class="border border-border -mt-px first:rounded-t-lg last:rounded-b-lg overflow-hidden">
		<h2 class="text-dark"  @click="selected !== 1 ? selected = 1 : selected = null">
			<button class="accordion-button py-[11px] px-3 text-sm flex items-center w-full transition font-normal" type="button"
			:class="{' !bg-primarylight !text-primary active ': selected === 1,'': selected !=1}">
			Accordion Header One
			</button>
		</h2>
		<div x-show="selected == 1" x-collapse>
			<div class="py-3.5 px-5 border-t border-border">
			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="border border-border -mt-px first:rounded-t-lg last:rounded-b-lg overflow-hidden">
		<h2 class="text-dark"  @click="selected !== 2 ? selected = 2 : selected = null">
			<button class="accordion-button py-[11px] px-3 text-sm flex items-center w-full transition font-normal" type="button"
			:class="{' !bg-primarylight !text-primary active ': selected === 2,'': selected !=2}">
			Accordion Header Two
			</button>
		</h2>
		<div x-show="selected == 2" x-collapse>
			<div class="py-3.5 px-5 border-t border-border">
			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="border border-border -mt-px first:rounded-t-lg last:rounded-b-lg overflow-hidden">
		<h2 class="text-dark"  @click="selected !== 3 ? selected = 3 : selected = null">
			<button class="accordion-button py-[11px] px-3 text-sm flex items-center w-full transition font-normal" type="button"
			:class="{' !bg-primarylight !text-primary active ': selected === 3,'': selected !=3}">
			Accordion Header Three
			</button>
		</h2>
		<div x-show="selected == 3" x-collapse>
			<div class="py-3.5 px-5 border-t border-border rounded-b-lg">
			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>
														
													

														
<div class="accordion accordion-rounded-stylish accordion-gradient" x-data="{selected:1}">
	<div class="-mt-px first:rounded-t-lg last:rounded-b-lg overflow-hidden">
		<h2 class="text-dark"  @click="selected !== 1 ? selected = 1 : selected = null">
			<button class="accordion-button py-[11px] px-3 text-sm flex items-center w-full transition font-normal bg-[linear-gradient(to_right,rgba(186,1,181,0.85)_0%,rgba(103,25,255,0.85)_100%)] text-white" type="button"
			:class="{' active': selected === 1,'': selected !=1}">
			Accordion Item #1
			</button>
		</h2>
		<div x-show="selected == 1" x-collapse>
			<div class="py-3.5 px-5 bg-[linear-gradient(to_right,rgba(186,1,181,0.85)_0%,rgba(103,25,255,0.85)_100%)] 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="-mt-px first:rounded-t-lg last:rounded-b-lg overflow-hidden">
		<h2 class="text-dark"  @click="selected !== 2 ? selected = 2 : selected = null">
			<button class="accordion-button py-[11px] px-3 text-sm flex items-center w-full transition font-normal bg-[linear-gradient(to_right,rgba(186,1,181,0.85)_0%,rgba(103,25,255,0.85)_100%)] text-white" type="button"
			:class="{' active': selected === 2,'': selected !=2}">
			Accordion Item #2
			</button>
		</h2>
		<div x-show="selected == 2" x-collapse>
			<div class="py-3.5 px-5 bg-[linear-gradient(to_right,rgba(186,1,181,0.85)_0%,rgba(103,25,255,0.85)_100%)] 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="-mt-px first:rounded-t-lg last:rounded-b-lg overflow-hidden">
		<h2 class="text-dark"  @click="selected !== 3 ? selected = 3 : selected = null">
			<button class="accordion-button py-[11px] px-3 text-sm flex items-center w-full transition font-normal bg-[linear-gradient(to_right,rgba(186,1,181,0.85)_0%,rgba(103,25,255,0.85)_100%)] text-white" type="button"
			:class="{' active': selected === 3,'': selected !=3}">
			Accordion Item #3
			</button>
		</h2>
		<div x-show="selected == 3" x-collapse>
			<div class="py-3.5 px-5 bg-[linear-gradient(to_right,rgba(186,1,181,0.85)_0%,rgba(103,25,255,0.85)_100%)] 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>