Home
Anonymous
hello world

hello world

by salvator

This tailwind example is contributed by Anonymous, on 16-May-2025. Component is made with Tailwind CSS v3. It is responsive.

Other

Author Anonymous

568

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>God-Level Hello World</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          fontFamily: {
            sans: ['Inter', 'sans-serif'],
          },
          colors: {
            primary: '#6366f1',
            secondary: '#a855f7',
            accent: '#ec4899',
            dark: '#1e293b',
            light: '#f8fafc',
          },
          animation: {
            gradient: 'gradient 15s ease infinite',
            fadeIn: 'fadeIn 2s ease forwards',
            slideIn: 'slideIn 1.5s ease forwards',
            float: 'float 6s ease-in-out infinite',
            pulse: 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
          },
          keyframes: {
            gradient: {
              '0%, 100%': { 'background-position': '0% 50%' },
              '50%': { 'background-position': '100% 50%' },
            },
            fadeIn: {
              '0%': { opacity: '0' },
              '100%': { opacity: '1' },
            },
            slideIn: {
              '0%': { transform: 'translateY(50px)', opacity: '0' },
              '100%': { transform: 'translateY(0)', opacity: '1' },
            },
            float: {
              '0%, 100%': { transform: 'translateY(0)' },
              '50%': { transform: 'translateY(-20px)' },
            },
          }
        }
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .bg-gradient {
        @apply bg-gradient-to-r from-primary via-secondary to-accent bg-[length:400%_400%] animate-gradient;
      }
      .glass {
        @apply bg-white/10 backdrop-blur-lg border border-white/20 shadow-lg shadow-[0_8px_32px_0_rgba(31,38,135,0.15)];
      }
      .text-glow {
        text-shadow: 0 0 10px rgba(236, 72, 153, 0.7);
      }
      .text-glow-hover:hover {
        text-shadow: 0 0 15px rgba(236, 72, 153, 0.9), 0 0 30px rgba(236, 72, 153, 0.4);
      }
      .cursor-effect {
        @apply w-5 h-5 rounded-full bg-white/50 fixed pointer-events-none mix-blend-difference z-[9999] transition-all duration-200 ease-linear;
      }
      .particle {
        @apply absolute rounded-full bg-white/30 pointer-events-none;
      }
    }
  </style>
</head>
<body class="bg-gradient min-h-screen overflow-x-hidden font-sans relative">
  
  <div class="fixed inset-0 z-0 overflow-hidden">
    <img 
      src="https://images.unsplash.com/photo-1677442135136-760c813a743d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=3840&q=80" 
      alt="Abstract futuristic background"
      class="w-full h-full object-cover object-center opacity-80"
      id="parallax-bg"
    >
  </div>
  
  
  <div id="particles-container" class="fixed inset-0 z-0 overflow-hidden"></div>
  
  
  <div class="fixed inset-0 z-0 bg-gradient-to-b from-primary/20 via-secondary/20 to-accent/20"></div>
  
  
  <div class="relative z-10 flex items-center justify-center w-full min-h-screen px-4">
    <div class="glass rounded-2xl p-10 md:p-16 lg:p-20 text-center animate-fadeIn max-w-4xl mx-auto backdrop-blur-xl">
      <div class="animate-float">
        <h1 class="text-5xl md:text-8xl lg:text-9xl font-bold mb-6 text-white animate-slideIn transition-all duration-300 hover:text-accent hover:scale-105 hover:translate-z-10 text-glow text-glow-hover">
          Hello World
        </h1>
      </div>
      
      <p class="text-xl md:text-2xl lg:text-3xl text-gray-100/90 animate-slideIn [animation-delay:1s] mb-10">
        A <span class="font-semibold text-white">god-level</span> web experience with <span class="text-accent">cutting-edge</span> design
      </p>
      
      <div class="animate-slideIn [animation-delay:1.5s]">
        <button class="glass text-white px-8 py-4 rounded-full font-medium text-lg md:text-xl transition-all duration-500 hover:text-accent hover:scale-105 hover:shadow-xl hover:shadow-accent/20 relative overflow-hidden group">
          <span class="absolute inset-0 bg-gradient-to-r from-primary/30 to-accent/30 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></span>
          <span class="relative z-10 flex items-center justify-center gap-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
            </svg>
            Begin Journey
          </span>
        </button>
      </div>
      
      
      <div class="absolute -bottom-10 left-1/2 transform -translate-x-1/2 animate-pulse">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white/50" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
        </svg>
      </div>
    </div>
  </div>
  
  
  <div class="cursor-effect hidden md:block"></div>

// Custom cursor with trail effect
    const cursor = document.querySelector('.cursor-effect');
    let mouseX = 0, mouseY = 0;
    let posX = 0, posY = 0;
    const delay = 0.05; // Adjust for smoother/faster follow
    
    document.addEventListener('mousemove', (e) => {
      mouseX = e.clientX;
      mouseY = e.clientY;
    });
    
    function updateCursor() {
      posX += (mouseX - posX) * delay;
      posY += (mouseY - posY) * delay;
      
      cursor.style.left = posX + 'px';
      cursor.style.top = posY + 'px';
      
      requestAnimationFrame(updateCursor);
    }
    
    updateCursor();
    
    document.addEventListener('mousedown', () => {
      cursor.style.transform = 'translate(-50%, -50%) scale(0.5)';
    });
    
    document.addEventListener('mouseup', () => {
      cursor.style.transform = 'translate(-50%, -50%) scale(1)';
    });
    
    // Interactive elements cursor effect
    document.querySelectorAll('button, a, .hover-effect').forEach(item => {
      item.addEventListener('mouseenter', () => {
        cursor.style.width = '50px';
        cursor.style.height = '50px';
        cursor.style.backgroundColor = 'rgba(255, 255, 255, 0.2)';
      });
      
      item.addEventListener('mouseleave', () => {
        cursor.style.width = '20px';
        cursor.style.height = '20px';
        cursor.style.backgroundColor = 'rgba(255, 255, 255, 0.5)';
      });
    });

// Create floating particles
    function createParticles() {
      const container = document.getElementById('particles-container');
      const particleCount = window.innerWidth < 768 ? 30 : 50;
      
      for (let i = 0; i < particleCount; i++) {
        const particle = document.createElement('div');
        particle.classList.add('particle');
        
        // Random size between 1px and 5px
        const size = Math.random() * 4 + 1;
        particle.style.width = `${size}px`;
        particle.style.height = `${size}px`;
        
        // Random position
        particle.style.left = `${Math.random() * 100}vw`;
        particle.style.top = `${Math.random() * 100}vh`;
        
        // Random animation
        const duration = Math.random() * 20 + 10;
        const delay = Math.random() * 5;
        particle.style.animation = `float ${duration}s ease-in-out ${delay}s infinite`;
        
        container.appendChild(particle);
      }
    }
    
    // Initialize effects when DOM is loaded
    document.addEventListener('DOMContentLoaded', () => {
      createParticles();
      
      // Add ripple effect to button
      const button = document.querySelector('button');
      button.addEventListener('click', (e) => {
        e.preventDefault();
        
        const ripple = document.createElement('span');
        ripple.classList.add('absolute', 'rounded-full', 'bg-white/30', 'animate-ripple');
        
        const rect = button.getBoundingClientRect();
        const size = Math.max(rect.width, rect.height);
        const x = e.clientX - rect.left - size / 2;
        const y = e.clientY - rect.top - size / 2;
        
        ripple.style.width = ripple.style.height = `${size}px`;
        ripple.style.left = `${x}px`;
        ripple.style.top = `${y}px`;
        
        button.appendChild(ripple);
        
        setTimeout(() => {
          ripple.remove();
        }, 1000);
      });
    });

// Add styles for ripple animation
    const style = document.createElement('style');
    style.textContent = `
      @keyframes ripple {
        to {
          transform: scale(4);
          opacity: 0;
        }
      }
      .animate-ripple {
        animation: ripple 0.6s linear;
      }
    `;
    document.head.appendChild(style);
  </script>
</body>
</html>

Related Examples

Forgot password?
you can change password an time

Author:
gidy

8 months ago

571
Privacy Policy Page Template

Author:
Anonymous

1 year ago

1.6k
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 year ago

2.6k
Show user details

Author:
Lucas Martinez

3 years ago

25.4k
Periodic Table with Tailwind CSS

Author:
Michael Andreuzza

1 year ago

2.7k
Flex and Flex-Col
วิธีการใช้ Flex และ Flex-Col

Author:
rawitsara.tr

5 months ago

464
Muhammad Umair Arshad - Frontend Developer Resume | React, TypeScript, Tailwind CSS
Professional resume of Muhammad Umair Arshad, a skilled Frontend Developer specializing in React, TypeScript, and Tailwind CSS. I build high-performance web applications with responsive UI design.

Author:
Muhammad Umair Arshad

9 months ago

1.2k
Life Tree
by salvator

Author:
Baraka Salvator

8 months ago

926
Infinity Premium Dashboard Tailwind
Website Dashboard Admin with tailwind CSS CDN, responsif via mobile and tablet

Author:
Alif Bima Pradana

1 day ago

6
To-Do List with Tailwind CSS
A simple and responsive to-do list built with HTML, JavaScript, and Tailwind CSS. Features task addition, completion, and deletion. Perfect for beginner projects or component demos.

Author:
Sudip chaudhary

7 months ago

963
Active Beauty Main Page

Author:
Maxim

10 months ago

1.1k
Skills Showcase, My Tech Stack and Expertise & Skills
🚀 Showcasing My Skills with TailwindCSS & Flexbox! I’ve designed a responsive and interactive Skills Section using Tailwind CSS and Flexbox. With smooth hover effects and a clean layout, this section highlights my expertise in: 🔹 Frontend Technologies – HTML, CSS, JavaScript, React, Next.js 🔹 Styling Frameworks – TailwindCSS 🔹 Backend & Tools – Node.js, Git

Author:
Muhammad Umair Arshad

10 months ago

1.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components