Component:
Demo-video Marketing Dark
Colors:
Description:
This carefully crafted Demo video component is perfect for Marketing landing pages, featuring a Dark 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: Marketing
@style: Dark
@category: Page Section, Content
@framework: HTML/CSS
@license: Free
-->
<style>
/* CSS Custom Properties */
:root {
/* Colors */
--color-white: #ffffff;
--color-gray-300: #d1d5db;
--color-gray-700: #374151;
--color-gray-800: #1f2937;
--color-gray-900: #111827;
--color-blue-400: #60a5fa;
--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-24: 6rem;
}
/* Reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
/* Component Styles */
.demo-section {
background-color: var(--color-gray-900);
padding: var(--spacing-24) var(--spacing-4);
}
.section-header {
text-align: center;
max-width: 48rem;
margin: 0 auto var(--spacing-16) auto;
}
.section-title {
font-size: 1.875rem;
font-weight: 700;
color: var(--color-white);
margin-bottom: var(--spacing-4);
}
.section-description {
color: var(--color-gray-300);
font-size: 1.125rem;
}
.video-container {
position: relative;
border-radius: 1rem;
overflow: hidden;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
background-color: var(--color-gray-800);
border: 1px solid var(--color-gray-700);
}
.video-thumbnail {
position: relative;
cursor: pointer;
aspect-ratio: 16/9;
}
.video-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
.play-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(17, 24, 39, 0.4);
transition: background-color 0.2s;
}
.video-thumbnail:hover .play-overlay {
background-color: rgba(17, 24, 39, 0.3);
}
.play-button {
width: 5rem;
height: 5rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 9999px;
background-color: var(--color-blue-600);
border: none;
cursor: pointer;
transition: all 0.2s;
}
.play-button:hover {
background-color: var(--color-blue-700);
transform: scale(1.1);
}
.play-button svg {
width: 2.5rem;
height: 2.5rem;
color: var(--color-white);
}
.video-player {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background-color: var(--color-black);
display: none;
}
.video-player.active {
display: block;
}
.video-player video {
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-gray-800);
border: none;
cursor: pointer;
color: var(--color-white);
transition: background-color 0.2s;
}
.close-button:hover {
background-color: var(--color-gray-700);
}
.close-button svg {
width: 1.5rem;
height: 1.5rem;
}
.features-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-8);
margin-top: var(--spacing-12);
}
.feature-card {
padding: var(--spacing-6);
border-radius: 0.75rem;
background-color: var(--color-gray-800);
border: 1px solid var(--color-gray-700);
}
.feature-icon {
width: 3rem;
height: 3rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0.5rem;
background-color: rgba(37, 99, 235, 0.1);
color: var(--color-blue-400);
margin-bottom: var(--spacing-4);
}
.feature-icon svg {
width: 1.5rem;
height: 1.5rem;
}
.feature-title {
font-size: 1.25rem;
font-weight: 600;
color: var(--color-white);
margin-bottom: var(--spacing-2);
}
.feature-description {
color: var(--color-gray-300);
}
.cta-section {
margin-top: var(--spacing-12);
text-align: center;
}
.cta-button {
display: inline-flex;
align-items: center;
padding: var(--spacing-3) var(--spacing-8);
border-radius: 0.5rem;
background-color: var(--color-blue-600);
color: var(--color-white);
text-decoration: none;
font-weight: 500;
transition: background-color 0.2s;
}
.cta-button:hover {
background-color: var(--color-blue-700);
}
.cta-button svg {
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;
}
}
@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">
<!-- Section Header -->
<div class="section-header">
<h2 class="section-title">
See Our Platform in Action
</h2>
<p class="section-description">
Watch how our marketing automation platform helps businesses scale their growth and achieve remarkable results.
</p>
</div>
<!-- Video Player Container -->
<div class="video-container">
<!-- Video Thumbnail Container -->
<div class="video-thumbnail">
<!-- Marketing image by Pexels (Free) -->
<img
src="https://landinggo.com/assets/img/stock/hero/marketing-pexels-1920x1080.webp"
alt="Marketing platform demo preview"
/>
<!-- Play Button Overlay -->
<div class="play-overlay">
<button
class="play-button"
aria-label="Play demo video"
onclick="toggleVideo()"
>
<svg 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 -->
<div id="videoPlayer" class="video-player">
<video
id="demoVideo"
controls
preload="none"
poster="https://landinggo.com/assets/img/stock/hero/marketing-pexels-1920x1080.webp"
>
<source src="#" type="video/mp4">
Your browser does not support the video tag.
</video>
<!-- Close Button -->
<button
class="close-button"
onclick="toggleVideo()"
aria-label="Close video player"
>
<svg 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>
<!-- Video Features Grid -->
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
</div>
<h3 class="feature-title">Lightning Fast</h3>
<p class="feature-description">Experience our platform's incredible speed and performance in real-time scenarios.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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">Enterprise Security</h3>
<p class="feature-description">Built with top-tier security measures to protect your valuable marketing data.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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">24/7 Support</h3>
<p class="feature-description">Get expert assistance whenever you need it with our round-the-clock support team.</p>
</div>
</div>
<!-- CTA Section -->
<div class="cta-section">
<a href="#schedule-demo" class="cta-button">
Schedule a Live Demo
<svg 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>
</div>
</section>
<script>
function toggleVideo() {
const thumbnail = document.querySelector('.video-thumbnail');
const videoPlayer = document.getElementById('videoPlayer');
const video = document.getElementById('demoVideo');
if (!videoPlayer.classList.contains('active')) {
videoPlayer.classList.add('active');
thumbnail.style.display = 'none';
// Replace with actual video source when available
video.src = 'https://example.com/demo-video.mp4';
video.play();
} else {
videoPlayer.classList.remove('active');
thumbnail.style.display = 'block';
video.pause();
video.src = '';
}
}
</script>
<!--
@type: Demo Video
@industry: Marketing
@style: Dark
@category: Page Section, Content
@framework: Tailwind
@license: Free
-->
<section class="bg-gray-900 py-24 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<!-- Section Header -->
<div class="text-center max-w-3xl mx-auto mb-16">
<h2 class="text-3xl sm:text-4xl font-bold text-white mb-4">
See Our Platform in Action
</h2>
<p class="text-gray-300 text-lg">
Watch how our marketing automation platform helps businesses scale their growth and achieve remarkable results.
</p>
</div>
<!-- Video Player Container -->
<div class="relative rounded-2xl overflow-hidden shadow-2xl bg-gray-800 border border-gray-700">
<!-- Video Thumbnail Container -->
<div class="aspect-video relative group cursor-pointer" onclick="toggleVideo()">
<!-- Marketing image by Pexels (Free) -->
<img
src="https://landinggo.com/assets/img/stock/hero/marketing-pexels-1920x1080.webp"
alt="Marketing platform demo preview"
class="w-full h-full object-cover"
/>
<!-- Play Button Overlay -->
<div class="absolute inset-0 flex items-center justify-center bg-gray-900 bg-opacity-40 group-hover:bg-opacity-30 transition-all">
<button
class="w-20 h-20 flex items-center justify-center rounded-full bg-blue-600 hover:bg-blue-700 transition-colors group-hover:scale-110 transform duration-200 cursor-pointer"
aria-label="Play demo video"
>
<svg class="w-10 h-10 text-white" 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="videoPlayer" class="hidden absolute inset-0 w-full h-full bg-black">
<video
id="demoVideo"
class="w-full h-full"
controls
preload="none"
poster="https://landinggo.com/assets/img/stock/hero/marketing-pexels-1920x1080.webp"
>
<source src="#" type="video/mp4">
Your browser does not support the video tag.
</video>
<!-- Close Button -->
<button
onclick="toggleVideo()"
class="absolute top-4 right-4 p-2 rounded-full bg-gray-800 hover:bg-gray-700 text-white transition-colors"
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>
<!-- Video Features Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-12">
<div class="p-6 rounded-xl bg-gray-800 border border-gray-700">
<div class="w-12 h-12 flex items-center justify-center rounded-lg bg-blue-600/10 text-blue-400 mb-4">
<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="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
</div>
<h3 class="text-xl font-semibold text-white mb-2">Lightning Fast</h3>
<p class="text-gray-300">Experience our platform's incredible speed and performance in real-time scenarios.</p>
</div>
<div class="p-6 rounded-xl bg-gray-800 border border-gray-700">
<div class="w-12 h-12 flex items-center justify-center rounded-lg bg-blue-600/10 text-blue-400 mb-4">
<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="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-semibold text-white mb-2">Enterprise Security</h3>
<p class="text-gray-300">Built with top-tier security measures to protect your valuable marketing data.</p>
</div>
<div class="p-6 rounded-xl bg-gray-800 border border-gray-700">
<div class="w-12 h-12 flex items-center justify-center rounded-lg bg-blue-600/10 text-blue-400 mb-4">
<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="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-semibold text-white mb-2">24/7 Support</h3>
<p class="text-gray-300">Get expert assistance whenever you need it with our round-the-clock support team.</p>
</div>
</div>
<!-- CTA Section -->
<div class="mt-12 text-center">
<a
href="#schedule-demo"
class="inline-flex items-center px-8 py-3 rounded-lg bg-blue-600 hover:bg-blue-700 text-white font-medium transition-colors"
>
Schedule a Live 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>
</div>
</div>
</section>
<script>
function toggleVideo() {
const thumbnail = document.querySelector('.aspect-video');
const videoPlayer = document.getElementById('videoPlayer');
const video = document.getElementById('demoVideo');
if (videoPlayer.classList.contains('hidden')) {
videoPlayer.classList.remove('hidden');
thumbnail.classList.add('hidden');
// Replace with actual video source when available
video.src = 'https://example.com/demo-video.mp4';
video.play();
} else {
videoPlayer.classList.add('hidden');
thumbnail.classList.remove('hidden');
video.pause();
video.src = '';
}
}
</script> This is a Pro component
Access the full component collection
Get all premium components and focus on building your business
Only 42 early bird spots left 40% offUnlock for $29
(one-time payment)Early bird discount. Regular price $49
Premium components
Get access to all pro Tailwind CSS components. New ones added monthly
Save components
Save your favorite components to your account
Unlimited usage
Use components as often as you want
Landing page submissions
Get your landing pages featured on LandingGo and earn a
strong backlink
21 DR dofollow backlink from the main page