Pagedone Tailwind Blocks
500+ Tailwind components with Figma file
![Pagedone Tailwind Blocks Image 1](/_ipx/_/pagedone-tailwind-blocks.jpg)
Details About Pagedone Tailwind Blocks
Key points:
- Responsive Design
- Tailwind CSS v3.0+
- Copy & Paste
- JavaScript Plugin
- Figma design file
- Custom color palette
- Custom config file
- Documentation
Contents
Pagedone is a comprehensive platform providing over 1000 UI components, sections, and pages designed in Figma and built with Tailwind CSS
Features
Here is what Pagedone collection offers
- Figma Design System
- Tailwind UI components
- Marketing, Admin, E-Commerce UI Components
- Tailwind Templates
- Icon Library
- Install via CDN or npm
Pros and Cons
Pros ✅
- Comes with well-written documentation
- Lifetime access for a one-time fee
- Regular updates with new components
- Figma file included
Cons ⛔️
- Components requires Pagedone JS
Example Accordion Component
<div class='accordion-group' data-accordion="default-accordion">
<div class='accordion pb-4 border-b border-solid border-gray-200' id='basic-heading-one-default'>
<button class='accordion-toggle group accordion-active:text-indigo-600 inline-flex items-center justify-between leading-8 text-gray-600 w-full transition duration-500 hover:text-indigo-600 active:text-indigo-600' aria-controls='basic-collapse-one-default'>
<h5> How to create an account? </h5>
<svg class='text-gray-900 transition duration-500 group-hover:text-indigo-600 accordion-active:text-indigo-600 accordion-active:rotate-180' width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M16.5 8.25L12.4142 12.3358C11.7475 13.0025 11.4142 13.3358 11 13.3358C10.5858 13.3358 10.2525 13.0025 9.58579 12.3358L5.5 8.25' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'></path>
</svg>
</button>
<div id='basic-collapse-one-default' class='accordion-content w-full px-0 overflow-hidden pr-4 ' aria-labelledby='basic-heading-one-default'>
<p class='text-base text-gray-600 leading-6'>To create an account, find the 'Sign up' or 'Create account' button, fill out the registration form with your personal information, and click 'Create account' or 'Sign up.' Verify your email address if needed, and then log in to start using the platform.</p>
</div>
</div>
<div class='accordion py-4 border-b border-solid border-gray-200' id='basic-heading-two-default'>
<button class='accordion-toggle group inline-flex items-center justify-between leading-8 text-gray-600 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600' aria-controls='basic-collapse-two-default'>
<h5> Have any trust issue? </h5>
<svg class='text-gray-900 transition duration-500 group-hover:text-indigo-600 accordion-active:text-indigo-600 accordion-active:rotate-180' width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M16.5 8.25L12.4142 12.3358C11.7475 13.0025 11.4142 13.3358 11 13.3358C10.5858 13.3358 10.2525 13.0025 9.58579 12.3358L5.5 8.25' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'></path>
</svg>
</button>
<div id='basic-collapse-two-default' class='accordion-content w-full px-0 overflow-hidden pr-4 ' aria-labelledby='basic-heading-two-default'>
<p class='text-sm text-gray-500 leading-6'>Our focus on providing robust and user-friendly content management capabilities ensures that you can manage your content with confidence, and achieve your content marketing goals with ease.</p>
</div>
</div>
<div class='accordion py-4 border-b border-solid border-gray-200' id='basic-heading-three-default'>
<button class='accordion-toggle group inline-flex items-center justify-between leading-8 text-gray-600 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600' aria-controls='basic-collapse-three-default'>
<h5> How can I reset my password? </h5>
<svg class='text-gray-900 transition duration-500 group-hover:text-indigo-600 accordion-active:text-indigo-600 accordion-active:rotate-180' width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M16.5 8.25L12.4142 12.3358C11.7475 13.0025 11.4142 13.3358 11 13.3358C10.5858 13.3358 10.2525 13.0025 9.58579 12.3358L5.5 8.25' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'></path>
</svg>
</button>
<div id='basic-collapse-three-default' class='accordion-content w-full px-0 overflow-hidden pr-4 ' aria-labelledby='basic-heading-three-default'>
<p class='text-sm text-gray-500 leading-6'>Our focus on providing robust and user-friendly content management capabilities ensures that you can manage your content with confidence, and achieve your content marketing goals with ease.</p>
</div>
</div>
</div>
Included Tailwind Components
Marketing Components
- Hero Sections
- Features
- Testimonial
- FAQ
- Pricing Plans
- Team
- Portfolio
- Footer
- CTA (Call to Action)
- Stats
- Blogs & News
- Contact Us
- Clients, Logo Cloud
- Gallery, Images
E-Commerce Components
- Product Overview
- Product list
- Shopping Cart
- Product Reviews
- Order summaries
- Incentives
- Comments
- Order History
- Category Filter
Admin Components
- Profile Header
- Section Headers
- Application Shells
- Table Header
- Calendar
- Forms
Full Page Templates
- Pricing x4
- About us x4
- Career x4
- Legal x2
- Contact x4
- Blog Detail x3
- Login x6
FAQ
What is Pagedone?
Pagedone is a big library of UI components designed in Figma and built with Tailwind CSS to streamline web development.