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>관련 구성 요소
Brutalism 예약 미디어 구성 요소
예약/예약 시스템을 위한 단순하고 브루탈리즘 스타일의 미디어 구성 요소로, 높은 대비와 보색 구성표를 특징으로 하며 다크 모드 지원으로 완벽하게 반응합니다.
미디어 컴포넌트 컴포넌트
Tailwind CSS로 디자인된 매력적인 애니메이션과 함께 마이크로 인터랙션을 특징으로 하는 반응형 미디어 구성 요소입니다. 어두운 테마를 지원하며 자리 표시자 이미지와 아바타를 포함합니다.
미디어 컴포넌트 컴포넌트
문서/위키 사이트를 위한 복잡한 다크 모드 UI 미디어 구성 요소로, 그라데이션 무지개 색 구성표를 특징으로 합니다. 여기에는 비디오, 오디오 및 자세한 정보와 대화형 요소가 포함된 이미지와 같은 다양한 미디어 유형이 포함되며 모두 반응형이며 시맨틱 HTML을 사용합니다.