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

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

9 months ago

1.8k
Single Page Portfolio

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

1 year ago

2.4k
Page not found
When lost get help to get back home

Author:
ORGIN_DREAMS

8 months ago

949
Interactive Pricing Table
This modern pricing component features a visually appealing, responsive layout with smooth hover effects, making it ideal for showcasing different plans and subscription tiers. Design and Features: ✅ Elegant Gradient Backgrounds • Each pricing card has a unique gradient overlay, transitioning from soft gray, blue, or indigo to white, enhancing contrast and visual appeal. • The rounded-2xl design ensures a polished and smooth aesthetic. ✅ Interactive Hover Effects • Cards have a subtle hover shadow enhancement, making them pop on interaction (hover:shadow-[0_0px_25px_0px_rgba(0,0,0,0.2)]). • Slight floating effect (hover:translate-y-[-5px]) gives the illusion of elevation on hover. ✅ Pricing & Plan Details • Each card presents a plan title, a short subtitle, and a bold price display (text-3xl font-extrabold text-indigo-500). • Supports free, subscription-based, and enterprise-tier pricing, ensuring flexibility for different business models. ✅ Call-to-Action Buttons • Each plan features a highly visible CTA button (bg-indigo-700 text-white rounded-md). • The buttons change color on hover (hover:bg-indigo-500) and expand slightly, encouraging user interaction. ✅ Animated Background Icons • A large, transparent icon (text-[500px] text-gray-100) dynamically moves on hover (group-hover:-translate-y-8 group-hover:-translate-x-8), adding depth and a premium feel. This pricing component is perfect for SaaS platforms, digital subscriptions, and service offerings, ensuring a modern, sleek, and engaging user experience. 🚀

Author:
Banshee

1 year ago

1.7k
Website Mockup
An Onyx Component. This can be used for landing pages / other website mockup purposes. It's clean design will fit with most SAAS projects.

Author:
Coastal UI

1 year ago

1.9k
landing page
web Design

Author:
Hacker Development

9 months ago

1.3k
Hero

Author:
Hasan AlDoy (McDoy)

1 year ago

1.5k
Complete Profile Form with Avatar Upload & Social Links
A fully responsive profile setup form built with Tailwind CSS and Alpine.js. Users can upload a profile picture, fill in personal and professional details, add social links, and receive real-time validation feedback. Includes a smooth success message animation after submission, with optional navigation to the profile or dashboard. Perfect for onboarding flows or user account management interfaces.

Author:
wavy kits

4 months ago

217
template hero

Author:
Raul antonio de la cruz hernandez

1 month ago

217
home
html , css

Author:
Hacker Development

9 months ago

1.1k
Premium Gaming UI Card, Form & Animated Button (Tailwind CSS)
A modern, senior-level gaming UI built with Tailwind CSS focusing on spacing, typography, and calm visual hierarchy rather than noisy effects. This component set includes: A premium gaming card with clear content structure and outcome-focused copy A clean player signup form with accessible focus states and minimal visual noise A custom animated button using a restrained light-sweep effect for premium interaction feedback Designed to resemble real production gaming platforms rather than demo or template UI. Fully responsive, copy-paste ready, and easy to extend for real-world projects.

Author:
Ayyamperumal S

1 month ago

138
vscode a la omerlinks
vscode a la omerlinks

Author:
Omer fils ELENGA

2 months ago

135

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components