Home
Omer fils ELENGA
about video

about video

about kelaplus video

This tailwind example is contributed by Omer fils ELENGA, on 12-Jul-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Frequently asked questions, QnA,Front page,about me

FAQ Other Landing Page About us

Author Omer fils ELENGA

Fork Fullscreen

<div class="mx-auto max-w-7xl px-6 lg:px-8">
        <div class="text-center mb-16">
            <h2 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4 animate-fade-in [animation-fill-mode:both] [animation-delay:200ms]">
                Qu'est-ce que <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-primary-light">Kela+</span> ?
            </h2>
            <div class="w-20 h-1.5 bg-gradient-to-r from-primary to-primary-light mx-auto mb-6 rounded-full animate-grow [animation-fill-mode:both] [animation-delay:400ms]"></div>
            <p class="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed animate-fade-in [animation-fill-mode:both] [animation-delay:600ms]">
                Découvrez Kela+ à travers cette vidéo de présentation qui vous montrera son fonctionnement innovant et comment il peut transformer votre expérience.
            </p>
        </div>

<div class="[&_[x-cloak]]:hidden" x-data="{ modalOpen: false }">
            <style>
                .video-thumbnail-container {
                    perspective: 1200px;
                    max-width: 900px;
                    margin: 0 auto;
                }
                .video-thumbnail-wrapper {
                    position: relative;
                    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
                    transform-style: preserve-3d;
                }
                .video-thumbnail {
                    border-radius: 1.5rem;
                    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
                    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
                    backface-visibility: hidden;
                    width: 100%;
                    height: auto;
                    aspect-ratio: 16/9;
                    object-fit: cover;
                }
                .video-thumbnail-container:hover .video-thumbnail-wrapper {
                    transform: rotateY(10deg) rotateX(3deg) scale(1.02);
                }
                .video-thumbnail-container:hover .video-thumbnail {
                    box-shadow: 0 32px 64px -12px rgba(0, 0, 0, 0.2);
                }
                .play-button {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    width: 80px;
                    height: 80px;
                    background: rgba(255, 255, 255, 0.9);
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    transition: all 0.3s ease;
                    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
                    backdrop-filter: blur(4px);
                }
                .play-button svg {
                    width: 30px;
                    height: 30px;
                    margin-left: 4px;
                }
                .video-thumbnail-container:hover .play-button {
                    transform: translate(-50%, -50%) scale(1.1) translateZ(30px);
                    background: rgba(255, 255, 255, 1);
                }
                .video-thumbnail-container::before {
                    content: '';
                    position: absolute;
                    inset: -10px;
                    background: linear-gradient(45deg, #4f46e5, #7c3aed, #9333ea);
                    z-index: -1;
                    filter: blur(20px);
                    opacity: 0;
                    transition: opacity 0.3s ease;
                    border-radius: 1.5rem;
                }
                .video-thumbnail-container:hover::before {
                    opacity: 0.4;
                }
                
                @media (max-width: 768px) {
                    .video-thumbnail-container {
                        perspective: 800px;
                    }
                    .play-button {
                        width: 60px;
                        height: 60px;
                    }
                    .play-button svg {
                        width: 24px;
                        height: 24px;
                    }
                }
            </style>

<div class="video-thumbnail-container px-4 sm:px-0 animate-float [animation-fill-mode:both] [animation-delay:800ms]">
                <button 
                    class="video-thumbnail-wrapper w-full h-full focus:outline-none" 
                    @click="modalOpen = true" 
                    aria-controls="modal" 
                    aria-label="Regarder la vidéo de présentation"
                >
                  <img 
                        class="video-thumbnail bg-white"
                        src="https://images.unsplash.com/photo-1573148195900-7845dcb9b127?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxMXx8aXBob25lfGVufDB8MHx8fDE3NTIzMjc5Njd8MA&ixlib=rb-4.1.0&q=80&w=1080" 
                        alt="Présentation vidéo de Kela+"

/>
                    <div class="play-button">
                        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M8 5V19L19 12L8 5Z" fill="#4F46E5"/>
                        </svg>
                    </div>
                </button>
            </div>

<div
                class="fixed inset-0 z-[99999] bg-black/80 backdrop-blur-sm transition-opacity"
                x-show="modalOpen"
                x-transition:enter="transition ease-out duration-200"
                x-transition:enter-start="opacity-0"
                x-transition:enter-end="opacity-100"
                x-transition:leave="transition ease-out duration-100"
                x-transition:leave-start="opacity-100"
                x-transition:leave-end="opacity-0" 
                aria-hidden="true"
                x-cloak
            ></div>

<div
                id="modal"
                class="fixed inset-0 z-[99999] flex px-4 md:px-6 py-6"
                role="dialog"
                aria-modal="true"
                x-show="modalOpen"
                x-transition:enter="transition ease-out duration-300"
                x-transition:enter-start="opacity-0 scale-90"
                x-transition:enter-end="opacity-100 scale-100"
                x-transition:leave="transition ease-out duration-200"
                x-transition:leave-start="opacity-100 scale-100"
                x-transition:leave-end="opacity-0 scale-90"
                x-cloak
            >
                <div class="max-w-6xl mx-auto h-full flex items-center w-full">
                    <div class="w-full max-h-full rounded-2xl shadow-2xl aspect-video bg-black overflow-hidden relative" @click.outside="modalOpen = false" @keydown.escape.window="modalOpen = false">
                        <button 
                            @click="modalOpen = false" 
                            class="absolute -top-12 right-0 text-white hover:text-gray-300 transition-colors"
                            aria-label="Fermer la vidéo"
                        >
                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <line x1="18" y1="6" x2="6" y2="18"></line>
                                <line x1="6" y1="6" x2="18" y2="18"></line>
                            </svg>
                        </button>
                        <video 
                            x-init="$watch('modalOpen', value => value ? $el.play() : $el.pause())" 
                            width="1920" 
                            height="1080" 
                            loop 
                            controls
                            class="w-full h-full object-cover"
                        >
                            <source src="https://cruip-tutorials.vercel.app/modal-video/video.mp4" type="video/mp4" />
                            Votre navigateur ne supporte pas les vidéos.
                        </video>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </section>

<p class="text-center text-sm">Create by omer fils Elenga in congo Brazzaville</p>

@keyframes grow {
            from { transform: scaleX(0); }
            to { transform: scaleX(1); }
        }

@keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

.animate-fade-in {
            animation: fade-in 0.6s ease-out forwards;
        }

.animate-grow {
            animation: grow 0.6s ease-out forwards;
            transform-origin: center;
        }

.animate-float {
            animation: float 6s ease-in-out infinite;
        }
    </style>

<script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'primary-light': '#d058f6',
                        'primary': '#b852f0',
                        'accent': '#74e1eb',
                    }
                }
            }
        }
    </script>

Related Examples

Flour mill website landing page template
flour mill and services template website which comprise of many sections like about us, featured products, why us, visit us

Author:
Amit Pachange

1 year ago

12.1k
About Us
This The About Us Component with the tailwind class and some animation by tailwind and best about us page you can modify it and content is for now only clinic but you can ad your content

Author:
Sahil Sasapara

1 year ago

4.2k
Moving Background Animation

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

5 months ago

2.1k
Responsive Portfolio Webpage with Tailwind CSS
This is a reusable and responsive portfolio webpage template created with HTML and Tailwind CSS. Designed for developers or creatives, the template includes essential sections like Header, Hero, About, Skills, Experience, Projects, Testimonials, Contact Form, and Footer. It features a clean, modern design and is fully customizable without requiring JavaScript. Perfect for showcasing personal or professional work on the web.

Author:
Ayyamperumal S

5 months ago

1.4k
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Author:
Ayyamperumal S

5 months ago

1k
Help and support center ticketing system
Help and support center ticketing system

Author:
Rushikesh Latpate

4 months ago

723
Modern Testimonial
A simple and easy to use component for reviews and testimonials.

Author:
Coastal UI

4 months ago

601
Animated bento box.
A Coastal UI component (coastalui.com). This can be used as part of a bento box, great for showing connectivity between context, could be used beyond just showing tech stacks.

Author:
Coastal UI

4 months ago

835
Reusable Skill Showcase Section With Pure Tailwind CSS
A fully responsive and modular "Skills & Tools" section, perfect for any developer portfolio. Built with static HTML and Tailwind CSS, this component can be easily integrated into any project and made dynamic using any frontend framework (Vue, React, Svelte, Angular) or vanilla JavaScript. Customize it to highlight your unique tech stack and create engaging portfolio pages.

Author:
Abdul Baset Bappy

3 months ago

838
Responsive About Section with Tailwind CSS
Built a sleek and fully responsive About Section for my portfolio using Tailwind CSS! 🚀 Designed for smooth adaptability across all screen sizes with a modern and minimal aesthetic. Perfect for showcasing skills, experience, and a personal touch!

Author:
Abdul Baset Bappy

3 months ago

522
Feature Card
Shows off a feature, great for homepages and grid layout, or can be used in dashboards for "example use" grids. Enjoy! Part of the Coastal UI collection.

Author:
Coastal UI

2 months ago

235
cards
html , css ,

Author:
Hacker Development

2 months ago

377

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components