Tailwind CSS Accordions Components
Tailwind CSS Accordions is an accordion component built with Tailwind CSS & Alpine.js crafted by TailGrids. You can use this accordion anywhere, like in your blog post, to list product features, or to provide FAQs. Accordions are components that help with the organization of content that lies within collapsible items. They allow for the display of only a single collapsed item in one go. In addition to that, accordions are capable of toggling through several text blocks all with the help of a single click. Hence, they can go a long way to helping you enhance the overall UX of your project. Tailwind CSS Accordions are built with Alpine.js and Tailwind CSS. Crafted by TailGrids, this is one of the Tailwind CSS UI components you can choose for your website. This accordion can be used anywhere you like such as a blog post, to provide FAQs, or to list product features. Accordions Tailwind components are one of the most widely used Tailwind sections using which you can greatly enhance the UX of your current project. Hence, if you have been looking for good accordions styles, choose TailGrid for your upcoming project requirements!
Accordions Style 1
FREE
FREE
Accordions Style 1Require AlpineJS
<!-- ====== FAQ Section Start -->
<section
x-data="
{
openFaq1: false,
openFaq2: false,
openFaq3: false,
openFaq4: false,
openFaq5: false,
openFaq6: false
}
"
class="
bg-white
pt-20
lg:pt-[120px]
pb-12
lg:pb-[90px]
relative
z-20
overflow-hidden
"
>
<div class="container">
<div class="flex flex-wrap -mx-4">
<div class="w-full px-4">
<div class="text-center mx-auto mb-[60px] lg:mb-20 max-w-[520px]">
<span class="font-semibold text-lg text-primary mb-2 block">
FAQ
</span>
<h2
class="
font-bold
text-3xl
sm:text-4xl
md:text-[40px]
text-dark
mb-4
"
>
Any Questions? Look Here
</h2>
<p class="text-base text-body-color">
There are many variations of passages of Lorem Ipsum available
but the majority have suffered alteration in some form.
</p>
</div>
</div>
</div>
<div class="flex flex-wrap -mx-4">
<div class="w-full lg:w-1/2 px-4">
<div
class="
single-faq
w-full
bg-white
border border-[#F3F4FE]
rounded-lg
p-4
sm:p-8
lg:px-6
xl:px-8
mb-8
"
>
<button
class="faq-btn flex w-full text-left"
@click="openFaq1 = !openFaq1"
>
<div
class="
w-full
max-w-[40px]
h-10
flex
items-center
justify-center
rounded-lg
bg-primary
text-primary
bg-opacity-5
mr-5
"
>
<svg
width="17"
height="10"
viewBox="0 0 17 10"
class="fill-current icon"
>
<path
d="M7.28687 8.43257L7.28679 8.43265L7.29496 8.43985C7.62576 8.73124 8.02464 8.86001 8.41472 8.86001C8.83092 8.86001 9.22376 8.69083 9.53447 8.41713L9.53454 8.41721L9.54184 8.41052L15.7631 2.70784L15.7691 2.70231L15.7749 2.69659C16.0981 2.38028 16.1985 1.80579 15.7981 1.41393C15.4803 1.1028 14.9167 1.00854 14.5249 1.38489L8.41472 7.00806L2.29995 1.38063L2.29151 1.37286L2.28271 1.36548C1.93092 1.07036 1.38469 1.06804 1.03129 1.41393L1.01755 1.42738L1.00488 1.44184C0.69687 1.79355 0.695778 2.34549 1.0545 2.69659L1.05999 2.70196L1.06565 2.70717L7.28687 8.43257Z"
fill="#3056D3"
stroke="#3056D3"
/>
</svg>
</div>
<div class="w-full">
<h4 class="text-lg font-semibold text-black">
How long we deliver your first blog post?
</h4>
</div>
</button>
<div x-show="openFaq1" class="faq-content pl-[62px]">
<p class="text-base text-body-color leading-relaxed py-3">
It takes 2-3 weeks to get your first blog post ready. That
includes the in-depth research & creation of your monthly
content marketing strategy that we do before writing your
first blog post, Ipsum available .
</p>
</div>
</div>
<div
class="
single-faq
w-full
bg-white
border border-[#F3F4FE]
rounded-lg
p-4
sm:p-8
lg:px-6
xl:px-8
mb-8
"
>
<button
class="faq-btn flex w-full text-left"
@click="openFaq2 = !openFaq2"
>
<div
class="
w-full
max-w-[40px]
h-10
flex
items-center
justify-center
rounded-lg
bg-primary
text-primary
bg-opacity-5
mr-5
"
>
<svg
width="17"
height="10"
viewBox="0 0 17 10"
class="fill-current icon"
>
<path
d="M7.28687 8.43257L7.28679 8.43265L7.29496 8.43985C7.62576 8.73124 8.02464 8.86001 8.41472 8.86001C8.83092 8.86001 9.22376 8.69083 9.53447 8.41713L9.53454 8.41721L9.54184 8.41052L15.7631 2.70784L15.7691 2.70231L15.7749 2.69659C16.0981 2.38028 16.1985 1.80579 15.7981 1.41393C15.4803 1.1028 14.9167 1.00854 14.5249 1.38489L8.41472 7.00806L2.29995 1.38063L2.29151 1.37286L2.28271 1.36548C1.93092 1.07036 1.38469 1.06804 1.03129 1.41393L1.01755 1.42738L1.00488 1.44184C0.69687 1.79355 0.695778 2.34549 1.0545 2.69659L1.05999 2.70196L1.06565 2.70717L7.28687 8.43257Z"
fill="#3056D3"
stroke="#3056D3"
/>
</svg>
</div>
<div class="w-full">
<h4 class="text-lg font-semibold text-black">
How long we deliver your first blog post?
</h4>
</div>
</button>
<div x-show="openFaq2" class="faq-content pl-[62px]">
<p class="text-base text-body-color leading-relaxed py-3">
It takes 2-3 weeks to get your first blog post ready. That
includes the in-depth research & creation of your monthly
content marketing strategy that we do before writing your
first blog post, Ipsum available .
</p>
</div>
</div>
<div
class="
single-faq
w-full
bg-white
border border-[#F3F4FE]
rounded-lg
p-4
sm:p-8
lg:px-6
xl:px-8
mb-8
"
>
<button
class="faq-btn flex w-full text-left"
@click="openFaq3 = !openFaq3"
>
<div
class="
w-full
max-w-[40px]
h-10
flex
items-center
justify-center
rounded-lg
bg-primary
text-primary
bg-opacity-5
mr-5
"
>
<svg
width="17"
height="10"
viewBox="0 0 17 10"
class="fill-current icon"
>
<path
d="M7.28687 8.43257L7.28679 8.43265L7.29496 8.43985C7.62576 8.73124 8.02464 8.86001 8.41472 8.86001C8.83092 8.86001 9.22376 8.69083 9.53447 8.41713L9.53454 8.41721L9.54184 8.41052L15.7631 2.70784L15.7691 2.70231L15.7749 2.69659C16.0981 2.38028 16.1985 1.80579 15.7981 1.41393C15.4803 1.1028 14.9167 1.00854 14.5249 1.38489L8.41472 7.00806L2.29995 1.38063L2.29151 1.37286L2.28271 1.36548C1.93092 1.07036 1.38469 1.06804 1.03129 1.41393L1.01755 1.42738L1.00488 1.44184C0.69687 1.79355 0.695778 2.34549 1.0545 2.69659L1.05999 2.70196L1.06565 2.70717L7.28687 8.43257Z"
fill="#3056D3"
stroke="#3056D3"
/>
</svg>
</div>
<div class="w-full">
<h4 class="text-lg font-semibold text-black">
How long we deliver your first blog post?
</h4>
</div>
</button>
<div x-show="openFaq3" class="faq-content pl-[62px]">
<p class="text-base text-body-color leading-relaxed py-3">
It takes 2-3 weeks to get your first blog post ready. That
includes the in-depth research & creation of your monthly
content marketing strategy that we do before writing your
first blog post, Ipsum available .
</p>
</div>
</div>
</div>
<div class="w-full lg:w-1/2 px-4">
<div
class="
single-faq
w-full
bg-white
border border-[#F3F4FE]
rounded-lg
p-4
sm:p-8
lg:px-6
xl:px-8
mb-8
"
>
<button
class="faq-btn flex w-full text-left"
@click="openFaq4 = !openFaq4"
>
<div
class="
w-full
max-w-[40px]
h-10
flex
items-center
justify-center
rounded-lg
bg-primary
text-primary
bg-opacity-5
mr-5
"
>
<svg
width="17"
height="10"
viewBox="0 0 17 10"
class="fill-current icon"
>
<path
d="M7.28687 8.43257L7.28679 8.43265L7.29496 8.43985C7.62576 8.73124 8.02464 8.86001 8.41472 8.86001C8.83092 8.86001 9.22376 8.69083 9.53447 8.41713L9.53454 8.41721L9.54184 8.41052L15.7631 2.70784L15.7691 2.70231L15.7749 2.69659C16.0981 2.38028 16.1985 1.80579 15.7981 1.41393C15.4803 1.1028 14.9167 1.00854 14.5249 1.38489L8.41472 7.00806L2.29995 1.38063L2.29151 1.37286L2.28271 1.36548C1.93092 1.07036 1.38469 1.06804 1.03129 1.41393L1.01755 1.42738L1.00488 1.44184C0.69687 1.79355 0.695778 2.34549 1.0545 2.69659L1.05999 2.70196L1.06565 2.70717L7.28687 8.43257Z"
fill="#3056D3"
stroke="#3056D3"
/>
</svg>
</div>
<div class="w-full">
<h4 class="text-lg font-semibold text-black">
How long we deliver your first blog post?
</h4>
</div>
</button>
<div x-show="openFaq4" class="faq-content pl-[62px]">
<p class="text-base text-body-color leading-relaxed py-3">
It takes 2-3 weeks to get your first blog post ready. That
includes the in-depth research & creation of your monthly
content marketing strategy that we do before writing your
first blog post, Ipsum available .
</p>
</div>
</div>
<div
class="
single-faq
w-full
bg-white
border border-[#F3F4FE]
rounded-lg
p-4
sm:p-8
lg:px-6
xl:px-8
mb-8
"
>
<button
class="faq-btn flex w-full text-left"
@click="openFaq5 = !openFaq5"
>
<div
class="
w-full
max-w-[40px]
h-10
flex
items-center
justify-center
rounded-lg
bg-primary
text-primary
bg-opacity-5
mr-5
"
>
<svg
width="17"
height="10"
viewBox="0 0 17 10"
class="fill-current icon"
>
<path
d="M7.28687 8.43257L7.28679 8.43265L7.29496 8.43985C7.62576 8.73124 8.02464 8.86001 8.41472 8.86001C8.83092 8.86001 9.22376 8.69083 9.53447 8.41713L9.53454 8.41721L9.54184 8.41052L15.7631 2.70784L15.7691 2.70231L15.7749 2.69659C16.0981 2.38028 16.1985 1.80579 15.7981 1.41393C15.4803 1.1028 14.9167 1.00854 14.5249 1.38489L8.41472 7.00806L2.29995 1.38063L2.29151 1.37286L2.28271 1.36548C1.93092 1.07036 1.38469 1.06804 1.03129 1.41393L1.01755 1.42738L1.00488 1.44184C0.69687 1.79355 0.695778 2.34549 1.0545 2.69659L1.05999 2.70196L1.06565 2.70717L7.28687 8.43257Z"
fill="#3056D3"
stroke="#3056D3"
/>
</svg>
</div>
<div class="w-full">
<h4 class="text-lg font-semibold text-black">
How long we deliver your first blog post?
</h4>
</div>
</button>
<div x-show="openFaq5" class="faq-content pl-[62px]">
<p class="text-base text-body-color leading-relaxed py-3">
It takes 2-3 weeks to get your first blog post ready. That
includes the in-depth research & creation of your monthly
content marketing strategy that we do before writing your
first blog post, Ipsum available .
</p>
</div>
</div>
<div
class="
single-faq
w-full
bg-white
border border-[#F3F4FE]
rounded-lg
p-4
sm:p-8
lg:px-6
xl:px-8
mb-8
"
>
<button
class="faq-btn flex w-full text-left"
@click="openFaq6 = !openFaq6"
>
<div
class="
w-full
max-w-[40px]
h-10
flex
items-center
justify-center
rounded-lg
bg-primary
text-primary
bg-opacity-5
mr-5
"
>
<svg
width="17"
height="10"
viewBox="0 0 17 10"
class="fill-current icon"
>
<path
d="M7.28687 8.43257L7.28679 8.43265L7.29496 8.43985C7.62576 8.73124 8.02464 8.86001 8.41472 8.86001C8.83092 8.86001 9.22376 8.69083 9.53447 8.41713L9.53454 8.41721L9.54184 8.41052L15.7631 2.70784L15.7691 2.70231L15.7749 2.69659C16.0981 2.38028 16.1985 1.80579 15.7981 1.41393C15.4803 1.1028 14.9167 1.00854 14.5249 1.38489L8.41472 7.00806L2.29995 1.38063L2.29151 1.37286L2.28271 1.36548C1.93092 1.07036 1.38469 1.06804 1.03129 1.41393L1.01755 1.42738L1.00488 1.44184C0.69687 1.79355 0.695778 2.34549 1.0545 2.69659L1.05999 2.70196L1.06565 2.70717L7.28687 8.43257Z"
fill="#3056D3"
stroke="#3056D3"
/>
</svg>
</div>
<div class="w-full">
<h4 class="text-lg font-semibold text-black">
How long we deliver your first blog post?
</h4>
</div>
</button>
<div x-show="openFaq6" class="faq-content pl-[62px]">
<p class="text-base text-body-color leading-relaxed py-3">
It takes 2-3 weeks to get your first blog post ready. That
includes the in-depth research & creation of your monthly
content marketing strategy that we do before writing your
first blog post, Ipsum available .
</p>
</div>
</div>
</div>
</div>
</div>
<div class="absolute bottom-0 right-0 z-[-1]">
<svg
width="1440"
height="886"
viewBox="0 0 1440 886"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
opacity="0.5"
d="M193.307 -273.321L1480.87 1014.24L1121.85 1373.26C1121.85 1373.26 731.745 983.231 478.513 729.927C225.976 477.317 -165.714 85.6993 -165.714 85.6993L193.307 -273.321Z"
fill="url(#paint0_linear)"
/>
<defs>
<linearGradient
id="paint0_linear"
x1="1308.65"
y1="1142.58"
x2="602.827"
y2="-418.681"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#3056D3" stop-opacity="0.36" />
<stop offset="1" stop-color="#F5F2FD" stop-opacity="0" />
<stop offset="1" stop-color="#F5F2FD" stop-opacity="0.096144" />
</linearGradient>
</defs>
</svg>
</div>
</section>
<!-- ====== FAQ Section End -->
Accordions Style 2
PRO
Accordions Style 3
PRO
PRO
Accordions Style 3
Accordions Style 4
PRO
Accordions Style 5
PRO
PRO
Accordions Style 5