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

235

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

Stacked Checkboxes

Author:
kishan pc

1 year ago

2.1k
Plant Game
Checking to see if it works

Author:
Becky Keyworth

4 months ago

461
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

3 months ago

444
Contact Us / Enquiry-form Responsive

Author:
KULDEEP

2 months ago

556
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

4 months ago

621
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Author:
Ameth Galarcio

1 year ago

3k
Full Page loading overlay

Author:
Bunny

2 years ago

11.9k
Coffee & Tea
Coffee: A brewed drink prepared from roasted seeds, called coffee beans, of the coffee plant. Tea: An agricultural product of the leaves, leaf buds, and internodes of various cultivars and sub-varieties of the Camellia sinensis plant, processed and cured using various methods.

Author:
Augustin

3 months ago

432
Animated Ripple Avatar
Ripple Effect Avatar (Tailwind CSS Component) A visually striking animated component that displays a centered avatar or image surrounded by expanding ripple circles. Built with Tailwind CSS and custom animations, this effect simulates a pulsing or water ripple reaction, drawing attention to the central image. Ideal for user profile sections, hero banners, landing pages, or highlighted features in modern web interfaces. The ripples gradually fade and expand, creating a soft, calming motion that enhances interactivity and depth.

Author:
Code Master(Mfuranziza Dusabe Hamza)

3 months ago

500
Neon container

Author:
Anonymous

1 year ago

3.2k
YouTube Community Post UI Mockup
A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

Author:
Hamza Atig

4 months ago

593
Instagram Post UI Mockup
A static HTML and Tailwind CSS component that visually replicates the user interface of an Instagram post. This mockup includes the post header (avatar, username, options), image area, action buttons (like, comment, share, save), like count, caption, and comment section. It features responsive constraints and supports both light and dark mode, closely mimicking the look and feel of the actual Instagram app. Ideal for UI prototyping, style guides, or frontend development practice.

Author:
Hamza Atig

4 months ago

648

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components