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

893

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

Sign In Form
Clean and modern Sign In form with email, password, and "Forgot password" link. Fully responsive and styled with Tailwind CSS, perfect for SaaS platforms.

Author:
Lekhraj Ghimire

6 months ago

562
Call to action section with image

Author:
Emily Tan

2 years ago

11.8k
Call to Action section for home page

Author:
Sophia Baker

2 years ago

9.3k
Basic CTA card

Author:
kishan pc

1 year ago

2.2k
Travel Landing Page: Australia

Author:
Maxim

9 months ago

2.1k
CTA block

Author:
Samuel Dawson

3 years ago

11.8k
Chat Box for Marketing
An Onyx component. This chat box is great for SAAS landing pages where you want to mock customer interactions or expectations.

Author:
Coastal UI

1 year ago

1.8k
Waitlist signup form

Author:
Anonymous

1 year ago

4.9k
Acode master
Welcome to Hamza's official portfolio — a creative developer blending modern design with powerful code. Explore animations, projects, and innovations crafted with HTML, Tailwind CSS, and passion.

Author:
Code Master(Mfuranziza Dusabe Hamza)

7 months ago

548
Call to action
slightly tilted call to action section

Author:
Simon Scheffer

3 years ago

11.3k
CTA block
with user avatars and 2 buttons

Author:
Carla Hoffman

1 year ago

2.6k
Call to action

Author:
Leon Bachmann

3 years ago

9.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components