Typewriter effect in tailwindcss with this simple trick

Related Examples

• Typewriter effect

  using javascript

  Author:
  Samuel Dawson

  2 years ago

  39.6k
• Typewriter animation effect

  Build using only Tailwind CSS; no JavaScript is required. This is a continuous typing effect. If you want to stop it after the text is typed for the first time, then you can remove 'infinite' from [typing: 'typing 2s steps(20) infinite alternate, blink .7s infinite'] from the config file.

  Author:
  Samuel Dawson

  1 year ago

  19.2k
• background animation

  background animation

  Author:
  Anonymous

  1 year ago

  45.4k
• Sticky fullpage pages / slides

  Author:
  Laurits

  2 years ago

  14.6k
• Google map iframe with tailwind

  Author:
  Kofi Osei

  2 years ago

  20.4k
• 
  Show user details

  Author:
  Lucas Martinez

  2 years ago

  24.2k
• 
  Chatbox template

  Author:
  Lucas Martinez

  2 years ago

  11.8k
• 
  Code Snippet with Copy Button

  Clipboard-Friendly Code Block Uses Prisma for code highlighting

  Author:
  Prajwal Hallale

  1 year ago

  9.5k
• 
  3d card

  the Best 3D card with tailwind css

  Author:
  irahoza daniel

  3 weeks ago

  24
• 
  Date picker

  Date picker example using flatpickr library

  Author:
  Lîmåã M

  2 years ago

  15.8k
• 
  Comparison Pricing Table Component

  A responsive pricing table built with HTML and Tailwind CSS, comparing two plans (Free and Unlimited) with a clear feature checklist. Includes distinct styling for the premium plan and a toggle for monthly/annual pricing display.

  Author:
  Hamza Atig

  2 months ago

  366
• 
  Forgot Password Form

  1. Color Updates: 1. Changed background to gradient `from-indigo-800 to-blue-900` 2. Updated text colors to match the new theme 3. Changed button colors to `bg-indigo-800` with `hover:bg-blue-900` 4. Updated focus rings to use indigo colors 5. Made footer links white with indigo hover states 2. Enhanced Styling: 1. Added gradient background 2. Improved border radius to `rounded-xl` 3. Enhanced shadow with `shadow-2xl` 4. Added hover scale effects 5. Added fade-in animation 3. Dark Mode Improvements: 1. Enhanced dark mode colors 2. Added system preference detection 3. Improved dark mode contrast 4. Updated dark mode focus rings 4. Added Functionality: 1. Added form validation 2. Added success message 3. Added form reset after submission 4. Added smooth transitions 5. Accessibility Improvements: 1. Maintained ARIA attributes 2. Enhanced focus states 3. Improved color contrast 4. Added transition animations for better UX 6. Added Interactions: 1. Hover effects on all interactive elements 2. Scale animation on card and button hover 3. Smooth color transitions 4. Form validation feedback The form now matches the Indigo-800 and Blue-900 color scheme while maintaining dark mode support and adding enhanced animations and interactions.

  Author:
  nejaa badr

  7 months ago

  1k