Tailwind Accordion by John Lay Output View Horizontal Vertical HTML CSS JS Tidy <div class="relative mx-auto w-full px-5 py-16 text-gray-800 sm:px-20 md:max-w-screen-lg lg:py-24"> <h2 class="mb-5 text-4xl text-center font-serif sm:text-5xl">FQA (Frequently Questioned Answers)</h2> <p class="mb-12 text-center text-lg text-gray-600">We have written some question answers frequently user asked. But, if you still have any queries, feel free contact us.</p> <ul class="divide-y divide-gray-200"> <li class="text-left"> <label for="accordion-1" class="flex flex-col"> <input class="peer hidden" type="checkbox" id="accordion-1" /> <div class="before:absolute before:-left-6 before:block before:text-xl before:text-blue-400 before:content-['–'] peer-checked:before:content-['+'] relative ml-4 cursor-pointer select-none items-center py-4 pr-2"> <h3 class="text-sm lg:text-base">what is web development</h3> </div> <div class="peer-checked:hidden pr-2"> <div class="pb-5"> <p class="text-sm">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Adipisci eligendi, recusandae voluptatum distinctio facilis necessitatibus aperiam ut? Dolor mollitia modi aliquam, non sint at reprehenderit commodi dignissimos quo unde asperiores officiis quos laboriosam similique nihil.</p> </div> </div> </label> </li> <li class="text-left"> <label for="accordion-2" class="flex flex-col"> <input class="peer hidden" type="checkbox" id="accordion-2" checked /> <div class="before:absolute before:-left-6 before:block before:text-xl before:text-blue-400 before:content-['–'] peer-checked:before:content-['+'] relative ml-4 cursor-pointer select-none items-center py-4 pr-2"> <h3 class="text-sm lg:text-base">Web development introduction</h3> </div> <div class="peer-checked:hidden pr-2"> <div class="pb-5"> <p class="text-sm">Lorem ipsum, <b>dolor sit amet</b> consectetur adipisicing elit. Adipisci eligendi, recusandae voluptatum distinctio facilis necessitatibus aperiam ut? Dolor mollitia modi aliquam, non sint at reprehenderit commodi dignissimos quo unde asperiores officiis quos laboriosam similique nihil.</p> </div> </div> </label> </li> <li class="text-left"> <label for="accordion-3" class="flex flex-col"> <input class="peer hidden" type="checkbox" id="accordion-3" checked /> <div class="before:absolute before:-left-6 before:block before:text-xl before:text-blue-400 before:content-['–'] peer-checked:before:content-['+'] relative ml-4 cursor-pointer select-none items-center py-4 pr-2"> <h3 class="text-sm lg:text-base">Best courses for Web development</h3> </div> <div class="peer-checked:hidden pr-2"> <div class="pb-5"> <p class="text-sm">Lorem ipsum, <b>dolor sit amet</b> consectetur adipisicing elit. Adipisci eligendi, recusandae voluptatum distinctio facilis necessitatibus aperiam ut? Dolor mollitia modi aliquam, non sint at reprehenderit commodi dignissimos quo unde asperiores officiis quos laboriosam similique nihil.</p> </div> </div> </label> </li> <li class="text-left"> <label for="accordion-4" class="flex flex-col"> <input class="peer hidden" type="checkbox" id="accordion-4" checked /> <div class="before:absolute before:-left-6 before:block before:text-xl before:text-blue-400 before:content-['–'] peer-checked:before:content-['+'] relative ml-4 cursor-pointer select-none items-center py-4 pr-2"> <h3 class="text-sm lg:text-base">What is full stack web development?</h3> </div> <div class="peer-checked:hidden pr-2"> <div class="pb-5"> <p class="text-sm">Lorem ipsum, <b>dolor sit amet</b> consectetur adipisicing elit. Adipisci eligendi, recusandae voluptatum distinctio facilis necessitatibus aperiam ut? Dolor mollitia modi aliquam, non sint at reprehenderit commodi dignissimos quo unde asperiores officiis quos laboriosam similique nihil.</p> </div> </div> </label> </li> </ul> <div class="mt-20 flex justify-center"> <a class="inline-flex cursor-pointer rounded-full bg-indigo-400 px-5 py-4 text-white" href="#">More question? Contact Us</a> </div> </div> HTML CSS JS Tidy HTML CSS JS Tidy >_Console Clear Console >_Console File Setting HTML Code Playground Setting Title Description Accordion components in tailwind CSS. Feature responsive in design, it adopts layout according to the device. Catagory Tailwind Tags Accordion Responsive Resource Add External Stylesheets and Script <script src="https://cdn.tailwindcss.com"></script>
