Home
ORGIN_DREAMS
Solo leveling

Solo leveling

Animation & movie field,videos,games.

This tailwind example is contributed by ORGIN_DREAMS, on 22-May-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are CTA,banner

Call to Action

Author ORGIN_DREAMS

722

Fork Fullscreen

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>9Anime Clone with Video Player</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    /* Custom scrollbar for episode list */
    .scrollbar-thin::-webkit-scrollbar {
      height: 6px;
      width: 6px;
    }
    .scrollbar-thin::-webkit-scrollbar-thumb {
      background-color: #7c3aed; /* green */
      border-radius: 3px;
    }
  </style>
</head>
<body class="bg-[#0f0f0f] text-white font-sans flex flex-col min-h-screen">

<header class="bg-[#1c1c1c] shadow-md flex justify-between items-center px-4 py-4 max-w-7xl mx-auto w-full">
    <div class="flex items-center gap-3">
      <button id="menu-btn" class="md:hidden text-white text-2xl">&#9776;</button>
      <h1 class="text-xl font-bold text-green-500 cursor-pointer select-none">Ornime</h1>
    </div>
    <nav class="hidden md:flex space-x-6 text-sm">
      <a href="#" class="hover:text-green-400">Home</a>
      <a href="#" class="hover:text-green-400">Trending</a>
      <a href="#" class="hover:text-green-400">Genres</a>
      <a href="#" class="hover:text-green-400">Movies</a>
      <a href="#" class="hover:text-green-400">Login</a>
    </nav>
  </header>

<aside id="side-menu" class="fixed top-0 left-0 h-full w-64 bg-[#1c1c1c] z-50 p-6 transform -translate-x-full transition-transform duration-300 md:hidden">
    <button id="close-btn" class="text-white text-2xl mb-6">&times;</button>
    <nav class="space-y-4 text-lg">
      <a href="#" class="block text-white hover:text-green-500">Home</a>
      <a href="#" class="block text-white hover:text-green-500">Trending</a>
      <a href="#" class="block text-white hover:text-green-500">Genres</a>
      <a href="#" class="block text-white hover:text-green-500">Movies</a>
      <a href="#" class="block text-white hover:text-green-500">Login</a>
    </nav>
  </aside>

<main class="flex-grow max-w-7xl mx-auto px-4 py-10 grid grid-cols-1 md:grid-cols-3 gap-8">

<section class="md:col-span-2 space-y-4">

<div class="w-full aspect-video bg-black rounded overflow-hidden shadow-lg">
        <video
          id="video-player"
          class="w-full h-full bg-black"
          controls
          preload="metadata"
          poster="https://cdn.myanimelist.net/images/anime/10/47347.jpg"
        >
          <source src="https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
          Your browser does not support the video tag.
        </video>
      </div>

<div class="flex justify-between items-center text-gray-400 text-sm font-semibold">
        <button id="prev-ep" class="px-3 py-1 rounded bg-green-700 hover:bg-green-800 disabled:opacity-50" disabled>Previous Episode</button>
        <span id="episode-info" class="text-green-400">Episode 1 - Attack on Titan</span>
        <button id="next-ep" class="px-3 py-1 rounded bg-green-700 hover:bg-green-800">Next Episode</button>
      </div>

<p class="text-gray-300 leading-relaxed">
        Eren lives in a world where enormous walls protect humanity from man-eating giants known as Titans. But when a colossal Titan breaks the wall, everything changes.
      </p>

<div class="overflow-x-auto scrollbar-thin">
        <ul id="episode-list" class="flex space-x-4 py-2 text-sm text-gray-400">
          
        </ul>
      </div>
    </section>

<aside>
      <h2 class="text-2xl font-bold mb-6 border-l-4 border-green-500 pl-3">Trending Anime</h2>

<div class="relative group bg-[#1c1c1c] rounded overflow-hidden shadow hover:shadow-lg transition cursor-pointer" onclick="loadAnime('Attack on Titan', 1, 'https://cdn.myanimelist.net/images/anime/10/47347.jpg', 'https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4', 'Eren lives in a world where enormous walls protect humanity from man-eating giants known as Titans. But when a colossal Titan breaks the wall, everything changes.')">
          <img src="https://cdn.myanimelist.net/images/anime/10/47347.jpg" alt="Attack on Titan" class="w-full h-32 object-cover group-hover:scale-105 transition-transform duration-300" />
          <div class="p-2">
            <h3 class="text-sm font-semibold truncate">Attack on Titan</h3>
            <p class="text-xs text-gray-400">24 eps • Action, Drama</p>
          </div>
          <span class="absolute top-2 left-2 bg-green-600 text-white text-xs px-2 py-1 rounded">Ep 24</span>
        </div>

<div class="relative group bg-[#1c1c1c] rounded overflow-hidden shadow hover:shadow-lg transition cursor-pointer" onclick="loadAnime('My Hero Academia', 1, 'https://cdn.myanimelist.net/images/anime/5/87048.jpg', 'https://storage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4', 'A story about heroes with superpowers in a modern world.')">
          <img src="https://cdn.myanimelist.net/images/anime/5/87048.jpg" alt="My Hero Academia" class="w-full h-32 object-cover group-hover:scale-105 transition-transform duration-300" />
          <div class="p-2">
            <h3 class="text-sm font-semibold truncate">My Hero Academia</h3>
            <p class="text-xs text-gray-400">13 eps • Super Power</p>
          </div>
          <span class="absolute top-2 left-2 bg-green-600 text-white text-xs px-2 py-1 rounded">Ep 13</span>
        </div>

<div class="relative group bg-[#1c1c1c] rounded overflow-hidden shadow hover:shadow-lg transition cursor-pointer" onclick="loadAnime('Death Note', 1, 'https://cdn.myanimelist.net/images/anime/4/19644.jpg', 'https://storage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4', 'A high schooler finds a notebook that can kill anyone whose name is written in it.')">
          <img src="https://cdn.myanimelist.net/images/anime/4/19644.jpg" alt="Death Note" class="w-full h-32 object-cover group-hover:scale-105 transition-transform duration-300" />
          <div class="p-2">
            <h3 class="text-sm font-semibold truncate">Death Note</h3>
            <p class="text-xs text-gray-400">37 eps • Thriller, Supernatural</p>
          </div>
          <span class="absolute top-2 left-2 bg-green-600 text-white text-xs px-2 py-1 rounded">Ep 37</span>
        </div>

</div>
    </aside>
  </main>

<footer class="bg-[#1c1c1c] border-t border-gray-700 py-8 mt-10 text-center text-sm text-gray-400">
    <div class="max-w-6xl mx-auto px-4">
      <p>&copy; 2025 9AnimeClone. All rights reserved.</p>
      <div class="mt-2 space-x-4">
        <a href="#" class="hover:text-green-500">Terms</a>
        <a href="#" class="hover:text-green-500">Privacy</a>
        <a href="#" class="hover:text-green-500">Help</a>
      </div>
    </div>
  </footer>

<script>
    // Sidebar toggle
    document.getElementById("menu-btn").onclick = () => {
      document.getElementById("side-menu").classList.remove("-translate-x-full");
    };
    document.getElementById("close-btn").onclick = () => {
      document.getElementById("side-menu").classList.add("-translate-x-full");
    };

// Episode data: simulate 10 episodes with dummy video URLs (same video for demo)
    const episodes = Array.from({ length: 10 }, (_, i) => ({
      number: i + 1,
      title: `Episode ${i + 1}`,
      videoUrl: [
        "https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
        "https://storage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",
        "https://storage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4"
      ][i % 3], // cycling demo videos
    }));

let currentEpisodeIndex = 0;
    const videoPlayer = document.getElementById('video-player');
    const episodeInfo = document.getElementById('episode-info');
    const episodeListEl = document.getElementById('episode-list');
    const prevBtn = document.getElementById('prev-ep');
    const nextBtn = document.getElementById('next-ep');

// Render episode list
    function renderEpisodeList() {
      episodeListEl.innerHTML = episodes.map((ep, i) => `
        <li>
          <button
            class="px-3 py-1 rounded hover:bg-green-600 focus:outline-none ${
              i === currentEpisodeIndex ? 'bg-green-600 text-white font-bold' : 'bg-[#1c1c1c] text-gray-400'
            }"
            data-episode="${i}"
          >${ep.title}</button>
        </li>
      `).join('');
    }

// Load episode
    function loadEpisode(index) {
      if (index < 0 || index >= episodes.length) return;
      currentEpisodeIndex = index;
      const ep = episodes[index];
      videoPlayer.src = ep.videoUrl;
      episodeInfo.textContent = `${ep.title} - ${document.querySelector('h1').textContent}`;
      videoPlayer.play();
      updateControls();
      renderEpisodeList();
    }

// Update Prev/Next button state
    function updateControls() {
      prevBtn.disabled = currentEpisodeIndex === 0;
      nextBtn.disabled = currentEpisodeIndex === episodes.length -1;
    }

// Episode list click
    episodeListEl.addEventListener('click', (e) => {
      if (e.target.tagName === 'BUTTON') {
        const epIndex = Number(e.target.dataset.episode);
        loadEpisode(epIndex);
      }
    });

// Prev/Next buttons
    prevBtn.onclick = () => {
      if (currentEpisodeIndex > 0) loadEpisode(currentEpisodeIndex - 1);
    };
    nextBtn.onclick = () => {
      if (currentEpisodeIndex < episodes.length -1) loadEpisode(currentEpisodeIndex + 1);
    };

// Load first episode on page load
    loadEpisode(0);

// Load anime from trending list on sidebar click
    function loadAnime(title, epNum, poster, videoUrl, description) {
      document.querySelector('h1').textContent = title;
      episodeInfo.textContent = `Episode ${epNum} - ${title}`;
      videoPlayer.src = videoUrl;
      videoPlayer.poster = poster;
      videoPlayer.play();
      document.querySelector('section p').textContent = description;

// Reset episodes to dummy 10 episodes with same video (can be customized)
      for(let i=0; i<episodes.length

Related Examples

Call to action section with image

Author:
Steven Kuhn

2 years ago

9.8k
Subscribe to our newsletter section

Author:
Conan Hilton

3 years ago

11.3k
Greeting Card with CTA
card with two actions with greeting msg according to time

Author:
Amit Pachange

2 years ago

7.6k
asimple game lay out
asimple game lay out

Author:
Bonimater

1 month ago

359
Landing page

Author:
Maxim

6 months ago

1.5k
Brutalist Hero

Author:
threehymns

10 months ago

2.1k
Take a Survey CTA section

Author:
JaxStone

2 years ago

10.8k
Registration Form with Validation & Success State
A modern and interactive registration form built using Tailwind CSS and Alpine.js, designed for seamless user onboarding with real-time validation and elegant animations. This component includes client-side form validation, dynamic password visibility toggles, and a success confirmation screen with personalized feedback. It’s fully responsive, dark mode–ready, and styled for modern SaaS or startup platforms. ✨ Key Features 🧠 Real-time input validation for required fields (name, email, password, etc.) 🔒 Show/hide password toggle with animated SVG icons ✅ Success message with user details after submission 💨 Animated transitions using Alpine.js 🌙 Dark mode and light mode compatible 📱 Fully responsive across all screen sizes 🧩 Built with pure Tailwind CSS and Alpine.js (no external libraries) 💡 Perfect for: Registration or sign-up pages SaaS onboarding flows Portfolio or agency login systems Form validation demos or UI component libraries

Author:
wavy kits

21 hours ago

8
asimple game Quest Log
asimple game lay out Quest Log

Author:
Bonimater

3 weeks ago

118
Call to action

Author:
Piet Vriend

2 years ago

11k
CTA - Htmlwind
Screenshot on dark background

Author:
Htmlwind

4 months ago

198
SliceHeaven
delivering pizza

Author:
INGRIDE MUZIRANENGE

4 months ago

422

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components