The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using Content here, making it look like readable English 1.
The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using Content here, making it look like readable English 2.
The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using Content here, making it look like readable English 3.
<!-- accordion -->
<div data-type="accordion-container" class="accordion w-full">
<div class="relative w-full flex flex-wrap flex-col mb-4 bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 rounded-lg shadow-outset-fixed">
<button data-type="collapse" data-target="#accordion1" class="active icon-collapse py-3 px-6 rounded-t flex justify-between focus:outline-none focus:ring-0 text-left [&.active_.bi-chevron-down]:-rotate-180">
<h4 class="text-base">Question 1</h4>
<i class="bi bi-chevron-down transform duration-300 ms-auto"></i>
</button>
<div id="accordion1" data-type="collapsed" class="active [&.active]:block hidden px-6 pt-1 pb-6">The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using Content here, making it look like readable English 1.</div>
</div>
<div class="relative w-full flex flex-wrap flex-col mb-4 bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 rounded-lg shadow-outset-fixed">
<button data-type="collapse" data-target="#accordion2" class="icon-collapse py-3 px-6 rounded-t flex justify-between focus:outline-none focus:ring-0 text-left [&.active_.bi-chevron-down]:-rotate-180">
<h4 class="text-base">Question 2</h4>
<i class="bi bi-chevron-down transform duration-300 ms-auto"></i>
</button>
<div id="accordion2" data-type="collapsed" class="[&.active]:block hidden px-6 pt-1 pb-6">The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using Content here, making it look like readable English 2.</div>
</div>
<div class="relative w-full flex flex-wrap flex-col mb-4 bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 rounded-lg shadow-outset-fixed">
<button data-type="collapse" data-target="#accordion3" class="icon-collapse py-3 px-6 rounded-t flex justify-between focus:outline-none focus:ring-0 text-left [&.active_.bi-chevron-down]:-rotate-180">
<h4 class="text-base">Question 3</h4>
<i class="bi bi-chevron-down transform duration-300 ms-auto"></i>
</button>
<div id="accordion3" data-type="collapsed" class="[&.active]:block hidden px-6 pt-1 pb-6">The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using Content here, making it look like readable English 3.</div>
</div>
</div>
Collapse
The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using Content here, making it look like readable English.
<!-- Collapse -->
<div data-type="accordion-container" class="relative w-full flex flex-wrap flex-col mb-4 bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 rounded-lg shadow-outset-fixed">
<button data-type="collapse" data-target="#collapse1" class="icon-collapse py-3 px-6 rounded-t flex justify-between focus:outline-none focus:ring-0 text-left [&.active_.bi-chevron-down]:-rotate-180">
<h4 class="text-base">How to make a Collapse with Tailwind?</h4>
<i class="bi bi-chevron-down transform duration-300 ms-auto"></i>
</button>
<div id="collapse1" data-type="collapsed" class="[&.active]:block hidden px-6 pt-1 pb-6">The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using Content here, making it look like readable English.</div>
</div>