Home
KULDEEP
Video Player

Video Player

Youtube Video Player

This tailwind example is contributed by KULDEEP, on 25-Jun-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Services,Why choose us,Front page

Feature showcase Landing Page

Author KULDEEP

729

Fork Fullscreen

<div class="container mx-auto px-4 relative z-10 mb-28">
    
    <div class="text-center max-w-3xl mx-auto mb-16">
      <h2 class="text-3xl md:text-4xl font-bold mb-6 font-serif">
        See Our <span class="text-[#c69f6c]">Talents</span> in Action
      </h2>
      <p class="text-lg text-gray-300">
        Watch our showcase video to experience the passion and skill of our students and instructors across all performing arts disciplines.
      </p>
    </div>

<div class="max-w-4xl mx-auto">
      <div class="relative rounded-xl overflow-hidden shadow-2xl" id="video-container">
        
        <div id="thumbnail" class="relative">
          <img
            src="https://images.unsplash.com/photo-1598488035139-bdbb2231ce04?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80"
            alt="Video thumbnail"
            class="w-full aspect-video object-cover"
          />
          <div class="absolute inset-0 bg-black/30 flex items-center justify-center cursor-pointer" id="play-button">
            
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-[#b03536]" fill="currentColor" viewBox="0 0 20 20">
              <path d="M4 4l12 6-12 6V4z" />
            </svg>
          </div>
        </div>
        
        <div id="video" class="hidden aspect-video relative ">
          <iframe
            class="absolute inset-0 w-full h-full"
            src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1"
            title="The Artist Barefoot Showcase"
            frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen
          ></iframe>
        </div>
      </div>
    </div>
  </div>
</section>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const playButton = document.getElementById('play-button');
    const thumbnail = document.getElementById('thumbnail');
    const videoContainer = document.getElementById('video');

playButton.addEventListener('click', () => {
      thumbnail.classList.add('hidden');
      videoContainer.classList.remove('hidden');
    });
  });
</script>

Related Examples

Flour mill website landing page template
flour mill and services template website which comprise of many sections like about us, featured products, why us, visit us

Author:
Amit Pachange

1 year ago

14.7k
Employee Data Management System TailwindCSS,Html
This project is made of only html and even tailwind is using CDN to save storage space. Best for SPA and routing with other components .

Author:
Siva Naga Malleswararao Kurakula

11 months ago

1.4k
Modern Testimonial
A simple and easy to use component for reviews and testimonials.

Author:
Coastal UI

11 months ago

988
Reusable Skill Showcase Section With Pure Tailwind CSS
A fully responsive and modular "Skills & Tools" section, perfect for any developer portfolio. Built with static HTML and Tailwind CSS, this component can be easily integrated into any project and made dynamic using any frontend framework (Vue, React, Svelte, Angular) or vanilla JavaScript. Customize it to highlight your unique tech stack and create engaging portfolio pages.

Author:
Abdul Baset Bappy

9 months ago

1.8k
Feature Card
Shows off a feature, great for homepages and grid layout, or can be used in dashboards for "example use" grids. Enjoy! Part of the Coastal UI collection.

Author:
Coastal UI

9 months ago

401
Premium High-Performance Web Gaming Hub
Experience the future of browser-based gaming. I’ve developed a premium arcade hub designed for speed, clarity, and zero-latency gameplay. Built with modern web technologies, Ayyamperumal Games brings AAA-inspired visuals and high-octane mechanics directly to your browser—no downloads, no lag, just pure performance. Explore a curated library of titles ranging from minimalist logic puzzles like Sudoku Elite to fast-paced action in Neon Drift. This is where clean code meets high-level entertainment.

Author:
Ayyamperumal S

2 weeks ago

167
home
html , css

Author:
Hacker Development

8 months ago

1.1k
Animated Coming Soon Page 1
animated coming soon landing page

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

4.1k
template hero

Author:
Raul antonio de la cruz hernandez

4 weeks ago

122
Template hero

Author:
Raul antonio de la cruz hernandez

4 weeks ago

66
Our Services Section – Animated & Responsive
A modern and dynamic “Services” section built with Tailwind CSS and Alpine.js, designed to showcase your company’s main offerings with clean visuals and engaging animations. This component uses smooth fade and slide animations to reveal each service card as it comes into view. Each card highlights a core business area — Web Development, Mobile Apps, and Cloud Solutions — with beautiful hover effects, icons, and descriptive lists. Perfect for SaaS websites, agencies, and startups looking to present their services in a visually appealing, professional, and responsive layout. Key Features Smooth scroll-triggered animations with Alpine.js Responsive grid layout (mobile → desktop ready) Built with Tailwind CSS for fast customization Dark mode support included Interactive hover effects for each service card Ideal for corporate, SaaS, or portfolio websites 💡 Services Included 🌐 Web Development (Responsive, SEO-friendly, Optimized) 📱 Mobile Apps (Cross-platform, iOS & Android) ☁️ Cloud Solutions (AWS, Azure, Auto-scaling, Security)

Author:
wavy kits

3 months ago

598
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

2.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components