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)

334

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