Component:
Demo-video Software Minimal
Colors:
Description:
This carefully crafted Demo video component is perfect for Software landing pages, featuring a Minimal 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: Software
@style: Minimal
@category: Page Section, Content
@framework: HTML/CSS
@license: Free
-->
<style>
:root {
--color-white: #ffffff;
--color-gray-200: #e5e7eb;
--color-gray-300: #d1d5db;
--color-gray-500: #6b7280;
--color-gray-600: #4b5563;
--color-gray-700: #374151;
--color-gray-900: #111827;
--color-indigo-500: #6366f1;
--color-indigo-600: #4f46e5;
--color-indigo-700: #4338ca;
--color-green-500: #22c55e;
}
* {
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";
}
.demo-video-section {
background-color: var(--color-white);
padding: 4rem 1rem;
}
@media (min-width: 640px) {
.demo-video-section {
padding: 6rem 1.5rem;
}
}
.container {
max-width: 80rem;
margin: 0 auto;
}
@media (min-width: 640px) {
.container {
padding: 0 1.5rem;
}
}
@media (min-width: 1024px) {
.container {
padding: 0 2rem;
}
}
.section-header {
text-align: center;
max-width: 48rem;
margin: 0 auto 3rem;
}
.header-badge {
font-size: 1.125rem;
font-weight: 600;
color: var(--color-indigo-600);
}
.header-title {
margin-top: 0.5rem;
font-size: 1.875rem;
font-weight: 700;
letter-spacing: -0.025em;
color: var(--color-gray-900);
line-height: 1.2;
}
@media (min-width: 640px) {
.header-title {
font-size: 2.25rem;
}
}
.header-description {
margin-top: 1rem;
font-size: 1.125rem;
color: var(--color-gray-600);
}
.video-container {
max-width: 56rem;
margin: 0 auto 4rem;
}
.video-wrapper {
position: relative;
border-radius: 0.75rem;
overflow: hidden;
background-color: var(--color-gray-900);
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}
.video-aspect-ratio {
position: relative;
aspect-ratio: 16 / 9;
}
.video-thumbnail {
width: 100%;
height: auto;
object-fit: cover;
border-radius: 0.75rem;
}
.play-button-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}
.play-button {
display: inline-flex;
align-items: center;
justify-content: center;
height: 5rem;
width: 5rem;
border-radius: 9999px;
background-color: var(--color-indigo-500);
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);
backdrop-filter: blur(4px);
transition: background-color 0.3s;
border: none;
cursor: pointer;
}
.play-button:hover {
background-color: var(--color-indigo-600);
}
.play-button:focus {
outline: none;
box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-indigo-500);
}
.play-icon {
height: 3rem;
width: 3rem;
color: var(--color-white);
}
.video-player {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: none;
}
.video-caption {
background-color: var(--color-white);
padding: 1rem;
}
@media (min-width: 640px) {
.video-caption {
padding: 1.5rem;
}
}
.caption-title {
font-size: 1.125rem;
font-weight: 500;
color: var(--color-gray-900);
}
.caption-description {
margin-top: 0.25rem;
font-size: 0.875rem;
color: var(--color-gray-500);
}
.cta-section {
margin-top: 4rem;
text-align: center;
}
.status-badge {
display: inline-flex;
align-items: center;
border-radius: 9999px;
border: 1px solid var(--color-gray-200);
background-color: var(--color-white);
padding: 0.5rem 1rem;
font-size: 0.875rem;
color: var(--color-gray-600);
margin-bottom: 1.5rem;
}
.status-dot {
height: 0.5rem;
width: 0.5rem;
border-radius: 9999px;
background-color: var(--color-green-500);
margin-right: 0.5rem;
}
.cta-buttons {
display: flex;
flex-direction: column;
justify-content: center;
gap: 1rem;
}
@media (min-width: 640px) {
.cta-buttons {
flex-direction: row;
}
}
.primary-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.5rem;
border: 1px solid transparent;
border-radius: 0.375rem;
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
font-size: 1rem;
font-weight: 500;
color: var(--color-white);
background-color: var(--color-indigo-600);
transition: background-color 0.2s;
text-decoration: none;
}
.primary-button:hover {
background-color: var(--color-indigo-700);
}
.primary-button:focus {
outline: none;
box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-indigo-500);
}
.secondary-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.5rem;
border: 1px solid var(--color-gray-300);
border-radius: 0.375rem;
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
font-size: 1rem;
font-weight: 500;
color: var(--color-gray-700);
background-color: var(--color-white);
transition: background-color 0.2s;
text-decoration: none;
}
.secondary-button:hover {
background-color: var(--color-gray-200);
}
.secondary-button:focus {
outline: none;
box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-indigo-500);
}
.cta-note {
margin-top: 1rem;
font-size: 0.875rem;
color: var(--color-gray-500);
}
</style>
<section class="demo-video-section" aria-labelledby="demo-video-heading">
<div class="container">
<!-- Section Header -->
<div class="section-header">
<span class="header-badge">See it in action</span>
<h2 id="demo-video-heading" class="header-title">
Watch how our software simplifies your business operations
</h2>
<p class="header-description">
Take a quick tour of our platform's key features and see how easy it is to streamline your workflow
</p>
</div>
<!-- Main Video Section -->
<div class="video-container">
<div class="video-wrapper">
<!-- Video Thumbnail with Play Button -->
<div class="video-aspect-ratio">
<!-- Video thumbnail image -->
<img
src="https://landinggo.com/assets/img/stock/hero/saas-figcomp-1222x777.webp"
alt="Software platform demo video thumbnail"
class="video-thumbnail"
width="1920"
height="1080"
loading="lazy"
/>
<!-- Play button overlay -->
<div class="play-button-overlay">
<button
type="button"
class="play-button"
aria-label="Play demo video"
onclick="document.getElementById('demoVideo').style.display='block'; this.style.display='none'; document.getElementById('demoVideo').play();"
>
<svg class="play-icon" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M8 5v14l11-7z" />
</svg>
</button>
</div>
<!-- Actual video (hidden initially) -->
<video
id="demoVideo"
class="video-player"
controls
preload="none"
poster="https://landinggo.com/assets/img/stock/hero/saas-figcomp-1222x777.webp"
>
<source src="#" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<!-- Video Caption -->
<div class="video-caption">
<h3 class="caption-title">Complete Platform Overview (3:45)</h3>
<p class="caption-description">See how our software helps small businesses automate tasks, manage customers, and grow revenue.</p>
</div>
</div>
</div>
<!-- CTA Section -->
<div class="cta-section">
<div class="status-badge">
<span class="status-dot"></span>
<span>No credit card required</span>
</div>
<div class="cta-buttons">
<a href="#trial" class="primary-button" role="button" aria-label="Start your free trial">
Start your free trial
</a>
<a href="#demo" class="secondary-button" role="button" aria-label="Watch full demo">
Watch full demo
</a>
</div>
<p class="cta-note">Join 3,000+ small businesses already using our platform</p>
</div>
</div>
</section>
<!--
@type: Demo Video
@industry: Software
@style: Minimal
@category: Page Section, Content
@framework: Tailwind
@license: Free
-->
<section class="bg-white py-16 sm:py-24" aria-labelledby="demo-video-heading">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<!-- Section Header -->
<div class="mx-auto max-w-3xl text-center mb-12">
<span class="text-lg font-semibold text-indigo-600">See it in action</span>
<h2 id="demo-video-heading" class="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
Watch how our software simplifies your business operations
</h2>
<p class="mt-4 text-lg text-gray-600">
Take a quick tour of our platform's key features and see how easy it is to streamline your workflow
</p>
</div>
<!-- Main Video Section -->
<div class="mx-auto max-w-4xl mb-16">
<div class="relative rounded-xl overflow-hidden bg-gray-900 shadow-xl">
<!-- Video Thumbnail with Play Button -->
<div class="aspect-w-16 aspect-h-9 relative">
<!-- Video thumbnail image -->
<img
src="https://landinggo.com/assets/img/stock/hero/saas-figcomp-1222x777.webp"
alt="Software platform demo video thumbnail"
class="w-full h-full object-cover rounded-xl"
width="1920"
height="1080"
loading="lazy"
/>
<!-- Play button overlay -->
<div class="absolute inset-0 flex items-center justify-center">
<button
type="button"
class="inline-flex items-center justify-center h-20 w-20 rounded-full bg-indigo-500 shadow-xl backdrop-blur-sm hover:bg-indigo-600 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
aria-label="Play demo video"
onclick="document.getElementById('demoVideo').style.display='block'; this.style.display='none'; document.getElementById('demoVideo').play();"
>
<svg class="h-12 w-12 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M8 5v14l11-7z" />
</svg>
</button>
</div>
<!-- Actual video (hidden initially) -->
<video
id="demoVideo"
class="absolute inset-0 w-full h-full hidden"
controls
preload="none"
poster="https://landinggo.com/assets/img/stock/hero/saas-figcomp-1222x777.webp"
>
<source src="#" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<!-- Video Caption -->
<div class="bg-white p-4 sm:p-6">
<h3 class="text-lg font-medium text-gray-900">Complete Platform Overview (3:45)</h3>
<p class="mt-1 text-sm text-gray-500">See how our software helps small businesses automate tasks, manage customers, and grow revenue.</p>
</div>
</div>
</div>
<!-- CTA Section -->
<div class="mt-16 text-center">
<div class="inline-flex items-center rounded-full border border-gray-200 bg-white px-4 py-2 text-sm text-gray-600 mb-6">
<span class="flex h-2 w-2 rounded-full bg-green-500"></span>
<span class="ml-2">No credit card required</span>
</div>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<a href="#trial" class="inline-flex items-center justify-center px-6 py-3 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" role="button" aria-label="Start your free trial">
Start your free trial
</a>
<a href="#demo" class="inline-flex items-center justify-center px-6 py-3 border border-gray-300 rounded-md shadow-sm text-base font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" role="button" aria-label="Watch full demo">
Watch full demo
</a>
</div>
<p class="mt-4 text-sm text-gray-500">Join 3,000+ small businesses already using our platform</p>
</div>
</div>
</section>
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