Pagedone Tailwind Blocks

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.