Typewriter effect in tailwindcss with this simple trick

Related Examples

• Typewriter effect

  using javascript

  Author:
  Samuel Dawson

  1 year ago

  34.1k
• 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

  16.3k
• background animation

  background animation

  Author:
  Anonymous

  1 year ago

  37.3k
• Sticky fullpage pages / slides

  Author:
  Laurits

  1 year ago

  13.1k
• Google map iframe with tailwind

  Author:
  Kofi Osei

  1 year ago

  18.7k
• 
  Show user details

  Author:
  Lucas Martinez

  1 year ago

  21.4k
• 
  Chatbox template

  Author:
  Lucas Martinez

  1 year ago

  10.7k
• 
  Code Snippet with Copy Button

  Clipboard-Friendly Code Block Uses Prisma for code highlighting

  Author:
  Prajwal Hallale

  1 year ago

  9k
• 
  Icon group

  Author:
  Conan Hilton

  1 year ago

  8.9k
• 
  Customer support chatbox

  Floating chatbox

  Author:
  gmer33

  1 year ago

  9.7k
• 
  Privacy Policy

  Privacy Policy

  Author:
  Tanvir Hasan Bappy (Tanvir)

  3 weeks ago

  129
• 
  portfolio

  This portfolio page for Claire includes: 1. Responsive design that works on both desktop and mobile 2. Indigo-800 and Blue-900 color scheme for the background 3. Dark mode support (the design is already dark-themed) 4. Beautiful animations and effects: 1. Fade-in and slide-up animations for sections 2. Animated skill bars 3. Hover effects on projects and buttons 4. Smooth scrolling for navigation 5. Mobile-friendly navigation with a toggle menu 6. Sections for About, Skills, Projects, and Contact 7. A contact form with styled inputs 8. Social media links in the footer 9. Accessibility considerations (proper heading structure, color contrast, focus styles) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The header and footer have a frosted glass effect using backdrop filters - Text is white for high contrast against the dark background - Sections fade in and slide up as they enter the viewport - Skill bars animate when the skills section is in view - Project cards have a hover effect with scaling and increased opacity - The contact form has animated focus states - Social media icons change color on hover - The layout is responsive, with a hamburger menu for mobile screens This implementation provides a visually appealing and functional portfolio page for Claire, using HTML, Tailwind CSS, and vanilla JavaScript for the interactions and animations.

  Author:
  nejaa badr

  1 month ago

  393