Component:
Demo-video Business Modern
Colors:
Description:
This carefully crafted Demo video component is perfect for Business landing pages, featuring a Modern 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: Business
@style: Modern
@category: Page Section, Content
@framework: HTML/CSS
@license: Free
-->
<style>
:root {
/* Colors */
--color-slate-50: #f8fafc;
--color-slate-200: #e2e8f0;
--color-slate-600: #475569;
--color-slate-700: #334155;
--color-slate-800: #1e293b;
--color-slate-900: #0f172a;
--color-indigo-600: #4f46e5;
--color-indigo-700: #4338ca;
--color-white: #ffffff;
/* Spacing */
--spacing-1: 0.25rem;
--spacing-2: 0.5rem;
--spacing-4: 1rem;
--spacing-6: 1.5rem;
--spacing-8: 2rem;
--spacing-12: 3rem;
--spacing-16: 4rem;
/* Font Sizes */
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-3xl: 1.875rem;
--text-4xl: 2.25rem;
/* Border Radius */
--radius-lg: 0.5rem;
--radius-2xl: 1rem;
--radius-full: 9999px;
/* Max Widths */
--max-w-3xl: 48rem;
--max-w-4xl: 56rem;
--max-w-7xl: 80rem;
}
/* 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-video-section {
background-color: var(--color-slate-50);
padding: var(--spacing-16) var(--spacing-4);
}
.section-header {
text-align: center;
max-width: var(--max-w-3xl);
margin: 0 auto var(--spacing-12);
}
.section-title {
font-size: var(--text-3xl);
font-weight: 700;
letter-spacing: -0.025em;
color: var(--color-slate-900);
margin-bottom: var(--spacing-4);
}
.section-description {
font-size: var(--text-lg);
color: var(--color-slate-600);
}
.video-container {
position: relative;
border-radius: var(--radius-2xl);
overflow: hidden;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
background-color: var(--color-white);
border: 1px solid var(--color-slate-200);
max-width: var(--max-w-4xl);
margin: 0 auto;
}
.video-wrapper {
position: relative;
aspect-ratio: 16 / 9;
background-color: var(--color-slate-800);
}
.video-thumbnail {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.play-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: var(--color-indigo-600);
color: var(--color-white);
border-radius: var(--radius-full);
padding: var(--spacing-4);
border: none;
cursor: pointer;
transition: transform 0.2s, background-color 0.2s;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
line-height: 1;
}
.play-button:hover {
background-color: var(--color-indigo-700);
transform: translate(-50%, -50%) scale(1.1);
}
.play-button:focus {
outline: none;
box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-indigo-600);
}
.play-button svg {
width: 3rem;
height: 3rem;
}
.video-iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.video-info {
padding: var(--spacing-6);
}
.video-title {
font-size: var(--text-xl);
font-weight: 600;
color: var(--color-slate-900);
margin-bottom: var(--spacing-1);
}
.video-meta {
color: var(--color-slate-600);
}
.action-buttons {
display: flex;
gap: var(--spacing-4);
margin-top: var(--spacing-4);
}
.action-button {
display: inline-flex;
align-items: center;
color: var(--color-indigo-600);
font-weight: 500;
text-decoration: none;
transition: color 0.2s;
background: transparent;
border: none;
cursor: pointer;
font-size: var(--text-lg);
font-weight: 500;
}
.action-button:hover {
color: var(--color-indigo-700);
}
.action-button svg {
width: 1.25rem;
height: 1.25rem;
margin-right: var(--spacing-2);
}
.video-description {
border-top: 1px solid var(--color-slate-200);
padding: var(--spacing-6);
}
.description-title {
font-weight: 500;
color: var(--color-slate-900);
margin-bottom: var(--spacing-2);
}
.features-list {
list-style: none;
display: grid;
gap: var(--spacing-2) var(--spacing-8);
}
.feature-item {
display: flex;
align-items: flex-start;
color: var(--color-slate-600);
}
.feature-icon {
width: 1.25rem;
height: 1.25rem;
color: var(--color-indigo-600);
margin-right: var(--spacing-2);
margin-top: 0.125rem;
flex-shrink: 0;
}
.cta-container {
margin-top: var(--spacing-8);
display: flex;
flex-direction: column;
gap: var(--spacing-4);
}
.primary-button {
display: inline-block;
background-color: var(--color-indigo-600);
color: var(--color-white);
padding: var(--spacing-3) var(--spacing-6);
border-radius: var(--radius-lg);
text-decoration: none;
font-weight: 500;
text-align: center;
transition: background-color 0.2s;
width: 100%;
}
.primary-button:hover {
background-color: var(--color-indigo-700);
}
.secondary-button {
display: flex;
align-items: center;
justify-content: center;
color: var(--color-slate-700);
font-weight: 500;
text-decoration: none;
width: 100%;
border: none;
cursor: pointer;
font-weight: 500;
text-align: center;
transition: background-color 0.2s;
}
.secondary-button:hover {
color: var(--color-slate-900);
}
.secondary-button svg {
width: 1.25rem;
height: 1.25rem;
margin-right: var(--spacing-2);
}
.hidden {
display: none;
}
/* Responsive Styles */
@media (min-width: 640px) {
.demo-video-section {
padding-left: var(--spacing-6);
padding-right: var(--spacing-6);
}
.section-title {
font-size: var(--text-4xl);
}
.video-info {
padding: var(--spacing-8);
}
.video-info-wrapper {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.cta-container {
flex-direction: row;
align-items: center;
}
.primary-button,
.secondary-button {
width: auto;
}
}
@media (min-width: 768px) {
.features-list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.demo-video-section {
padding-left: var(--spacing-8);
padding-right: var(--spacing-8);
}
}
</style>
<section class="demo-video-section">
<div>
<!-- Section Header -->
<div class="section-header">
<h2 class="section-title">See Our Platform in Action</h2>
<p class="section-description">Discover how our business management solution streamlines operations and boosts productivity with this comprehensive product demonstration.</p>
</div>
<!-- Video Container -->
<div class="video-container">
<!-- Video Thumbnail -->
<div class="video-wrapper">
<div class="video-content">
<!-- Video Thumbnail Image -->
<img id="videoThumbnail" src="https://landinggo.com/assets/img/stock/hero/business-pexels-1620x1080.webp" alt="Business software demonstration" class="video-thumbnail" />
<!-- Play Button -->
<button id="playButton" class="play-button" aria-label="Play video">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</button>
</div>
<!-- Actual Video (Hidden Initially) -->
<div id="videoContainer" class="hidden">
<iframe id="videoPlayer" class="video-iframe" src="" title="Product demonstration video" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<!-- Video Info -->
<div class="video-info">
<div class="video-info-wrapper">
<div>
<h3 class="video-title">Complete Platform Walkthrough</h3>
<p class="video-meta">5:24 min • Updated June 2023</p>
</div>
<div class="action-buttons">
<button class="action-button">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
</svg>
Share
</button>
<a href="#" class="action-button">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
</svg>
Download
</a>
</div>
</div>
</div>
<!-- Video Description -->
<div class="video-description">
<h4 class="description-title">What You'll Learn:</h4>
<ul class="features-list">
<li class="feature-item">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Dashboard navigation and customization
</li>
<li class="feature-item">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Client management workflow
</li>
<li class="feature-item">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Financial reporting tools
</li>
<li class="feature-item">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Team collaboration features
</li>
<li class="feature-item">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Automated workflow setup
</li>
<li class="feature-item">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Integration with third-party tools
</li>
</ul>
<!-- CTA -->
<div class="cta-container">
<a href="#" class="primary-button">
Schedule a Live Demo
</a>
<a href="#" class="secondary-button">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
View Documentation
</a>
</div>
</div>
</div>
</div>
</section>
<script>
// Simple video player functionality
document.addEventListener('DOMContentLoaded', function() {
const playButton = document.getElementById('playButton');
const videoThumbnail = document.getElementById('videoThumbnail');
const videoContainer = document.getElementById('videoContainer');
const videoPlayer = document.getElementById('videoPlayer');
// YouTube video embed URL - replace with your actual video URL
const videoUrl = "https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1";
playButton.addEventListener('click', function() {
// Set the video source
videoPlayer.src = videoUrl;
// Hide thumbnail and play button, show video
videoThumbnail.classList.add('hidden');
playButton.classList.add('hidden');
videoContainer.classList.remove('hidden');
});
});
</script>
<!--
@type: Demo Video
@industry: Business
@style: Modern
@category: Page Section, Content
@framework: Tailwind
@license: Free
-->
<section class="bg-slate-50 py-16 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-12">
<h2 class="text-3xl font-bold tracking-tight text-slate-900 sm:text-4xl mb-4">See Our Platform in Action</h2>
<p class="text-lg text-slate-600">Discover how our business management solution streamlines operations and boosts productivity with this comprehensive product demonstration.</p>
</div>
<!-- Video Container -->
<div class="relative rounded-2xl overflow-hidden shadow-xl bg-white border border-slate-200 max-w-4xl mx-auto">
<!-- Video Thumbnail -->
<div class="aspect-video bg-slate-800 relative">
<!-- Video Placeholder - Replace with actual video embed -->
<div class="absolute inset-0 flex items-center justify-center">
<!-- Video Thumbnail Image -->
<img id="videoThumbnail" src="https://landinggo.com/assets/img/stock/hero/business-pexels-1620x1080.webp" alt="Business software demonstration" class="absolute inset-0 w-full h-full object-cover" />
<!-- Play Button -->
<button id="playButton" class="bg-indigo-600 hover:bg-indigo-700 text-white rounded-full p-4 shadow-lg transition-transform transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" aria-label="Play video">
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</button>
</div>
<!-- Actual Video (Hidden Initially) -->
<div id="videoContainer" class="hidden absolute inset-0">
<iframe id="videoPlayer" class="w-full h-full" src="" title="Product demonstration video" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<!-- Video Info -->
<div class="p-6 sm:p-8">
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
<div>
<h3 class="text-xl font-semibold text-slate-900">Complete Platform Walkthrough</h3>
<p class="text-slate-600 mt-1">5:24 min • Updated June 2023</p>
</div>
<div class="flex items-center gap-4">
<button class="inline-flex items-center text-indigo-600 hover:text-indigo-700 font-medium">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
</svg>
Share
</button>
<a href="#" class="inline-flex items-center text-indigo-600 hover:text-indigo-700 font-medium">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
</svg>
Download
</a>
</div>
</div>
</div>
<!-- Video Description -->
<div class="px-6 pb-6 sm:px-8 sm:pb-8 border-t border-slate-200 pt-6">
<h4 class="font-medium text-slate-900 mb-2">What You'll Learn:</h4>
<ul class="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-2 text-slate-600">
<li class="flex items-start">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-600 mr-2 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Dashboard navigation and customization
</li>
<li class="flex items-start">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-600 mr-2 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Client management workflow
</li>
<li class="flex items-start">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-600 mr-2 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Financial reporting tools
</li>
<li class="flex items-start">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-600 mr-2 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Team collaboration features
</li>
<li class="flex items-start">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-600 mr-2 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Automated workflow setup
</li>
<li class="flex items-start">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-600 mr-2 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Integration with third-party tools
</li>
</ul>
<!-- CTA -->
<div class="mt-8 flex flex-col sm:flex-row gap-4 items-center">
<a href="#" class="bg-indigo-600 text-white px-6 py-3 rounded-lg hover:bg-indigo-700 transition-colors font-medium text-center w-full sm:w-auto">
Schedule a Live Demo
</a>
<a href="#" class="text-slate-700 hover:text-slate-900 font-medium flex items-center justify-center w-full sm:w-auto">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
View Documentation
</a>
</div>
</div>
</div>
</div>
</section>
<script>
// Simple video player functionality
document.addEventListener('DOMContentLoaded', function() {
const playButton = document.getElementById('playButton');
const videoThumbnail = document.getElementById('videoThumbnail');
const videoContainer = document.getElementById('videoContainer');
const videoPlayer = document.getElementById('videoPlayer');
// YouTube video embed URL - replace with your actual video URL
const videoUrl = "https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1";
playButton.addEventListener('click', function() {
// Set the video source
videoPlayer.src = videoUrl;
// Hide thumbnail and play button, show video
videoThumbnail.classList.add('hidden');
playButton.classList.add('hidden');
videoContainer.classList.remove('hidden');
});
});
</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