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

367

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

status indicatior
status indicator navigation dashbord

Author:
Rushikesh Latpate

8 months ago

822
delivery
It will help us get our stuff delivered to your home in a way that your ordered items are delivered to your home.

Author:
Nishimwe Jeanine

3 months ago

294
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

2 years ago

19.9k
Solo leveling 2
Animation & movie field,videos,games.

Author:
ORGIN_DREAMS

4 months ago

417
SocialSphere: A Full-Stack Social Media Platform
SocialSphere is a full-stack social media platform inspired by Facebook, built using HTML CSS

Author:
Code Master(Mfuranziza Dusabe Hamza)

4 months ago

477
Responsive About Section with Tailwind CSS
Built a sleek and fully responsive About Section for my portfolio using Tailwind CSS! 🚀 Designed for smooth adaptability across all screen sizes with a modern and minimal aesthetic. Perfect for showcasing skills, experience, and a personal touch!

Author:
Abdul Baset Bappy

5 months ago

1k
Upvote downvote buttons

Author:
Lucas Martinez

2 years ago

11.4k
Review popup form with toggle and stars
Review popup form with toggle and stars

Author:
Ayman Reifoun

5 months ago

575
Fake Medicine Detector
Fake Medicine Detector

Author:
Tanvir Hasan Bappy (Tanvir)

4 months ago

361
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

5 months ago

690
Our features
Our features

Author:
Tanvir Hasan Bappy (Tanvir)

9 months ago

805
Tailwind invoice example

Author:
Elijah Davis

2 years ago

18.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components