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

514

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.4k
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

10 months ago

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

Author:
Coastal UI

10 months ago

945
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.7k
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

8 months ago

351
About Us
This The About Us Component with the tailwind class and some animation by tailwind and best about us page you can modify it and content is for now only clinic but you can ad your content

Author:
Sahil Sasapara

1 year ago

4.8k
Experiance & Explanation
Here my beautiful component that is being seen and used more and more. Hopefully you like it and find it useful too

Author:
Matti

11 months ago

1.1k
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

3.3k
Mfuranziza Hamza
Mfuranziza Hamza full development

Author:
Code Master(Mfuranziza Dusabe Hamza)

3 months ago

724
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

2 months ago

513
beautiful tailwind contact form
beautiful tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

6k
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