hello world

by salvator

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

Other

Author Anonymous

Tailwind v3.4 1.2k 4

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

Lifetime Access (iOS 26 Style)
Lifetime Access (iOS 26 Style)

Tanvir Hasan Bappy (Tanvir)

8 months ago

506
Footer
Elevate your website design with this sleek and minimalist light mode footer component by AB NAHID AGENCY. Crafted for clean UI experiences, it’s perfect for modern web apps, blogs, and business platforms. Easy to integrate, fully responsive, and built with scalability in mind—designed to blend seamlessly with any light-themed layout.

Abdul Jabbar Al Nahid

1 year ago

1.3k
htmlcss2

Elsa Khan

1 year ago

577
Recipe Card
beautiful recipe component with image and step-by-step instructions

Anonymous

3 years ago

8.1k
Simple Login & Register Page
Login and Register Page using Tailwind, Alpine JS, and Fontawesome

Ahita Bisma Adlula

1 year ago

4.1k
3d element

Omer fils ELENGA

9 months ago

821
simple responsive blog layout with sidebar

Isabella Kowalski

3 years ago

10.4k
Card blog
Targeta para blog

Raul antonio de la cruz hernandez

10 months ago

646
Icon group

Conan Hilton

3 years ago

10.3k
3D Coverflow Slider — Ambient Background
A depth-based 3D slider with real perspective and rotateY transforms (not just fade), paired with a drifting polyhedra background that responds to cursor movement. Zero dependencies — pure Tailwind utilities, one config file, and vanilla JS. Auto-plays, pauses on hover, fully keyboard/dot-navigable. Swap the color tokens in the config to reskin it.

Azeem warraich

3 weeks ago

134
Atlas AI Analyst Workspace
A premium, document-centric AI chat interface that moves beyond standard bubbles into a professional "editor" layout. Designed for power users, it features a floating glassmorphic command bar, a dedicated "Memory & Context" sidebar with interactive widgets, and rich data visualization blocks. The aesthetic combines a deep charcoal base with luxury bronze/orange accents, making it ideal for high-end SaaS tools, financial analysis dashboards, or enterprise AI assistants.

Hamza Atig

8 months ago

538
Dark dashboard
Dark dashboard

Tanvir Hasan Bappy (Tanvir)

8 months ago

400