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)

187

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

side bar
html css

Author:
Hacker Development

4 months ago

405
Call to Action
CTA with Dark and Shadow colors

Author:
KULDEEP

3 months ago

316
Simple landing page

Author:
Lîmåã M

2 years ago

18.8k
ChaiCode
ChaiCode

Author:
Tanvir Hasan Bappy (Tanvir)

2 months ago

401
Hero

Author:
Aman kumar

1 year ago

6.5k
SomaRwanda
Menya uburyo bwo kwandika ibisomwa, impuzandimi, n'imyandikire y'icyongereza mu buryo bworoshye.

Author:
Code Master(Mfuranziza Dusabe Hamza)

4 months ago

650
Animated Coming Soon Page 1
animated coming soon landing page

Author:
Repal co

6 months ago

565
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.4k
Modern Testimonial
A simple and easy to use component for reviews and testimonials.

Author:
Coastal UI

7 months ago

909
Hero_Page
#heropage #landingpage

Author:
Rupesh

2 months ago

214
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

3 months ago

433
Section Heading
A gorgeous section heading with a smooth blur element.

Author:
Coastal UI

10 months ago

1.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components