Memphis_Media_Component_Educational
A responsive media component for educational platforms, designed with a Memphis-style aesthetic using bold colors, geometric shapes, and a neon/electric color scheme. Supports dark mode.
HTML Code
<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>Related Components
Glassmorphism Media Component for Manufacturing
A responsive glassmorphism media component designed for manufacturing/industrial applications, featuring frosted translucent elements, cool neutral colors, and dark mode support.
Media Components Component
A media component designed with skeuomorphism style using Tailwind CSS, featuring responsive effects and dark theme support.
Glassmorphism Media Components Component
Glassmorphism Media Component with responsive effects and dark theme support using Tailwind CSS