Video Slider - Copy this React, Tailwind Component to your project
MAKE-THIS-MORE-MODERN-FOR-MY-WORDPRESS-SITE-ALSO-DO-SOEM-COOLK-EFFECTS-WITH-BUTTON-S'<!DOCTYPE-html>-<html-lang="en">-<head>-<meta-charset="UTF-8">-<meta-name="viewport"-content="width=device-width,-initial-scale=1.0">-<title>Custom-Slider</title>-<link-rel="stylesheet"-href="styles.css">-<link-rel="preconnect"-href="https://fonts.googleapis.com">-<link-rel="preconnect"-href="https://fonts.gstatic.com"-crossorigin>-<link-href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap"-rel="stylesheet">-</head>-<body>-<div-class="custom-slider">-<!---Slide-1:-Video--->-<div-class="slide-active">-<video-id="video1"-autoplay-muted-playsinline-loop-preload="auto">-<source-src="https://tuxrevamp2024.techinatux.com/icanhelpu/wp-content/uploads/2024/10/202743-918944206_16.57.12-1.mp4"-type="video/mp4">-Your-browser-does-not-support-the-video-tag.-</video>-<div-class="text-overlay">-<h1><span>Start-Your</span>-<span-class="highlight-gold">Journey</span>-<span>to</span><br><span-class="highlight-gold">Personal-Growth</span></h1>-<p-class="subtitle-text">Find-Support-for-Addiction,-Mental-Health,-and-Personal-Growth</p>-<div-class="buttons">-<a-href="#"-class="button-green">Start-Your-Transformation-Now</a>-<a-href="#"-class="button-outline">Explore-Our-Services</a>-</div>-</div>-</div>-<!---Slide-2:-Video--->-<div-class="slide">-<video-id="video2"-autoplay-muted-playsinline-loop-preload="auto">-<source-src="https://tuxrevamp2024.techinatux.com/icanhelpu/wp-content/uploads/2024/10/3188988-hd_1920_1080_25fps_10.16.8.mp4"-type="video/mp4">-Your-browser-does-not-support-the-video-tag.-</video>-<div-class="text-overlay">-<h1><span>Discover-Your</span>-<span-class="highlight-gold">Potential</span></h1>-<p-class="subtitle-text">Empowering-You-to-Overcome-Challenges-and-Thrive</p>-<div-class="buttons">-<a-href="#"-class="button-green">Learn-More</a>-<a-href="#"-class="button-outline">Get-Started</a>-</div>-</div>-</div>-<!---Navigation-Dots--->-<div-class="dots">-<span-class="dot-active"-onclick="setCurrentSlide(0)"></span>-<span-class="dot"-onclick="setCurrentSlide(1)"></span>-</div>-</div>-<script-src="script.js"></script>-</body>-</html>-'
