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

751

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

Waitlist signup form

Author:
Anonymous

1 year ago

4.7k
Call to action card with image
Responsive card with image

Author:
Noah Schmidt

2 years ago

16k
Modern Contact Section with Responsive Grid and Glassmorphic Form
A clean, professional contact section with a dual-column layout featuring contact details and a sleek glassmorphism-inspired form. Fully responsive with Tailwind CSS, supporting both light and dark modes.

Author:
Muhammad Umair Arshad

3 months ago

393
Call to Action

Author:
Abdul Baset Bappy

4 months ago

490
Highlighted Important section with button

Author:
Amit Pachange

2 years ago

9.3k
CTA card with gradient background
Grab users attention using this eye catching CTA card

Author:
Emre Yılmaz

1 year ago

3.6k
Domain For Sale Template
Domain For Sale Template

Author:
Geoffrey Callaghan

1 year ago

4k
Call to action
CTA

Author:
inbarajan P

1 year ago

1.6k
Navbar with two CTA buttons

Author:
Juraj

8 months ago

1.3k
Free Animated Gradient Glow Button with Tailwind CSS
A modern, responsive Tailwind CSS button with glowing gradient hover effects, smooth animations, and an integrated SVG icon. Perfect for landing pages, call-to-action buttons, or any stylish UI project. Fully customizable and open source , ready to copy, paste, and use in your projects.

Author:
Homayoun

1 month ago

83
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

4 months ago

325
asimple game Quest Log
asimple game lay out Quest Log

Author:
Bonimater

1 month ago

297

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components