Animated modal with Tailwind Css and alpinejs

Related Examples

• 
  Login popup modal

  centered modal for gaining more attention from users, it also has social login buttons.

  Author:
  R Thapa

  2 years ago

  17.1k
• 
  popup modal contact form

  Working modal popup contact form in tailwind CSS Simple snippet for creating a popup contact form with tailwind and javascript

  Author:
  Ti To

  2 years ago

  7.9k
• 
  popup modal contact form

  Working modal popup contact form in tailwind CSS Simple snippet for creating a popup contact form with tailwind and javascript uses fabform.io

  Author:
  Ti To

  2 years ago

  7k
• 
  Incentives

  tailwind css Incentives

  Author:
  Anonymous

  1 year ago

  5.2k
• 
  File Upload

  Author:
  Rajesh Maheshwari

  9 months ago

  975
• 
  Login popup modal

  centered modal for gaining more attention from users, it also has social login buttons.

  Author:
  Anonymous

  9 months ago

  518
• 
  Best Log In page ever

  Instagram look like but not copy right 🤗,best login and sign and even for many others

  Author:
  ORGIN_DREAMS

  7 months ago

  759
• 
  OTPverification

  Author:
  Ratikanta Pradhan

  5 months ago

  521
• 
  Login Form with Icon

  Author:
  Prashant

  3 years ago

  17.8k
• 
  Notifications

  Toast Notifications are lightweight and customizable components for displaying short messages or alerts. They are perfect for feedback on user actions, such as form submissions or system updates. Supports different types of notifications (success, error, warning, info). Automatically hides after a specified timeout. Option to include action buttons or close icons. Customizable styles, animation, and position on the screen.

  Author:
  Abhiraj

  11 months ago

  953
• 
  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.

  Author:
  Juan D. Cortorreal

  1 month ago

  130
• 
  Login Form with Icon

  Author:
  Akai

  2 months ago

  149