Tailwind CSS Accordion - Notus JS
-Pro Component
Free and open source icons to use in your Tailwind and JavaScript website.
Example
Check out our accordion component example. It begins by default in the collapsed state with all content panels closed.
As we live, our hearts turn colder. Cause pain is what we go through as we become older. We get insulted by others, lose trust for those others. We get back stabbed by friends. It becomes harder for us to give others a hand. We get our heart broken by people we love, even that we give them all we have. Then we lose family over time. What else could rust the heart more over time? Blackgold. There's nothing I really wanted to do in life that I wasn't able to get good at. That's my skill. I'm not really specifically talented at anything except for the ability to learn. That's what I do. That's what I'm here for. Don't be afraid to be wrong because you can't learn anything from a compliment.
<div class="w-full">
<div>
<div class="overflow-hidden relative flex flex-col min-w-0 break-words bg-white w-full mb-5 border-b border-blueGray-200">
<div class="bg-transparent first:rounded-t px-4 py-3">
<a href="javascript:;" onclick="openAccordion(this)">
<h5 class="text-pink-500 hover:text-pink-700 mb-0 font-semibold duration-300 transition-all ease-in-out">How do I order?<i class="text-sm mr-2 float-right fas fa-chevron-down duration-300 transition-all ease-in-out transform rotate-180"></i></h5>
</a>
</div>
<div class="duration-300 transition-all ease-in-out block">
<div class="text-blueGray-500 px-4 py-5 flex-auto leading-relaxed">
<p class="last:mb-2">As we live, our hearts turn colder. Cause pain is what we go through as we become older. We get insulted by others, lose trust for those others. We get back stabbed by friends. It becomes harder for us to give others a hand. We get our heart broken by people we love, even that we give them all we have. Then we lose family over time. What else could rust the heart more over time? Blackgold. There's nothing I really wanted to do in life that I wasn't able to get good at. That's my skill. I'm not really specifically talented at anything except for the ability to learn. That's what I do. That's what I'm here for. Don't be afraid to be wrong because you can't learn anything from a compliment.</p>
</div>
</div>
</div>
<div class="overflow-hidden relative flex flex-col min-w-0 break-words bg-white w-full mb-5 border-b border-blueGray-200">
<div class="bg-transparent first:rounded-t px-4 py-3">
<a href="javascript:;" onclick="openAccordion(this)">
<h5 class="text-pink-500 hover:text-pink-700 mb-0 font-semibold duration-300 transition-all ease-in-out">How can I make the payment?<i class="text-sm mr-2 float-right fas fa-chevron-down duration-300 transition-all ease-in-out transform"></i></h5>
</a>
</div>
<div class="duration-300 transition-all ease-in-out hidden" style="height: 0px;">
<div class="text-blueGray-500 px-4 py-5 flex-auto leading-relaxed">
<p class="last:mb-2">Cause pain is what we go through as we become older. We get insulted by others, lose trust for those others. We get back stabbed by friends. It becomes harder for us to give others a hand. We get our heart broken by people we love, even that we give them all we have. Then we lose family over time. What else could rust the heart more over time? Blackgold. There's nothing I really wanted to do in life that I wasn't able to get good at. That's my skill. I'm not really specifically talented at anything except for the ability to learn. That's what I do.</p>
</div>
</div>
</div>
<div class="overflow-hidden relative flex flex-col min-w-0 break-words bg-white w-full mb-5 border-b border-blueGray-200">
<div class="bg-transparent first:rounded-t px-4 py-3">
<a href="javascript:;" onclick="openAccordion(this)">
<h5 class="text-pink-500 hover:text-pink-700 mb-0 font-semibold duration-300 transition-all ease-in-out">How much time does it take to recieve the order?<i class="text-sm mr-2 float-right fas fa-chevron-down duration-300 transition-all ease-in-out transform"></i></h5>
</a>
</div>
<div class="duration-300 transition-all ease-in-out hidden" style="height: 0px;">
<div class="text-blueGray-500 px-4 py-5 flex-auto leading-relaxed">
<p class="last:mb-2">Cause pain is what we go through as we become older. We get insulted by others, lose trust for those others. We get back stabbed by friends. Then we lose family over time. What else could rust the heart more over time? Blackgold. There's nothing I really wanted to do in life that I wasn't able to get good at. That's my skill. I'm not really specifically talented at anything except for the ability to learn. That's what I do. That's what I'm here for. Don't be afraid to be wrong because you can't learn anything from a compliment.</p>
</div>
</div>
</div>
<div class="overflow-hidden relative flex flex-col min-w-0 break-words bg-white w-full mb-5 border-b border-blueGray-200">
<div class="bg-transparent first:rounded-t px-4 py-3">
<a href="javascript:;" onclick="openAccordion(this)">
<h5 class="text-pink-500 hover:text-pink-700 mb-0 font-semibold duration-300 transition-all ease-in-out">Can I resell the products?<i class="text-sm mr-2 float-right fas fa-chevron-down duration-300 transition-all ease-in-out transform"></i></h5>
</a>
</div>
<div class="duration-300 transition-all ease-in-out hidden" style="height: 0px;">
<div class="text-blueGray-500 px-4 py-5 flex-auto leading-relaxed">
<p class="last:mb-2">We get back stabbed by friends. It becomes harder for us to give others a hand. We get our heart broken by people we love, even that we give them all we have. Then we lose family over time. What else could rust the heart more over time? Blackgold. There's nothing I really wanted to do in life that I wasn't able to get good at. That's my skill. I'm not really specifically talented at anything except for the ability to learn. That's what I do. That's what I'm here for. Don't be afraid to be wrong because you can't learn anything from a compliment.</p>
</div>
</div>
</div>
<div class="overflow-hidden relative flex flex-col min-w-0 break-words bg-white w-full mb-5 border-b border-blueGray-200">
<div class="bg-transparent first:rounded-t px-4 py-3">
<a href="javascript:;" onclick="openAccordion(this)">
<h5 class="text-pink-500 hover:text-pink-700 mb-0 font-semibold duration-300 transition-all ease-in-out">Where do I find the shipping details?<i class="text-sm mr-2 float-right fas fa-chevron-down duration-300 transition-all ease-in-out transform"></i></h5>
</a>
</div>
<div class="duration-300 transition-all ease-in-out hidden" style="height: 0px;">
<div class="text-blueGray-500 px-4 py-5 flex-auto leading-relaxed">
<p class="last:mb-2">It becomes harder for us to give others a hand. We get our heart broken by people we love, even that we give them all we have. Then we lose family over time. What else could rust the heart more over time? Blackgold. There's nothing I really wanted to do in life that I wasn't able to get good at. That's my skill. I'm not really specifically talented at anything except for the ability to learn. That's what I do. That's what I'm here for. Don't be afraid to be wrong because you can't learn anything from a compliment.</p>
</div>
</div>
</div>
</div>
</div>