tailwind-accordion-test Tailwind Templates

Tailwind Accordion Test

tailwind-accordion-test

              <Disclosure key={key}>
                {({ open }) => (
                  <>
                    <Disclosure.Button className="flex justify-start w-full py-8 text-4xl font-medium text-left rounded-lg focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75">
                      <ChevronRightIcon
                        className={`${
                          open ? "transform rotate-90" : ""
                        } w-8 h-8 text-htx-red`}
                      />{" "}
                      <span>{navItem.navMenuLabel}</span>
                    </Disclosure.Button>
                    <Disclosure.Panel
                      className="px-4 pt-4 pb-2 text-sm"
                      key={key}
                    >
                      <Transition
                        enter="transition duration-100 ease-out"
                        enterFrom="transform scale-95 opacity-0"
                        enterTo="transform scale-100 opacity-100"
                        leave="transition duration-75 ease-out"
                        leaveFrom="transform scale-100 opacity-100"
                        leaveTo="transform scale-95 opacity-0"
                      >
                        <div className="items-center justify-between py-14 px-5">
                          <div className="mb-14">
                            <p className="text-2xl font-semibold">
                              {navItem.blurb}
                            </p>
                          </div>
                          <div className="mb-14">
                            <Link href={navItem.ctaButton.url}>
                              <a className="bg-htx-blue text-white text-2xl rounded-full ml-8 py-3 px-6">
                                {navItem.ctaButton.label}
                              </a>
                            </Link>
                          </div>
                        </div>
                        <NavMenuContent sidemenus={navItem.sidemenus} />
                      </Transition>
                    </Disclosure.Panel>

Top categories

Loading Svelte Themes