progress-bar with Tailwind CSS and Alpinejs

Related Examples

• 
  progress-bar with Tailwind CSS and Alpinejs

  Quêmia

  2 years ago

  2.4k
• 
  Multi-Step Form with Progress Indicator

  reusable "Multi-Step Form with Progress Indicator" component built with HTML, CSS, and Tailwind CSS. It’s a practical component for forms like signups, surveys, or checkout processes.

  Ayyamperumal S

  1 year ago

  2.6k
• 
  Amazing 3D Login and Registiration Aniamation Form

  create a stunning 3D animated background with floating geometric shapes, particle effects, and interactive elements using React, Three.js, and Tailwind CSS. This will be fully responsive and visually captivating.

  Nicole Shalom

  1 year ago

  1.7k
• 
  Order Management Data Table

  A responsive order management table built with Tailwind CSS and DataTables. It includes a navigation bar, sortable data table, order progress indicators, file upload controls, and a footer. The component is suitable for admin dashboards, production workflows, and project tracking interfaces. Tags: Table, Data Table, Dashboard, Admin Panel, File Upload, Progress Bar, Responsive, Tailwind CSS

  Alla Telegina

  4 weeks ago

  37
• 
  payment card

  A payment card is a type of card issued by a financial institution (like a bank) that allows the cardholder to make financial transactions. These transactions can include purchasing goods and services, withdrawing cash, or transferring money. Here’s a description based on the main types of payment cards:

  dev-fab250

  1 year ago

  1.4k
• 
  Premium Automotive Login Page with Animated SVG Illustration

  Modern responsive automotive login page with animated SVG illustration, premium dark UI, password visibility toggle, and Tailwind CSS.

  JUGENDRA GANGWAR

  2 months ago

  376
• 
  Checkout form

  A versatile checkout form component for users to provide shipping and payment information. It has fields for first name, last name, address, city, state, ZIP code, card number, expiration date, and CVV.

  Anonymous

  2 years ago

  13.6k
• 
  Responsive Working Process Section

  This modern and responsive "Our Working Process" section adapts seamlessly to all screen sizes, ensuring a smooth user experience. The design follows a structured step-by-step layout with clear typography, bold colors, and interactive elements, making it perfect for showcasing business processes or workflows.

  ABDO-SY

  1 year ago

  1.6k
• 
  Login Form

  Admin Login Form

  Khalid

  2 years ago

  2.6k
• 
  Facebook Login page

  Facebook Login page

  Rehman Arshad

  2 years ago

  3.7k
• 
  Book Appointment form

  A schedule an appointment form is an online document that helps the user to schedule an appointment with the company or business.

  Arya

  4 years ago

  13.6k
• 
  Interactive Multi-Method Donation Section

  Overview: A high-trust, conversion-oriented fundraising section styled in the project's signature Navy Blue theme. It provides users with flexible payment options, ranging from one-click fixed amounts to manual bank transfers and cryptocurrency donations. Key Features: Smart Amount Logic: Includes a JavaScript-powered selector where users can choose a preset amount ($10, $25, $50) or type a custom value. The interface automatically toggles states (deselecting buttons when typing, and vice-versa) to prevent user error. Payment Methods: Quick Card/Checkout: Primary call-to-action column. Bank Transfer: A clean card displaying account details with a "Copy to Clipboard" utility. Crypto (Bitcoin): A specialized dark-themed card featuring a placeholder QR code and wallet address copying functionality. Trust Signals: Includes security iconography (lock, shield) and reassuring copy to boost donor confidence. Visual Hierarchy: Uses a 7/5 grid split to prioritize the immediate donation action while keeping manual payment methods accessible but secondary. Tech Stack: Framework: Tailwind CSS. Icons: Ionicons. Scripting: Vanilla JavaScript (for amount toggling and clipboard copying functions). Fonts: DM Serif Display (Headings) + Inter (Body). Usage: Ideal for the "Support Us" page or a dedicated campaign landing page. The script tag included at the bottom handles all the interactivity (button selection and text copying) without needing external libraries.

  Juan D. Cortorreal

  10 months ago

  1.2k