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)

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

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

1 month ago

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

Author:
Code Master(Mfuranziza Dusabe Hamza)

2 months ago

455
Fully Animated Timeline Card
It is at a 20s interval for testing purposes. Go to the <style> and change the .content-scroll class from 20s to 35s for a production ready slower animation.

Author:
Coastal UI

8 months ago

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

Author:
Coastal UI

5 months ago

686
Portfolio Hero Section 4

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

8 months ago

3.1k
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.5k
Nature Hero

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

6 months ago

1.2k
side bar
html css

Author:
Hacker Development

2 months ago

261
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
ArtoGallery
Explore a curated selection of contemporary and classic artwork, connecting collectors and creators in an inspiring online space.

Author:
ORGIN_DREAMS

2 months ago

341
My Personal Landing page
This HTML document showcases Aydin Vesali Moghaddam's personal portfolio, highlighting his journey in web development. The page features a responsive design that adapts to various screen sizes, ensuring a seamless user experience across devices. It includes a personal introduction, a brief overview of Aydin's tech journey, and a contact form for visitors to subscribe to updates. Additionally, the page provides links to Aydin's Discord, website, and Twitter, offering multiple avenues for connecting and staying updated on his projects.

Author:
AyDin VM

1 year ago

5.4k
EduConnect
EduConnect

Author:
Tanvir Hasan Bappy (Tanvir)

2 weeks ago

90

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components