Design your space exactly how you want it !
<div class="flex flex-col divide-y dark:divide-dark-border rounded-lg border border-[#EFEFEF] dark:border-dark-border">
<!-- Signle Accordion Item -->
<div class="has-[.open]:bg-[#F7F8F9] dark:has-[.open]:bg-dark-card-two overflow-hidden">
<button class="com-accordion-button chevron peer/accord-btn [&.chevron]:after:content-['\ea13'] [&.open]:after:content-['\f1af'] overflow-hidden">
<span>Example Accordion?</span>
</button>
<div class="bg-white dark:bg-dark-card p-4 hidden peer-[.open]/accord-btn:block rounded-b-lg duration-300">
<div class="text-sm text-gray-500 dark:text-dark-text">
Web design and development encompass a spectrum <span class="font-semibold">involved in creating and</span> <span class="text-primary-500 font-semibold">maintaining websites.</span> aspects are <span class="text-danger">closely intertwined</span> interdependent.
</div>
</div>
</div>
<!-- If Need Add More Accordion Item -->
</div>
<div class="flex flex-col divide-y dark:divide-dark-border rounded-lg border border-[#EFEFEF] dark:border-dark-border">
<!-- Signle Accordion Item -->
<div class="has-[.open]:bg-[#F7F8F9] dark:has-[.open]:bg-dark-card-two overflow-hidden">
<button class="com-accordion-button chevron peer/accord-btn [&.chevron]:after:content-['\ea78']">
<span>Example Accordion?</span>
</button>
<div class="bg-white dark:bg-dark-card p-4 hidden peer-[.open]/accord-btn:block rounded-b-lg duration-300">
<div class="text-sm text-gray-500 dark:text-dark-text">
Web design and development encompass a spectrum <span class="font-semibold">involved in creating and</span> <span class="text-primary-500 font-semibold">maintaining websites.</span> aspects are closely intertwined interdependent.
</div>
</div>
</div>
<!-- If Need Add More Accordion Item -->
</div>
<div class="flex flex-col gap-2.5 *:rounded-lg *:border *:border-[#EFEFEF] dark:*:border-dark-border">
<!-- Signle Accordion Item -->
<div class="has-[.open]:bg-[#F7F8F9] dark:has-[.open]:bg-dark-card-two overflow-hidden">
<button class="com-accordion-button chevron peer/accord-btn [&.chevron]:after:content-['\ea13'] [&.open]:after:content-['\f1af'] overflow-hidden">
<span>01 - Example Accordion?</span>
</button>
<div class="bg-white dark:bg-dark-card p-4 hidden peer-[.open]/accord-btn:block rounded-b-lg duration-300">
<div class="text-sm text-gray-500 dark:text-dark-text">
Web design and development encompass a spectrum <span class="font-semibold">involved in creating and</span> <span class="text-primary-500 font-semibold">maintaining websites.</span> aspects are <span class="text-danger">closely intertwined</span> interdependent.
</div>
</div>
</div>
<!-- If Need Add More Accordion Item -->
</div>
<div class="flex flex-col gap-2.5 *:rounded-lg *:border *:border-[#EFEFEF] dark:*:border-dark-border">
<!-- Signle Accordion Item -->
<div class="has-[.open]:bg-[#F7F8F9] dark:has-[.open]:bg-dark-card-two overflow-hidden">
<button class="com-accordion-button chevron peer/accord-btn [&.chevron]:after:content-['\ea78']">
<span>#1. Example Accordion?</span>
</button>
<div class="bg-white dark:bg-dark-card p-4 hidden peer-[.open]/accord-btn:block rounded-b-lg duration-300">
<div class="text-sm text-gray-500 dark:text-dark-text">
Web design and development encompass a spectrum <span class="font-semibold">involved in creating and</span> <span class="text-primary-500 font-semibold">maintaining websites.</span> aspects are closely intertwined interdependent.
</div>
</div>
</div>
<!-- If Need Add More Accordion Item -->
</div>
<div class="flex flex-col divide-y dark:divide-dark-border rounded-lg border border-[#EFEFEF] dark:border-dark-border">
<!-- Signle Accordion Item -->
<div class="has-[.open]:bg-[#F7F8F9] dark:has-[.open]:bg-dark-card-two overflow-hidden">
<button class="com-accordion-button chevron peer/accord-btn [&.chevron]:after:content-['\ea13'] [&.open]:after:content-['\f1af'] overflow-hidden">
<span>1. Example Accordion?</span>
</button>
<div class="bg-white dark:bg-dark-card p-4 hidden peer-[.open]/accord-btn:block rounded-b-lg duration-300">
<div class="text-sm text-gray-500 dark:text-dark-text">
Web design and development encompass a spectrum <span class="font-semibold">involved in creating and</span> <span class="text-primary-500 font-semibold">maintaining websites.</span> aspects are <span class="text-danger">closely intertwined</span> interdependent.
</div>
</div>
</div>
<!-- If Need Add More Accordion Item -->
</div>