Home
Omer fils ELENGA
hero section

hero section

This tailwind example is contributed by Omer fils ELENGA, on 27-Nov-2025. Component is made with Tailwind CSS v3. It is responsive.

Hero

Author Omer fils ELENGA

114

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Watch.ME — 3D Time</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r158/three.min.js"></script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <style>
    body {
      margin: 0;
      font-family: 'Inter', sans-serif;
      background: url('https://i.pinimg.com/1200x/56/39/92/563992d6e4c38d6c100f26b30165ff85.jpg');
      background-size:cover;
      color: #fff;
      overflow: hidden;
      cursor: default;
    }

#three-canvas {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }

.content {
      position: relative;
      z-index: 10;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      text-align: center;
      padding: 2rem;
    }

.header {
      position: absolute;
      top: 2rem;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: center;
      z-index: 20;
    }

.header nav a {
      color: rgba(255,255,255,0.7);
      text-decoration: none;
      margin: 0 1rem;
      font-size: 0.9rem;
      font-weight: 500;
      transition: color 0.3s;
    }

.header nav a:hover {
      color: white;
    }

h1 {
      font-weight: 700;
      font-size: 3.5rem;
      line-height: 1.1;
      margin: 1.5rem 0 1rem;
    }

h1 span {
      background: linear-gradient(135deg, #ff2d75, #ff9ab5);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

p {
      max-width: 500px;
      color: rgba(255,255,255,0.6);
      font-size: 1.1rem;
      line-height: 1.6;
      margin-bottom: 2rem;
    }

.buttons {
      display: flex;
      gap: 1rem;
      margin-top: 1.5rem;
    }

.btn {
      padding: 0.75rem 1.75rem;
      border-radius: 999px;
      font-weight: 600;
      font-size: 0.95rem;
      transition: all 0.3s ease;
    }

.btn-primary {
      background: linear-gradient(135deg, #ff2d75, #ff6ba5);
      color: white;
      box-shadow: 0 8px 20px rgba(255, 45, 117, 0.35);
    }

.btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 28px rgba(255, 45, 117, 0.5);
    }

.btn-secondary {
      background: transparent;
      border: 1.5px solid rgba(255,255,255,0.2);
      color: white;
    }

.btn-secondary:hover {
      background: rgba(255,255,255,0.05);
      border-color: rgba(255,255,255,0.4);
    }

@media (max-width: 640px) {
      h1 { font-size: 2.5rem; }
      .buttons { flex-direction: column; align-items: center; }
    }
  </style>
  <script>
    tailwind.config = { darkMode: 'class' }
  </script>
</head>
<body>
  <canvas id="three-canvas"></canvas>

<div class="header">
    <nav class="flex space-x-6">
      <a href="#">Home</a>
      <a href="#">Watch</a>
      <a href="#">Product</a>
      <a href="#">Contact</a>
      <a href="#">Career</a>
    </nav>
  </div>

<div class="content">
    <h1>Be on<br/><span>Time.</span></h1>
    <p>A dimension of reality that makes change possible — precise, elegant, timeless.</p>
    <div class="buttons">
      <a href="#" class="btn btn-primary">Get started</a>
      <a href="#" class="btn btn-secondary">Read more</a>
    </div>
  </div>

const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 15;

const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('three-canvas'), antialias: true, alpha: true });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0x000000, 0);

// === ARRIÈRE-PLAN : NÉBULEUSE + PARTICULES ===
    const bgGeometry = new THREE.SphereGeometry(200, 64, 64);
    const bgMaterial = new THREE.MeshBasicMaterial({
      color: 0x0a0a1a,
      side: THREE.BackSide,
      transparent: true,
      opacity: 0.2
    });
    const bgSphere = new THREE.Mesh(bgGeometry, bgMaterial);
    scene.add(bgSphere);

// Particules douces
    const particleCount = 1200;
    const particles = new THREE.BufferGeometry();
    const pos = new Float32Array(particleCount * 3);
    const colors = new Float32Array(particleCount * 3);
    const color = new THREE.Color();

for (let i = 0; i < particleCount; i++) {
      const i3 = i * 3;
      pos[i3] = (Math.random() - 0.5) * 400;
      pos[i3 + 1] = (Math.random() - 0.5) * 400;
      pos[i3 + 2] = (Math.random() - 0.5) * 400;

const hue = Math.random() * 0.15 + 0.9; // rose/violet
      color.setHSL(hue, 0.4, Math.random() * 0.3 + 0.3);
      colors[i3] = color.r;
      colors[i3 + 1] = color.g;
      colors[i3 + 2] = color.b;
    }

particles.setAttribute('position', new THREE.BufferAttribute(pos, 3));
    particles.setAttribute('color', new THREE.BufferAttribute(colors, 3));

const particleMaterial = new THREE.PointsMaterial({
      size: 0.8,
      vertexColors: true,
      transparent: true,
      opacity: 0.7,
      sizeAttenuation: true
    });

const particleSystem = new THREE.Points(particles, particleMaterial);
    scene.add(particleSystem);

// === MONTRE 3D ===
    const watchGroup = new THREE.Group();

// Boîtier (cercle extérieur)
    const caseGeom = new THREE.TorusGeometry(2.5, 0.12, 16, 64);
    const caseMat = new THREE.MeshBasicMaterial({ color: 0xffffff, transparent: true, opacity: 0.15 });
    const watchCase = new THREE.Mesh(caseGeom, caseMat);
    watchGroup.add(watchCase);

// Cadran
    const dialGeom = new THREE.CircleGeometry(2.2, 64);
    const dialMat = new THREE.MeshBasicMaterial({ color: 0x0f0f1a, side: THREE.DoubleSide });
    const dial = new THREE.Mesh(dialGeom, dialMat);
    dial.rotation.x = -Math.PI / 2;
    watchGroup.add(dial);

// Marqueurs (heures)
    const markerGeom = new THREE.BoxGeometry(0.06, 0.4, 0.01);
    const markerMat = new THREE.MeshBasicMaterial({ color: 0x8888aa });
    for (let i = 0; i < 12; i++) {
      const marker = new THREE.Mesh(markerGeom, markerMat);
      marker.position.y = 1.9;
      marker.rotation.z = (i / 12) * Math.PI * 2;
      marker.position.applyAxisAngle(new THREE.Vector3(0, 0, 1), (i / 12) * Math.PI * 2);
      watchGroup.add(marker);
    }

// Aiguilles
    const hourHand = new THREE.Mesh(new THREE.BoxGeometry(0.06, 0.9, 0.01), new THREE.MeshBasicMaterial({ color: 0xffffff }));
    const minHand = new THREE.Mesh(new THREE.BoxGeometry(0.04, 1.4, 0.01), new THREE.MeshBasicMaterial({ color: 0xddddff }));
    const secHand = new THREE.Mesh(new THREE.BoxGeometry(0.02, 1.6, 0.01), new THREE.MeshBasicMaterial({ color: 0xff4488 }));

hourHand.position.y = 0.45;
    minHand.position.y = 0.7;
    secHand.position.y = 0.8;

watchGroup.add(hourHand, minHand, secHand);

scene.add(watchGroup);
    watchGroup.position.y = -2;

// Lumières douces
    const ambient = new THREE.AmbientLight(0xffffff, 0.1);
    scene.add(ambient);

const spot = new THREE.SpotLight(0xff44aa, 0.8);
    spot.position.set(5, 5, 10);
    spot.castShadow = false;
    scene.add(spot);

// === INTERACTION SOURIS ===
    let mouseX = 0, mouseY = 0;
    const targetX = 0, targetY = 0;
    const windowHalfX = window.innerWidth / 2;
    const windowHalfY = window.innerHeight / 2;

document.addEventListener('mousemove', (e) => {
      mouseX = (e.clientX - windowHalfX) * 0.002;
      mouseY = (e.clientY - windowHalfY) * 0.002;
    });

// === ANIMATION ===
    const clock = new THREE.Clock();

const animate = () => {
      requestAnimationFrame(animate);

const time = clock.getElapsedTime();

// Rotation douce du groupe montre
      watchGroup.rotation.y = Math.sin(time * 0.1) * 0.1;

// Aiguilles synchronisées à l’heure réelle
      const date = new Date();
      const sec = date.getSeconds();
      const min = date.getMinutes() + sec / 60;
      const hour = (date.getHours() % 12) + min / 60;

secHand.rotation.z = - (sec / 60) * Math.PI * 2;
      minHand.rotation.z = - (min / 60) * Math.PI * 2;
      hourHand.rotation.z = - (hour / 12) * Math.PI * 2;

// Parallaxe caméra
      camera.position.x += (mouseX * 3 - camera.position.x) * 0.05;
      camera.position.y += (-mouseY * 3 - camera.position.y) * 0.05;
      camera.lookAt(scene.position);

// Rotation lente des particules
      particleSystem.rotation.y += 0.0002;

renderer.render(scene, camera);
    };

animate();

// === RESIZE ===
    window.addEventListener('resize', () => {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    });
  </script>
</body>
</html>

Related Examples

bears/beats/battlestar gallactica
bears beats battlestar gallactica

Author:
Anonymous

2 years ago

9.7k
Very simple hero

Author:
Laurits

3 years ago

9k
Hero section responsive

Author:
Samuel Dawson

3 years ago

15.4k
Hero section with big heading

Author:
Leon Bachmann

3 years ago

12k
Fully Animated Timeline Card
It is at a 20s interval for testing purposes. Go to the <style> and change the .content-scroll class from 20s to 35s for a production ready slower animation.

Author:
Coastal UI

1 year ago

1.9k
Hero with SVG background
It has a nice 'Sign Up with Google' CTA button

Author:
Santiago Hernandez

1 year ago

2.4k
Scooby’s Hello – A Tailwind CSS Cartoon Animation
A playful animation built with Tailwind CSS and minimal custom CSS, featuring a cartoon-style Scooby-inspired dog sliding in from the left, wagging its tail, and cheerfully saying "Hello!"—perfect for adding personality to a fun web project.

Author:
Bonimater

8 months ago

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

Author:
ORGIN_DREAMS

8 months ago

686
Tailwind Pricing Section
Fully Responsive Pricing Section

Author:
AKASH GANDHAR

1 year ago

1.8k
Garden
by salvator

Author:
Baraka Salvator

8 months ago

1.2k
Responsive Hero Section
A clean and responsive hero section built with Tailwind CSS using a flexbox layout. Features a circular profile image, two action buttons ("Say Hello" and "View Projects"), and mobile-friendly design. Includes basic JavaScript interaction with a button.

Author:
Sudip chaudhary

8 months ago

612
Hero Section
Full width hero section for landing pages

Author:
Manon Daniel

3 years ago

13.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components