Tailwind CSS Faq Accordion with Smooth Animations and Clean UI
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
<!-- <link rel="stylesheet" href="./assets/styles/styles.css" /> -->
<script defer src="https://unpkg.com/alpinejs@3.2.3/dist/cdn.min.js"></script>
</head>
<body class="h-screen bg-blue-50">
<main class="p-5 bg-light-blue">
<div class="flex justify-center items-start my-2">
<div class="w-full sm:w-10/12 md:w-1/2 my-1">
<h2 class="text-xl font-semibold text-vnet-blue mb-2">FAQ - Order, Shipping, Etc.</h2>
<ul class="flex flex-col">
<li class="bg-white my-2 shadow-lg" x-data="accordion(1)">
<h2 @click="handleClick()"
class="flex flex-row justify-between items-center font-semibold p-3 cursor-pointer">
<span>When will my order arrive?</span>
<svg :class="handleRotate()"
class="fill-current text-purple-700 h-6 w-6 transform transition-transform duration-500"
viewBox="0 0 20 20">
<path
d="M13.962,8.885l-3.736,3.739c-0.086,0.086-0.201,0.13-0.314,0.13S9.686,12.71,9.6,12.624l-3.562-3.56C5.863,8.892,5.863,8.611,6.036,8.438c0.175-0.173,0.454-0.173,0.626,0l3.25,3.247l3.426-3.424c0.173-0.172,0.451-0.172,0.624,0C14.137,8.434,14.137,8.712,13.962,8.885 M18.406,10c0,4.644-3.763,8.406-8.406,8.406S1.594,14.644,1.594,10S5.356,1.594,10,1.594S18.406,5.356,18.406,10 M17.521,10c0-4.148-3.373-7.521-7.521-7.521c-4.148,0-7.521,3.374-7.521,7.521c0,4.147,3.374,7.521,7.521,7.521C14.148,17.521,17.521,14.147,17.521,10">
</path>
</svg>
</h2>
<div x-ref="tab" :style="handleToggle()"
class="border-l-2 border-purple-600 overflow-hidden max-h-0 duration-500 transition-all">
<p class="p-3 text-gray-900">
Shipping time is set by our delivery partners, according to the delivery method chosen by you.
Additional details can be found in the order confirmation
</p>
</div>
</li>
<li class="bg-white my-2 shadow-lg" x-data="accordion(2)">
<h2 @click="handleClick()"
class="flex flex-row justify-between items-center font-semibold p-3 cursor-pointer">
<span>How do I track my order?</span>
<svg :class="handleRotate()"
class="fill-current text-purple-700 h-6 w-6 transform transition-transform duration-500"
viewBox="0 0 20 20">
<path
d="M13.962,8.885l-3.736,3.739c-0.086,0.086-0.201,0.13-0.314,0.13S9.686,12.71,9.6,12.624l-3.562-3.56C5.863,8.892,5.863,8.611,6.036,8.438c0.175-0.173,0.454-0.173,0.626,0l3.25,3.247l3.426-3.424c0.173-0.172,0.451-0.172,0.624,0C14.137,8.434,14.137,8.712,13.962,8.885 M18.406,10c0,4.644-3.763,8.406-8.406,8.406S1.594,14.644,1.594,10S5.356,1.594,10,1.594S18.406,5.356,18.406,10 M17.521,10c0-4.148-3.373-7.521-7.521-7.521c-4.148,0-7.521,3.374-7.521,7.521c0,4.147,3.374,7.521,7.521,7.521C14.148,17.521,17.521,14.147,17.521,10">
</path>
</svg>
</h2>
<div class="border-l-2 border-purple-600 overflow-hidden max-h-0 duration-500 transition-all" x-ref="tab"
:style="handleToggle()">
<p class="p-3 text-gray-900">
Once shipped, you’ll get a confirmation email that includes a tracking number and additional information
regarding tracking your order.
</p>
</div>
</li>
<li class="bg-white my-2 shadow-lg" x-data="accordion(3)">
<h2 @click="handleClick()"
class="flex flex-row justify-between items-center font-semibold p-3 cursor-pointer">
<span>What’s your return policy?</span>
<svg :class="handleRotate()"
class="fill-current text-purple-700 h-6 w-6 transform transition-transform duration-500"
viewBox="0 0 20 20">
<path
d="M13.962,8.885l-3.736,3.739c-0.086,0.086-0.201,0.13-0.314,0.13S9.686,12.71,9.6,12.624l-3.562-3.56C5.863,8.892,5.863,8.611,6.036,8.438c0.175-0.173,0.454-0.173,0.626,0l3.25,3.247l3.426-3.424c0.173-0.172,0.451-0.172,0.624,0C14.137,8.434,14.137,8.712,13.962,8.885 M18.406,10c0,4.644-3.763,8.406-8.406,8.406S1.594,14.644,1.594,10S5.356,1.594,10,1.594S18.406,5.356,18.406,10 M17.521,10c0-4.148-3.373-7.521-7.521-7.521c-4.148,0-7.521,3.374-7.521,7.521c0,4.147,3.374,7.521,7.521,7.521C14.148,17.521,17.521,14.147,17.521,10">
</path>
</svg>
</h2>
<div class="border-l-2 border-purple-600 overflow-hidden max-h-0 duration-500 transition-all" x-ref="tab"
:style="handleToggle()">
<p class="p-3 text-gray-900">
We allow the return of all items within 30 days of your original order’s date. If you’re interested in
returning your items, send us an email with your order number and we’ll ship a return label.
</p>
</div>
</li>
<li class="bg-white my-2 shadow-lg" x-data="accordion(4)">
<h2 @click="handleClick()"
class="flex flex-row justify-between items-center font-semibold p-3 cursor-pointer">
<span>How do I make changes to an existing order?</span>
<svg :class="handleRotate()"
class="fill-current text-purple-700 h-6 w-6 transform transition-transform duration-500"
viewBox="0 0 20 20">
<path
d="M13.962,8.885l-3.736,3.739c-0.086,0.086-0.201,0.13-0.314,0.13S9.686,12.71,9.6,12.624l-3.562-3.56C5.863,8.892,5.863,8.611,6.036,8.438c0.175-0.173,0.454-0.173,0.626,0l3.25,3.247l3.426-3.424c0.173-0.172,0.451-0.172,0.624,0C14.137,8.434,14.137,8.712,13.962,8.885 M18.406,10c0,4.644-3.763,8.406-8.406,8.406S1.594,14.644,1.594,10S5.356,1.594,10,1.594S18.406,5.356,18.406,10 M17.521,10c0-4.148-3.373-7.521-7.521-7.521c-4.148,0-7.521,3.374-7.521,7.521c0,4.147,3.374,7.521,7.521,7.521C14.148,17.521,17.521,14.147,17.521,10">
</path>
</svg>
</h2>
<div class="border-l-2 border-purple-600 overflow-hidden max-h-0 duration-500 transition-all" x-ref="tab"
:style="handleToggle()">
<p class="p-3 text-gray-900">
Changes to an existing order can be made as long as the order is still in “processing” status. Please
contact our team via email and we’ll make sure to apply the needed changes. If your order has already
been shipped, we cannot apply any changes to it. If you are unhappy with your order when it arrives,
please contact us for any changes you may require.
</p>
</div>
</li>
<li class="bg-white my-2 shadow-lg" x-data="accordion(5)">
<h2 @click="handleClick()"
class="flex flex-row justify-between items-center font-semibold p-3 cursor-pointer">
<span>What shipping options do you have?</span>
<svg :class="handleRotate()"
class="fill-current text-purple-700 h-6 w-6 transform transition-transform duration-500"
viewBox="0 0 20 20">
<path
d="M13.962,8.885l-3.736,3.739c-0.086,0.086-0.201,0.13-0.314,0.13S9.686,12.71,9.6,12.624l-3.562-3.56C5.863,8.892,5.863,8.611,6.036,8.438c0.175-0.173,0.454-0.173,0.626,0l3.25,3.247l3.426-3.424c0.173-0.172,0.451-0.172,0.624,0C14.137,8.434,14.137,8.712,13.962,8.885 M18.406,10c0,4.644-3.763,8.406-8.406,8.406S1.594,14.644,1.594,10S5.356,1.594,10,1.594S18.406,5.356,18.406,10 M17.521,10c0-4.148-3.373-7.521-7.521-7.521c-4.148,0-7.521,3.374-7.521,7.521c0,4.147,3.374,7.521,7.521,7.521C14.148,17.521,17.521,14.147,17.521,10">
</path>
</svg>
</h2>
<div class="border-l-2 border-purple-600 overflow-hidden max-h-0 duration-500 transition-all" x-ref="tab"
:style="handleToggle()">
<p class="p-3 text-gray-900">
For USA domestic orders we offer FedEx and USPS shipping.
</p>
</div>
</li>
<li class="bg-white my-2 shadow-lg" x-data="accordion(6)">
<h2 @click="handleClick()"
class="flex flex-row justify-between items-center font-semibold p-3 cursor-pointer">
<span>What payment methods do you accept?</span>
<svg :class="handleRotate()"
class="fill-current text-purple-700 h-6 w-6 transform transition-transform duration-500"
viewBox="0 0 20 20">
<path
d="M13.962,8.885l-3.736,3.739c-0.086,0.086-0.201,0.13-0.314,0.13S9.686,12.71,9.6,12.624l-3.562-3.56C5.863,8.892,5.863,8.611,6.036,8.438c0.175-0.173,0.454-0.173,0.626,0l3.25,3.247l3.426-3.424c0.173-0.172,0.451-0.172,0.624,0C14.137,8.434,14.137,8.712,13.962,8.885 M18.406,10c0,4.644-3.763,8.406-8.406,8.406S1.594,14.644,1.594,10S5.356,1.594,10,1.594S18.406,5.356,18.406,10 M17.521,10c0-4.148-3.373-7.521-7.521-7.521c-4.148,0-7.521,3.374-7.521,7.521c0,4.147,3.374,7.521,7.521,7.521C14.148,17.521,17.521,14.147,17.521,10">
</path>
</svg>
</h2>
<div class="border-l-2 border-purple-600 overflow-hidden max-h-0 duration-500 transition-all" x-ref="tab"
:style="handleToggle()">
<p class="p-3 text-gray-900">
Any method of payments acceptable by you. For example: We accept MasterCard, Visa, American Express,
PayPal, JCB Discover, Gift Cards, etc.
</p>
</div>
</li>
</ul>
</div>
</div>
</main>
</body>
<script>
</script>
</html>
/* Doesn't require any CSS. */
document.addEventListener('alpine:init', () => {
Alpine.store('accordion', {
tab: 0
});
Alpine.data('accordion', (idx) => ({
init() {
this.idx = idx;
},
idx: -1,
handleClick() {
this.$store.accordion.tab = this.$store.accordion.tab === this.idx ? 0 : this.idx;
},
handleRotate() {
return this.$store.accordion.tab === this.idx ? 'rotate-180' : '';
},
handleToggle() {
return this.$store.accordion.tab === this.idx ? `max-height: ${this.$refs.tab.scrollHeight}px` : '';
}
}));
})
This Tailwind CSS snippet provides a clean and interactive FAQ accordion component with smooth animation effects. It offers a user-friendly way to organize and present frequently asked questions on your website. The accordion is fully customizable, allowing you to tailor its appearance and behavior to match your specific needs.
Key Features:
- Responsive Design: The accordion adapts seamlessly to different screen sizes, ensuring a consistent experience across devices.
- Smooth Animations: Enjoy a visually appealing user interface with smooth transitions when expanding and collapsing accordion sections.
- Accessibility: The accordion is built with accessibility in mind, ensuring it is usable by people with disabilities.
- Lightweight and Efficient: The code is optimized for performance, providing a fast and efficient user experience.
Implementation:
- Include Tailwind CSS: Ensure you have Tailwind CSS installed and configured in your project.
- Create the HTML Structure: Set up the basic HTML structure for the accordion, including the container, headers, and content sections.
- Apply Tailwind CSS Classes: Use Tailwind CSS utility classes to style the accordion elements, such as accordion, accordion-header, accordion-body, and collapse.
- Add JavaScript for Functionality: Implement JavaScript to handle the accordion's behavior, including expanding and collapsing sections and managing animations.
- Customize as Needed: Modify the Tailwind CSS classes and JavaScript code to customize the accordion's appearance and behavior according to your preferences.
Responsive Blog Grid with Tailwind CSS
User-Friendly Travel Booking Form in Bootstrap 5
Responsive CSS3 Pricing Table with Hover Animation
Responsive Contact Us Forms in Bootstrap 5
Notification UI Design with Navbar in Bootstrap 5
Interactive Social Media Buttons with CSS and JS
Lightweight FAQ Accordion Component with CSS
Responsive Registration Form Page with Image in Tailwind
Timeline Roadmap Example in Tailwind CSS
Notification Page Design Examples in Bootstrap 5
Need Help Support Page with Search in Bootstrap 5
Responsive Get In Touch Contact Form in Tailwind CSS
Building Blocks for Your Web Pages
Explore a collection of pre-written HTML,CSS and Javascript
snippets to jumpstart your web development projects.
