Memphis_Media_Component_Educational
用于教育平台的响应式媒体组件，采用孟菲斯风格的美学设计，使用大胆的色彩、几何形状和霓虹灯/电色调方案。支持深色模式。
HTML 代码
<div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-purple-400 to-pink-500 dark:from-gray-900 dark:to-purple-900 min-h-screen font-sans">
<div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Course Card 1 -->
<div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border-4 border-fuchsia-500 dark:border-cyan-400">
<div class="absolute inset-0 bg-gradient-to-br from-fuchsia-400 to-electric-blue-600 dark:from-cyan-500 dark:to-lime-400 opacity-20 dark:opacity-10 transform -rotate-6 scale-125"></div>
<div class="relative p-6">
<img src="https://picsum.photos/id/10/400/250" alt="Course Thumbnail" class="w-full h-48 object-cover rounded-lg mb-4 border-2 border-dashed border-lime-400 dark:border-fuchsia-400">
<h3 class="text-2xl font-extrabold text-blue-800 dark:text-lime-400 mb-2 leading-tight">Introduction to Quantum Computing</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Dive into the fascinating world of quantum mechanics and its computational applications.</p>
<div class="flex items-center justify-between mb-4">
<div class="flex -space-x-2 overflow-hidden">
<img class="inline-block h-8 w-8 rounded-full ring-2 ring-fuchsia-500 dark:ring-cyan-400" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Instructor 1">
<img class="inline-block h-8 w-8 rounded-full ring-2 ring-fuchsia-500 dark:ring-cyan-400" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Instructor 2">
</div>
<span class="text-lg font-bold text-hot-pink-600 dark:text-electric-blue-400">$199.99</span>
</div>
<button class="w-full py-3 px-6 rounded-lg bg-lime-400 text-blue-900 dark:bg-fuchsia-500 dark:text-white font-bold uppercase tracking-wider text-lg transform hover:scale-95 transition-transform duration-200 ease-in-out shadow-lg hover:shadow-xl">
Enroll Now
</button>
</div>
</div>
<!-- Course Card 2 -->
<div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border-4 border-lime-400 dark:border-fuchsia-500">
<div class="absolute inset-0 bg-gradient-to-br from-lime-400 to-hot-pink-500 dark:from-fuchsia-500 dark:to-cyan-400 opacity-20 dark:opacity-10 transform rotate-12 scale-125"></div>
<div class="relative p-6">
<img src="https://picsum.photos/id/25/400/250" alt="Course Thumbnail" class="w-full h-48 object-cover rounded-lg mb-4 border-2 border-dashed border-fuchsia-400 dark:border-lime-400">
<h3 class="text-2xl font-extrabold text-blue-800 dark:text-lime-400 mb-2 leading-tight">Memphis Design Fundamentals</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Master the bold aesthetics of 80s Memphis design with practical projects.</p>
<div class="flex items-center justify-between mb-4">
<div class="flex -space-x-2 overflow-hidden">
<img class="inline-block h-8 w-8 rounded-full ring-2 ring-lime-500 dark:ring-purple-400" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Instructor 1">
<img class="inline-block h-8 w-8 rounded-full ring-2 ring-lime-500 dark:ring-purple-400" src="https://randomuser.me/api/portraits/women/67.jpg" alt="Instructor 2">
</div>
<span class="text-lg font-bold text-electric-blue-600 dark:text-hot-pink-400">$149.99</span>
</div>
<button class="w-full py-3 px-6 rounded-lg bg-fuchsia-500 text-white dark:bg-lime-400 dark:text-blue-900 font-bold uppercase tracking-wider text-lg transform hover:scale-95 transition-transform duration-200 ease-in-out shadow-lg hover:shadow-xl">
Learn More
</button>
</div>
</div>
<!-- Course Card 3 -->
<div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border-4 border-cyan-400 dark:border-hot-pink-500">
<div class="absolute inset-0 bg-gradient-to-br from-cyan-400 to-purple-500 dark:from-hot-pink-500 dark:to-electric-blue-400 opacity-20 dark:opacity-10 transform -rotate-12 scale-125"></div>
<div class="relative p-6">
<img src="https://picsum.photos/id/40/400/250" alt="Course Thumbnail" class="w-full h-48 object-cover rounded-lg mb-4 border-2 border-dashed border-hot-pink-400 dark:border-cyan-400">
<h3 class="text-2xl font-extrabold text-blue-800 dark:text-lime-400 mb-2 leading-tight">Advanced AI & Machine Learning</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Explore cutting-edge AI algorithms and build intelligent systems.</p>
<div class="flex items-center justify-between mb-4">
<div class="flex -space-x-2 overflow-hidden">
<img class="inline-block h-8 w-8 rounded-full ring-2 ring-cyan-500 dark:ring-fuchsia-400" src="https://randomuser.me/api/portraits/women/78.jpg" alt="Instructor 1">
<img class="inline-block h-8 w-8 rounded-full ring-2 ring-cyan-500 dark:ring-fuchsia-400" src="https://randomuser.me/api/portraits/men/21.jpg" alt="Instructor 2">
</div>
<span class="text-lg font-bold text-lime-600 dark:text-fuchsia-400">$249.99</span>
</div>
<button class="w-full py-3 px-6 rounded-lg bg-electric-blue-500 text-white dark:bg-hot-pink-400 dark:text-white font-bold uppercase tracking-wider text-lg transform hover:scale-95 transition-transform duration-200 ease-in-out shadow-lg hover:shadow-xl">
View Details
</button>
</div>
</div>
<!-- Video Lesson Card -->
<div class="relative md:col-span-2 bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border-4 border-hot-pink-500 dark:border-lime-400">
<div class="absolute inset-0 bg-gradient-to-br from-hot-pink-400 to-lime-500 dark:from-electric-blue-500 dark:to-fuchsia-400 opacity-20 dark:opacity-10 transform scale-110"></div>
<div class="relative p-6 flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-6 md:mb-0 md:mr-6">
<img src="https://picsum.photos/id/90/600/350" alt="Video Thumbnail" class="w-full rounded-lg shadow-xl border-2 border-dashed border-electric-blue-400 dark:border-hot-pink-400">
</div>
<div class="md:w-1/2">
<span class="text-xs font-bold uppercase tracking-wide text-hot-pink-600 dark:text-lime-400 mb-2 block">Featured Lesson</span>
<h3 class="text-3xl font-extrabold text-blue-800 dark:text-lime-400 mb-3 leading-tight">Understanding Asynchronous JavaScript</h3>
<p class="text-gray-700 dark:text-gray-300 text-base mb-6">A comprehensive guide to promises, async/await, and event loops in modern JavaScript development.</p>
<div class="flex items-center mb-6">
<img class="h-10 w-10 rounded-full ring-2 ring-hot-pink-500 dark:ring-lime-400 mr-3" src="https://randomuser.me/api/portraits/men/7.jpg" alt="Instructor">
<div>
<p class="text-sm font-bold text-gray-800 dark:text-gray-200">Dr. Elara Vance</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Senior Developer & Educator</p>
</div>
</div>
<button class="w-full md:w-auto py-3 px-8 rounded-lg bg-electric-blue-500 text-white dark:bg-fuchsia-500 dark:text-white font-bold uppercase tracking-wider text-lg transform hover:scale-95 transition-transform duration-200 ease-in-out shadow-lg hover:shadow-xl">
Watch Now
<span class="ml-2 text-2xl">▶</span>
</button>
</div>
</div>
</div>
<!-- Downloadable Resource Card -->
<div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border-4 border-fuchsia-500 dark:border-cyan-400">
<div class="absolute inset-0 bg-gradient-to-br from-fuchsia-400 to-electric-blue-600 dark:from-cyan-500 dark:to-lime-400 opacity-20 dark:opacity-10 transform rotate-6 scale-125"></div>
<div class="relative p-6">
<div class="text-center mb-4">
<svg class="mx-auto h-16 w-16 text-lime-500 dark:text-fuchsia-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm0-2a6 6 0 100-12 6 6 0 000 12z" clip-rule="evenodd"></path>
</svg>
</div>
<h3 class="text-2xl font-extrabold text-blue-800 dark:text-lime-400 mb-2 leading-tight text-center">Essential Python Cheat Sheet</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4 text-center">A quick reference guide for Python syntax, functions, and common libraries.</p>
<span class="block text-center text-xs font-semibold text-gray-500 dark:text-gray-400 mb-4">PDF, 2.5 MB</span>
<button class="w-full py-3 px-6 rounded-lg bg-cyan-400 text-blue-900 dark:bg-electric-blue-500 dark:text-white font-bold uppercase tracking-wider text-lg transform hover:scale-95 transition-transform duration-200 ease-in-out shadow-lg hover:shadow-xl">
Download PDF
</button>
</div>
</div>
</div>
</div>
<style>
/* Custom colors for Memphis theme */
/* You would typically define these in tailwind.config.js */
.bg-electric-blue-500 {
background-color: #00FFFF; /* Aqua/Electric Blue */
}
.text-electric-blue-500 {
color: #00FFFF;
}
.dark\:bg-electric-blue-500 {
background-color: #00FFFF;
}
.dark\:text-electric-blue-400 {
color: #00FFFF;
}
.bg-hot-pink-500 {
background-color: #FF1493; /* Deep Pink/Hot Pink */
}
.text-hot-pink-600 {
color: #C71585; /* Darker hot pink */
}
.dark\:bg-hot-pink-400 {
background-color: #FF69B4; /* Lighter hot pink for dark mode */
}
.dark\:text-hot-pink-400 {
color: #FF69B4;
}
.bg-lime-400 {
background-color: #A3E635; /* Lime Green */
}
.text-lime-400 {
color: #A3E635;
}
.text-lime-600 {
color: #84CC16;
}
.dark\:bg-lime-400 {
background-color: #BEF264; /* Lighter lime for dark mode */
}
.dark\:text-lime-400 {
color: #BEF264;
}
.border-fuchsia-500 {
border-color: #D946EF; /* Brighter fuchsia */
}
.border-cyan-400 {
border-color: #22D3EE; /* Brighter cyan */
}
.border-hot-pink-400 {
border-color: #FF69B4;
}
.border-electric-blue-400 {
border-color: #00FFFF;
}
/* Background gradients for overall theme */
.from-purple-400 {
--tw-gradient-from: #C084FC;
--tw-gradient-to: rgba(192, 132, 252, 0);
}
.to-pink-500 {
--tw-gradient-to: #EC4899;
}
.dark\:from-gray-900 {
--tw-gradient-from: #111827;
--tw-gradient-to: rgba(17, 24, 32, 0);
}
.dark\:to-purple-900 {
--tw-gradient-to: #581C87;
}
</style>相关组件
玻璃化媒体组件
一个响应式媒体卡组件，具有通过 Tailwind CSS 构建的 glassmorphism 设计（磨砂玻璃效果）。具有带有悬停显示播放图标的图像占位符（来自 picsum.photos）、文本内容、带有头像的作者部分（来自 randomuser.me）和作按钮。该组件使用 Tailwind CSS “dark：”变体支持深色模式，并且可以在各种屏幕尺寸上响应。不需要 JavaScript。为了获得最佳视觉效果，请将此组件放在对比鲜明的背景上。深色模式功能采用适当的 Tailwind CSS 配置（例如，tailwind.config.js中的 'darkMode： “class”' ）。