Component:

Demo-video Product Light

Name: Demo-video Product Light
Availability: InStock

Free

Tags: Demo video Page Section Content Product Light

Colors:

Description:

This carefully crafted Demo video component is perfect for Product landing pages, featuring a Light design that looks great and converts well.

Simply copy the code with the "Copy" button, paste it into your project and customize the colors, text and images to match your brand.


                <!--
@type: Demo Video
@industry: Product
@style: Light
@category: Page Section, Content
@framework: HTML/CSS
@license: Free
-->

<style>
:root {
  /* Colors */
  --color-white: #ffffff;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-800: #1f2937;
  --color-blue-50: #eff6ff;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
  --color-black: #000000;

  /* Spacing */
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-20: 5rem;

  /* Container */
  --container-max-width: 80rem; /* max-w-7xl */
  --content-max-width: 48rem; /* max-w-3xl */
}

/* Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Base Styles */
body {
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  line-height: 1.5;
}

/* Component Styles */
.demo-section {
  background-color: var(--color-gray-50);
  padding: var(--spacing-20) var(--spacing-4);
}

.demo-container {
  max-width: var(--container-max-width);
  margin: 0 auto;
}

.section-header {
  max-width: var(--content-max-width);
  margin: 0 auto;
  text-align: center;
  margin-bottom: var(--spacing-12);
}

.section-label {
  color: var(--color-blue-600);
  font-weight: 500;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.section-title {
  font-size: 1.875rem;
  font-weight: 500;
  color: var(--color-gray-800);
  margin-top: var(--spacing-2);
  margin-bottom: var(--spacing-4);
}

.section-description {
  color: var(--color-gray-600);
  font-size: 1.125rem;
  font-weight: 400;
}

.video-container {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
}

.video-thumbnail {
  aspect-ratio: 16/9;
  position: relative;
  cursor: pointer;
}

.video-thumbnail:hover .thumbnail-overlay {
  background-color: rgba(31, 41, 55, 0.2);
}

.video-thumbnail:hover .play-button {
  transform: scale(1.05);
}

.thumbnail-placeholder {
  background-color: var(--color-gray-200);
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-500);
  position: absolute;
  inset: 0;
}

.placeholder-icon {
  width: 5rem;
  height: 5rem;
  opacity: 0.3;
}

.thumbnail-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(31, 41, 55, 0.1);
  transition: background-color 0.2s ease;
}

.play-button {
  width: 5rem;
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: var(--color-white);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
}

.play-button:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.play-icon {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--color-blue-600);
}

.video-player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-black);
  display: none;
}

.video-element {
  width: 100%;
  height: 100%;
}

.close-button {
  position: absolute;
  top: var(--spacing-4);
  right: var(--spacing-4);
  padding: var(--spacing-2);
  border-radius: 9999px;
  background-color: var(--color-white);
  color: var(--color-gray-800);
  transition: background-color 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.close-button:hover {
  background-color: var(--color-gray-100);
}

.close-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.features-grid {
  margin-top: var(--spacing-16);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-8);
}

.feature-card {
  padding: var(--spacing-8);
  border-radius: 1rem;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.2s ease;
}

.feature-card:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.feature-icon-wrapper {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background-color: var(--color-blue-50);
  color: var(--color-blue-600);
  margin-bottom: var(--spacing-6);
}

.demo-video-feature-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.feature-title {
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--color-gray-800);
  margin-bottom: var(--spacing-3);
}

.feature-description {
  color: var(--color-gray-600);
  font-weight: 300;
}

.demo-video-cta-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  justify-content: center;
  margin-top: var(--spacing-12);
}

.demo-video-cta-button {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-3) var(--spacing-6);
  border-radius: 0.5rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}

.demo-video-cta-button-secondary {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  color: var(--color-gray-800);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.demo-video-cta-button-secondary:hover {
  background-color: var(--color-gray-50);
}

.demo-video-cta-button-primary {
  background-color: var(--color-blue-600);
  color: var(--color-white);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.demo-video-cta-button-primary:hover {
  background-color: var(--color-blue-700);
}

.demo-video-cta-icon {
  width: 1.25rem;
  height: 1.25rem;
  margin-left: var(--spacing-2);
}

/* Responsive Breakpoints */
@media (min-width: 640px) {
  .demo-section {
    padding-left: var(--spacing-6);
    padding-right: var(--spacing-6);
  }

  .section-title {
    font-size: 2.25rem;
  }

  .demo-video-cta-section {
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .features-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .demo-section {
    padding-left: var(--spacing-8);
    padding-right: var(--spacing-8);
  }
}
</style>

<section class="demo-section">
  <div class="demo-container">
    <!-- Section Header -->
    <div class="section-header">
      <span class="section-label">Product Showcase</span>
      <h2 class="section-title">See Our Product in Action</h2>
      <p class="section-description">Watch how our intuitive interface and powerful features help you achieve more in less time.</p>
    </div>

    <!-- Video Player Container -->
    <div class="video-container">
      <!-- Video Thumbnail Container -->
      <div class="video-thumbnail" onclick="toggleProductVideo()">
        <!-- Product image -->
        <div class="thumbnail-placeholder">
          <svg xmlns="http://www.w3.org/2000/svg" class="placeholder-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M7 4v16M17 4v16M3 8h4m10 0h4M3 12h18M3 16h4m10 0h4M4 20h16a1 1 0 001-1V5a1 1 0 00-1-1H4a1 1 0 00-1 1v14a1 1 0 001 1z" />
          </svg>
        </div>
        
        <!-- Play Button Overlay -->
        <div class="thumbnail-overlay">
          <button class="play-button" aria-label="Play product demo video">
            <svg class="play-icon" fill="currentColor" viewBox="0 0 20 20">
              <path d="M6.3 2.841A1.5 1.5 0 004 4.11v11.78a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z"/>
            </svg>
          </button>
        </div>
      </div>

      <!-- Video Element (Initially Hidden) -->
      <div id="productVideoPlayer" class="video-player">
        <video 
          id="productDemoVideo" 
          class="video-element"
          controls
          preload="none"
        >
          <source src="#" type="video/mp4">
          Your browser does not support the video tag.
        </video>
        
        <!-- Close Button -->
        <button 
          onclick="toggleProductVideo()"
          class="close-button"
          aria-label="Close video player"
        >
          <svg class="close-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
          </svg>
        </button>
      </div>
    </div>

    <!-- Features List -->
    <div class="features-grid">
      <div class="feature-card">
        <div class="feature-icon-wrapper">
          <svg class="demo-video-feature-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
          </svg>
        </div>
        <h3 class="feature-title">Quality Assurance</h3>
        <p class="feature-description">Our product undergoes rigorous testing to ensure reliability and performance in all scenarios.</p>
      </div>

      <div class="feature-card">
        <div class="feature-icon-wrapper">
          <svg class="demo-video-feature-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z"/>
          </svg>
        </div>
        <h3 class="feature-title">Intuitive Design</h3>
        <p class="feature-description">Thoughtfully designed interface that makes complex tasks simple and enhances user experience.</p>
      </div>

      <div class="feature-card">
        <div class="feature-icon-wrapper">
          <svg class="demo-video-feature-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"/>
          </svg>
        </div>
        <h3 class="feature-title">Dedicated Support</h3>
        <p class="feature-description">Our customer success team is always ready to help you get the most out of our product.</p>
      </div>
    </div>

    <!-- CTA Section -->
    <div class="demo-video-cta-section">
      <a href="#request-demo" class="demo-video-cta-button demo-video-cta-button-secondary">
        Request a Custom Demo
        <svg class="demo-video-cta-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
        </svg>
      </a>
      <a href="#product-tour" class="demo-video-cta-button demo-video-cta-button-primary">
        Take Product Tour
        <svg class="demo-video-cta-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/>
        </svg>
      </a>
    </div>
  </div>
</section>

<script>
function toggleProductVideo() {
  const videoPlayer = document.getElementById('productVideoPlayer');
  const video = document.getElementById('productDemoVideo');
  
  if (videoPlayer.style.display === 'none' || !videoPlayer.style.display) {
    videoPlayer.style.display = 'block';
    // Replace with actual video source when available
    video.src = 'https://example.com/product-demo.mp4';
    video.play();
  } else {
    videoPlayer.style.display = 'none';
    video.pause();
    video.src = '';
  }
}
</script>


                <!--
@type: Demo Video
@industry: Product
@style: Light
@category: Page Section, Content
@framework: Tailwind
@license: Free
-->

<section class="bg-gray-50 py-20 px-4 sm:px-6 lg:px-8">
  <div class="max-w-7xl mx-auto">
    <!-- Section Header -->
    <div class="max-w-3xl mx-auto text-center mb-12">
      <span class="text-blue-600 font-medium text-sm uppercase tracking-wider">Product Showcase</span>
      <h2 class="text-3xl sm:text-4xl font-medium text-gray-800 mt-2 mb-4">
        See Our Product in Action
      </h2>
      <p class="text-gray-600 text-lg font-normal">
        Watch how our intuitive interface and powerful features help you achieve more in less time.
      </p>
    </div>

    <!-- Video Player Container -->
    <div class="relative rounded-2xl overflow-hidden shadow-sm bg-white border border-gray-200">
      <!-- Video Thumbnail Container -->
      <div class="aspect-video relative group cursor-pointer" onclick="toggleProductVideo()">
        <!-- Product image -->
        <div class="bg-gray-200 aspect-video flex items-center justify-center text-gray-500 absolute inset-0">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-20 w-20 opacity-30" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M7 4v16M17 4v16M3 8h4m10 0h4M3 12h18M3 16h4m10 0h4M4 20h16a1 1 0 001-1V5a1 1 0 00-1-1H4a1 1 0 00-1 1v14a1 1 0 001 1z" />
          </svg>
        </div>
        
        <!-- Play Button Overlay -->
        <div class="absolute inset-0 flex items-center justify-center bg-gray-800 bg-opacity-10 group-hover:bg-opacity-20 transition-all">
          <button 
            class="w-20 h-20 flex items-center justify-center rounded-full bg-white shadow-lg hover:shadow-xl transition-all group-hover:scale-105 transform duration-200 cursor-pointer"
            aria-label="Play product demo video"
          >
            <svg class="w-10 h-10 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
              <path d="M6.3 2.841A1.5 1.5 0 004 4.11v11.78a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z"/>
            </svg>
          </button>
        </div>
      </div>

      <!-- Video Element (Initially Hidden) -->
      <div id="productVideoPlayer" class="hidden absolute inset-0 w-full h-full bg-black">
        <video 
          id="productDemoVideo" 
          class="w-full h-full"
          controls
          preload="none"
        >
          <source src="#" type="video/mp4">
          Your browser does not support the video tag.
        </video>
        
        <!-- Close Button -->
        <button 
          onclick="toggleProductVideo()"
          class="absolute top-4 right-4 p-2 rounded-full bg-white hover:bg-gray-100 text-gray-800 transition-colors shadow-sm"
          aria-label="Close video player"
        >
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
          </svg>
        </button>
      </div>
    </div>

    <!-- Features List -->
    <div class="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8">
      <div class="p-8 rounded-2xl bg-white border border-gray-200 shadow-sm transition-all hover:shadow-md">
        <div class="w-12 h-12 flex items-center justify-center rounded-lg bg-blue-50 text-blue-600 mb-6">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
          </svg>
        </div>
        <h3 class="text-xl font-normal text-gray-800 mb-3">Quality Assurance</h3>
        <p class="text-gray-600 font-light">Our product undergoes rigorous testing to ensure reliability and performance in all scenarios.</p>
      </div>

      <div class="p-8 rounded-2xl bg-white border border-gray-200 shadow-sm transition-all hover:shadow-md">
        <div class="w-12 h-12 flex items-center justify-center rounded-lg bg-blue-50 text-blue-600 mb-6">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z"/>
          </svg>
        </div>
        <h3 class="text-xl font-normal text-gray-800 mb-3">Intuitive Design</h3>
        <p class="text-gray-600 font-light">Thoughtfully designed interface that makes complex tasks simple and enhances user experience.</p>
      </div>

      <div class="p-8 rounded-2xl bg-white border border-gray-200 shadow-sm transition-all hover:shadow-md">
        <div class="w-12 h-12 flex items-center justify-center rounded-lg bg-blue-50 text-blue-600 mb-6">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"/>
          </svg>
        </div>
        <h3 class="text-xl font-normal text-gray-800 mb-3">Dedicated Support</h3>
        <p class="text-gray-600 font-light">Our customer success team is always ready to help you get the most out of our product.</p>
      </div>
    </div>

    <!-- CTA Section -->
    <div class="flex flex-col sm:flex-row gap-4 justify-center mt-12">
      <a 
        href="#request-demo" 
        class="inline-flex items-center px-6 py-3 rounded-lg bg-white border border-gray-200 text-gray-800 hover:bg-gray-50 shadow-sm font-medium transition-colors"
      >
        Request a Custom Demo
        <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
        </svg>
      </a>
      <a 
        href="#product-tour" 
        class="inline-flex items-center px-6 py-3 rounded-lg bg-blue-600 text-white hover:bg-blue-700 shadow-sm font-medium transition-colors"
      >
        Take Product Tour
        <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/>
        </svg>
      </a>
    </div>
  </div>
</section>

<script>
function toggleProductVideo() {
  const thumbnail = document.querySelector('.aspect-video');
  const videoPlayer = document.getElementById('productVideoPlayer');
  const video = document.getElementById('productDemoVideo');
  
  if (videoPlayer.classList.contains('hidden')) {
    videoPlayer.classList.remove('hidden');
    // Replace with actual video source when available
    video.src = 'https://example.com/product-demo.mp4';
    video.play();
  } else {
    videoPlayer.classList.add('hidden');
    video.pause();
    video.src = '';
  }
}
</script>

Demo-video Product Light

This is a Pro component

Access the full component collection

Premium components

Save components

Unlimited usage

Landing page submissions