Chinese

This tailwind example is contributed by Tanvir Hasan Bappy (Tanvir), on 17-Jun-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is Front page

Landing Page

Author Tanvir Hasan Bappy (Tanvir)

189

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Learn Chinese: 电视 (diànshì) - Television</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap');
        
        .chinese-font {
            font-family: 'Noto Sans SC', sans-serif;
        }
        
        .gradient-bg {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        }
        
        .flashcard {
            perspective: 1000px;
            transition: all 0.5s ease;
        }
        
        .flashcard-inner {
            transition: transform 0.8s;
            transform-style: preserve-3d;
        }
        
        .flashcard.flipped .flashcard-inner {
            transform: rotateY(180deg);
        }
        
        .flashcard-front, .flashcard-back {
            backface-visibility: hidden;
        }
        
        .flashcard-back {
            transform: rotateY(180deg);
        }
        
        .character-breakdown {
            transition: all 0.3s ease;
        }
        
        .character-breakdown:hover {
            transform: scale(1.05);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
        }
        
        .pulse-animate {
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

@keyframes blob {
            0% { transform: translate(0px, 0px) scale(1); }
            33% { transform: translate(30px, -50px) scale(1.1); }
            66% { transform: translate(-30px, 30px) scale(0.9); }
            100% { transform: translate(0px, 0px) scale(1); }
        }

.animate-blob {
            animation: blob 7s infinite;
        }

.animation-delay-2000 {
            animation-delay: 2s;
        }

.animation-delay-4000 {
            animation-delay: 4s;
        }

.word-highlight {
            @apply relative inline-block;  
        }

.word-highlight::after {
            content: '';
            @apply absolute bottom-0 left-0 w-full h-1 bg-gradient-to-r from-blue-400 to-purple-500;
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.3s ease;
        }

.word-highlight:hover::after {
            transform: scaleX(1);
        }
    </style>
</head>
<body class="gradient-bg min-h-screen">
    <div class="container mx-auto px-4 py-8 max-w-4xl">
        
        <header class="text-center mb-12">
            <div class="relative overflow-hidden">
                <div class="absolute -top-20 -left-40 w-80 h-80 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div>
                <div class="absolute top-20 -right-40 w-80 h-80 bg-blue-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div>
                <div class="absolute -bottom-20 -right-20 w-80 h-80 bg-pink-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000"></div>
                <div class="relative">
                    <h1 class="text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-purple-600 mb-2 animate__animated animate__fadeInDown animate__fast">学习中文: 电视</h1>
                    <p class="text-xl text-gray-600 animate__animated animate__fadeIn animate__delay-1s">Master the word for "television" with memory hacks</p>
                    <div class="w-24 h-1 bg-gradient-to-r from-blue-400 to-purple-500 mx-auto mt-4 rounded-full animate__animated animate__fadeIn animate__delay-1s"></div>
                </div>
            </div>
        </header>

<div class="backdrop-blur-sm bg-white/70 rounded-3xl shadow-xl overflow-hidden mb-12 animate__animated animate__fadeInUp border border-white/20 hover:border-white/40 transition-all duration-300 hover:shadow-2xl hover:backdrop-blur-md">
            
            <div class="bg-blue-600 py-4 px-6 flex items-center">
                <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold text-xl mr-3">视</div>
                <div>
                    <h2 class="text-2xl font-bold text-white chinese-font">电视 (diànshì)</h2>
                    <p class="text-blue-100">television / TV</p>
                </div>
            </div>
            
            
            <div class="p-6">
                
                <div class="flex flex-col md:flex-row justify-between mb-8 gap-4">
                    <div class="character-breakdown bg-gradient-to-br from-blue-50 to-blue-100 p-6 rounded-xl flex-1 text-center border border-blue-100 shadow-sm hover:shadow-md transition-all duration-300 animate__animated animate__fadeInLeft">
                        <div class="text-5xl font-bold text-blue-600 chinese-font mb-2">电</div>
                        <div class="font-semibold">diàn</div>
                        <div class="text-gray-700">electricity</div>
                    </div>
                    <div class="flex items-center justify-center text-3xl font-bold text-gray-400">+</div>
                    <div class="character-breakdown bg-blue-50 p-4 rounded-lg flex-1 text-center border border-blue-200">
                        <div class="text-5xl font-bold text-blue-600 chinese-font mb-2">视</div>
                        <div class="font-semibold">shì</div>
                        <div class="text-gray-700">vision, to look at</div>
                    </div>
                    <div class="flex items-center justify-center text-3xl font-bold text-gray-400">=</div>
                    <div class="character-breakdown bg-green-50 p-4 rounded-lg flex-1 text-center border border-green-200 pulse-animate">
                        <div class="text-5xl font-bold text-green-600 chinese-font mb-2">电视</div>
                        <div class="font-semibold">diànshì</div>
                        <div class="text-gray-700">television</div>
                    </div>
                </div>

<div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 rounded-r-lg mb-6">
                    <h3 class="font-bold text-lg text-yellow-800 mb-2 flex items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M7 4a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H8a1 1 0 01-1-1V4zm1 7a1 1 0 011-1h1a1 1 0 110 2H9a1 1 0 01-1-1zm4-1a1 1 0 100 2h1a1 1 0 100-2h-1zm-7 4a1 1 0 011-1h1a1 1 0 110 2H5a1 1 0 01-1-1z" clip-rule="evenodd" />
                        </svg>
                        Visual & Sound Hack
                    </h3>
                    <div class="text-gray-700">
                        <p class="mb-2">Imagine a TV plugged into an electrical socket (<span class="font-bold">电</span>) showing a big eye (<span class="font-bold">视</span>) on the screen.</p>
                        <p><span class="font-bold">电 (diàn)</span> sounds like "Dian" = imagine saying "Ding-Dian" like a power sound</p>
                        <p><span class="font-bold">视 (shì)</span> sounds like "shrrr" = like the static sound from an old TV</p>
                        <p class="mt-2 italic">→ A "Ding!" from 电 turns on the "Shhhrrr!" vision 视 = 电视 (TV)!</p>
                    </div>
                </div>

<div class="mb-6">
                    <h3 class="font-bold text-lg text-gray-800 mb-3 flex items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z" clip-rule="evenodd" />
                        </svg>
                        Example Sentences
                    </h3>
                    <div class="space-y-3">
                        <div class="bg-gray-50 p-3 rounded-lg">
                            <p class="text-lg chinese-font">我在看电视。</p>
                            <p class="text-gray-700">Wǒ zài kàn diànshì.</p>
                            <p class="font-medium">I'm watching TV.</p>
                        </div>
                        <div class="bg-gray-50 p-3 rounded-lg">
                            <p class="text-lg chinese-font">他家有两台电视。</p>
                            <p class="text-gray-700">Tā jiā yǒu liǎng tái diànshì.</p>
                            <p class="font-medium">His family has two TVs.</p>
                        </div>
                    </div>
                </div>

<div>
                    <h3 class="font-bold text-lg text-gray-800 mb-3 flex items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
                            <path d="M10.394 2.08a1 1 0 00-.788 0l-7 3a1 1 0 000 1.84L5.25 8.051a.999.999 0 01.356-.257l4-1.714a1 1 0 11.788 1.838l-2.727 1.17 1.94.831a1 1 0 00.787 0l7-3a1 1 0 000-1.838l-7-3zM3.31 9.397L5 10.246v4.941l1.787 1.738a2 2 0 001.426.541h4.189a2 2 0 001.426-.540l1.787-1.739v-4.942l1.691-.848a1.5 1.5 0 00.59-2.08l-6.571-11.35a1.5 1.5 0 00-2.581 0L2.72 7.324a1.5 1.5 0 00.59 2.073z" />
                        </svg>
                        Related Words
                    </h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="bg-indigo-50 p-4 rounded-lg border border-indigo-200">
                            <div class="text-2xl font-bold text-indigo-600 chinese-font mb-1">电脑</div>
                            <div class="font-semibold">diànnǎo</div>
                            <div class="text-gray-700">computer ("electric brain")</div>
                        </div>
                        <div class="bg-indigo-50 p-4 rounded-lg border border-indigo-200">
                            <div class="text-2xl font-bold text-indigo-600 chinese-font mb-1">电话</div>
                            <div class="font-semibold">diànhuà</div>
                            <div class="text-gray-700">telephone ("electric speech")</div>
                        </div>
                    </div>
                    <div class="mt-4 bg-blue-50 p-3 rounded-lg text-blue-800">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 float-left mr-2" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
                        </svg>
                        <strong>Tip:</strong> If you see 电 (diàn) in a word, it's almost always something that uses electricity.
                    </div>
                </div>
            </div>
        </div>

<div class="text-center mb-12">
            <h2 class="text-2xl font-bold text-gray-800 mb-6">Interactive Flashcard</h2>
            <div class="flashcard w-full max-w-md mx-auto cursor-pointer group" onclick="this.classList.toggle('flipped')">
                <div class="flashcard-inner w-full h-72 rounded-2xl shadow-lg transition-transform duration-700 [transform-style:preserve-3d] group-hover:[transform:rotateY(10deg)]">
                    
                    <div class="flashcard-front absolute w-full h-full bg-gradient-to-br from-purple-500 to-indigo-600 rounded-xl p-6 flex flex-col items-center justify-center text-white">
                        <div class="text-7xl chinese-font mb-4">📺</div>
                        <div class="text-4xl font-bold chinese-font mb-2">电视</div>
                        <p class="text-xl">diànshì</p>
                        <p class="mt-4 text-purple-100">Click to flip</p>
                    </div>
                    
                    
                    <div class="flashcard-back absolute w-full h-full bg-white rounded-xl p-6 flex flex-col items-center justify-center text-gray-800">
                        <h3 class="text-xl font-bold mb-4">TV / Television</h3>
                        <div class="flex mb-4">
                            <div class="text-center px-3">
                                <div class="text-2xl chinese-font">电</div>
                                <div class="text-sm">diàn</div>
                                <div class="text-xs">electricity</div>
                            </div>
                            <div class="text-center px-3">
                                <div class="text-2xl chinese-font">视</div>
                                <div class="text-sm">shì</div>
                                <div class="text-xs">vision</div>
                            </div>
                        </div>
                        <div class="bg-gray-100 p-3 rounded-lg w-full mb-4">
                            <p class="text-lg chinese-font">我在看电视。</p>
                            <p>Wǒ zài kàn diànshì.</p>
                            <p class="font-medium">I'm watching TV.</p>
                        </div>
                        <p class="text-sm text-gray-500">Click to flip back</p>
                    </div>
                </div>
            </div>
        </div>

<div class="bg-white rounded-2xl shadow-lg p-6 mb-12">
            <h2 class="text-2xl font-bold text-gray-800 mb-6 text-center">Practice Exercise</h2>
            <div class="space-y-6">
                <div class="p-4 border-2 border-dashed border-gray-300 rounded-lg">
                    <p class="font-medium mb-3">What does 电视 mean?</p>
                    <div class="flex flex-wrap gap-2" id="meaning-options">
                        <button class="option-btn px-4 py-2 bg-gray-50 rounded-xl hover:bg-gray-100 transition-all duration-200 hover:shadow-sm hover:-translate-y-0.5 border border-gray-200 hover:border-blue-300">Television</button>
                        <button class="option-btn px-4 py-2 bg-gray-100 rounded-full hover:bg-gray-200 transition">Computer</button>
                        <button class="option-btn px-4 py-2 bg-gray-100 rounded-full hover:bg-gray-200 transition">Radio</button>
                        <button class="option-btn px-4 py-2 bg-gray-100 rounded-full hover:bg-gray-200 transition">Refrigerator</button>
                    </div>
                </div>
                
                <div class="p-4 border-2 border-dashed border-gray-300 rounded-lg">
                    <p class="font-medium mb-3">Which character means "electricity" in 电视?</p>
                    <div class="flex flex-wrap gap-2" id="character-options">
                        <button class="char-option-btn px-4 py-2 bg-gray-100 rounded-full hover:bg-gray-200 transition chinese-font text-xl">电</button>
                        <button class="char-option-btn px-4 py-2 bg-gray-100 rounded-full hover:bg-gray-200 transition chinese-font text-xl">视</button>
                        <button class="char-option-btn px-4 py-2 bg-gray-100 rounded-full hover:bg-gray-200 transition chinese-font text-xl">电 and 视</button>
                        <button class="char-option-btn px-4 py-2 bg-gray-100 rounded-full hover:bg-gray-200 transition chinese-font text-xl">Neither</button>
                    </div>
                </div>
                
                <div class="p-4 border-2 border-dashed border-gray-300 rounded-lg">
                    <p class="font-medium mb-3">Complete the sentence: 我在看______。</p>
                    <div class="flex">
                        <input type="text" id="sentence-input" class="flex-1 border-b-2 border-gray-300 px-2 py-1 focus:border-blue-500 focus:outline-none chinese-font" placeholder="Type in Chinese...">
                        <button id="check-btn" class="ml-2 px-4 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition">Check</button>
                    </div>
                </div>
            </div>
        </div> 
    </div>

<div class="bg-white rounded-2xl shadow-lg p-6 mb-6">
        <h2 class="text-2xl font-bold text-gray-800 mb-4 text-center">Quick Quiz</h2>
        <div class="space-y-4">
            <div class="quiz-question p-4 rounded-lg bg-blue-50 border border-blue-200">
                <p class="font-medium mb-3">What does 电 mean in 电视?</p>
                <div class="space-y-2">
                    <label class="flex items-center space-x-2 cursor-pointer">
                        <input type="radio" name="quiz1" class="form-radio text-blue-600">
                        <span>Electricity</span>
                    </label>
                    <label class="flex items-center space-x-2 cursor-pointer">
                        <input type="radio" name="quiz1" class="form-radio text-blue-600">
                        <span>Vision</span>
                    </label>
                    <label class="flex items-center space-x-2 cursor-pointer">
                        <input type="radio" name="quiz1" class="form-radio text-blue-600">
                        <span>Screen</span>
                    </label>
                </div>
            </div>
            <div class="quiz-question p-4 rounded-lg bg-blue-50 border border-blue-200">
                <p class="font-medium mb-3">Which of these words uses 电?</p>
                <div class="space-y-2">
                    <label class="flex items-center space-x-2 cursor-pointer">
                        <input type="radio" name="quiz2" class="form-radio text-blue-600">
                        <span class="chinese-font">电脑</span>
                    </label>
                    <label class="flex items-center space-x-2 cursor-pointer">
                        <input type="radio" name="quiz2" class="form-radio text-blue-600">
                        <span class="chinese-font">书本</span>
                    </label>
                    <label class="flex items-center space-x-2 cursor-pointer">
                        <input type="radio" name="quiz2" class="form-radio text-blue-600">
                        <span class="chinese-font">桌子</span>
                    </label>
                </div>
            </div>
            <button id="quiz-submit" class="w-full py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
                Check Answers
            </button>
        </div>
    </div>

<div class="container mx-auto px-4 max-w-4xl mb-6 flex justify-between">
        <a href="#" class="px-6 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg transition-colors flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
            Previous
        </a>
        <a href="#" class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors flex items-center">
            Next
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
            </svg>
        </a>
    </div>

<footer class="bg-gray-800 text-white py-6 mt-6">
        <div class="container mx-auto px-4 text-center">
            <p class="mb-2">Created with ❤️ for Chinese learners</p>
            <p class="text-gray-400 text-sm">Remember: 电 (diàn) = electricity appears in many electronic device names!</p>
        </div>
    </footer>

Related Examples

Animated Coming Soon Page 1
animated coming soon landing page

Author:
Repal co

7 months ago

682
Contact Us Form
CTAs help convert visitors into action-takers (customers, subscribers, etc.), while Contact Us forms enable easy communication, building trust and support. Both are vital for engaging visitors and achieving your website’s objectives.

Author:
KULDEEP

4 months ago

474
Learn Confidently with Rabbil Hasan

Author:
Tanvir Hasan Bappy (Tanvir)

3 weeks ago

20
Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Author:
Ayyamperumal S

5 months ago

1.4k
EduConnect
EduConnect

Author:
Tanvir Hasan Bappy (Tanvir)

3 months ago

274
Free Responsive Hero Section
Get this professional hero section for your website. Includes a gradient text effect, stylish background blurs, and a perfectly aligned image section. Easy to integrate and fully customizable for any project.

Author:
Homayoun

1 month ago

49
Landing page
g2.5, neomorphism

Author:
Akram Khan

4 months ago

610
ChaiCode
ChaiCode

Author:
Tanvir Hasan Bappy (Tanvir)

3 months ago

605
GreenLeaf
Transform Your Garden

Author:
ORGIN_DREAMS

5 months ago

804
Our Services Section – Animated & Responsive
A modern and dynamic “Services” section built with Tailwind CSS and Alpine.js, designed to showcase your company’s main offerings with clean visuals and engaging animations. This component uses smooth fade and slide animations to reveal each service card as it comes into view. Each card highlights a core business area — Web Development, Mobile Apps, and Cloud Solutions — with beautiful hover effects, icons, and descriptive lists. Perfect for SaaS websites, agencies, and startups looking to present their services in a visually appealing, professional, and responsive layout. Key Features Smooth scroll-triggered animations with Alpine.js Responsive grid layout (mobile → desktop ready) Built with Tailwind CSS for fast customization Dark mode support included Interactive hover effects for each service card Ideal for corporate, SaaS, or portfolio websites 💡 Services Included 🌐 Web Development (Responsive, SEO-friendly, Optimized) 📱 Mobile Apps (Cross-platform, iOS & Android) ☁️ Cloud Solutions (AWS, Azure, Auto-scaling, Security)

Author:
wavy kits

3 weeks ago

157
about video
about kelaplus video

Author:
Omer fils ELENGA

3 months ago

378
Real Estate Website • Hero Section
polished, professional Hero section

Author:
UI-Templates

2 weeks ago

69

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components