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

455

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

Background image section

Author:
Marc

1 year ago

6.2k
Marquee Slider of Client Logos – Smooth Scrolling Brand Showcase
Enhance your website's credibility with a sleek marquee slider displaying client logos. This continuously scrolling slider provides a dynamic and engaging way to showcase your trusted partnerships, ensuring a professional and visually appealing design. Perfect for businesses, portfolios, and service-based websites.

Author:
M Junaid

5 months ago

435
Payment Cards

Author:
Shammi Nethupul

1 year ago

2.4k
Tailwind CSS Blog sharing buttons with blog details
Introducing our Blog Sharing Buttons with Blog Details component, designed to enhance the social sharing experience on your blog posts.

Author:
Abid Ullah

1 year ago

1.9k
Collapsible content

Author:
Rafferty Kim

2 years ago

13.6k
Best Chatting dashboard
create a modern WhatsApp-like chat dashboard with 3D effects, animations, and a sleek design. This will be a static view showcasing the interface with Nicole Shalom as the developer.

Author:
Nicole Shalom

6 months ago

739
Tailwind Google Map widget

Author:
Dung Vuong

5 months ago

258
Modern website that provides software services
The website is a platform that offers software services to users, including access to open-source code, downloadable projects, and relevant documentation. The main objective is to support students, developers, and the open-source community by sharing free tools and source code examples.

Author:
Rathanak Phan

5 months ago

394
Invoice template

Author:
Shakti

2 years ago

27.6k
Card post blog
Targetas para blog

Author:
Raul antonio de la cruz hernandez

2 weeks ago

43
Upvote downvote buttons

Author:
Lucas Martinez

2 years ago

11.6k
3d Box
Let's build a 3d world empowered by Orgin Dreams.these are 3d objects

Author:
ORGIN_DREAMS

6 months ago

620

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components