뉴모픽 미디어 임베드 컴포넌트
CRM/비즈니스 도구용으로 설계된 생생한 색상의 복잡한 뉴모픽 미디어 임베드 구성 요소로, 비디오 플레이어, 관련 콘텐츠 및 완전한 응답성과 다크 모드를 지원하는 대화형 컨트롤을 보여줍니다.
HTML 코드
<div class="p-4 sm:p-6 md:p-8 lg:p-10 min-h-screen bg-gradient-to-br from-blue-50 to-purple-100 dark:from-gray-900 dark:to-gray-800 font-sans text-gray-800 dark:text-gray-200">
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold mb-8 text-center text-indigo-700 dark:text-purple-400 drop-shadow-lg">CRM Media Insight</h2>
<div class="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- Main Media Player Section -->
<div class="lg:col-span-2 p-6 rounded-3xl bg-blue-100 dark:bg-gray-850 shadow-neumorphic-light dark:shadow-neumorphic-dark transition-all duration-300">
<div class="relative pb-[56.25%] h-0 mb-6 rounded-2xl overflow-hidden shadow-inset-neumorphic-light dark:shadow-inset-neumorphic-dark">
<iframe class="absolute top-0 left-0 w-full h-full rounded-2xl" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="flex flex-col sm:flex-row items-start sm:items-center justify-between mb-4">
<div>
<h3 class="text-xl sm:text-2xl font-bold text-indigo-800 dark:text-purple-300 mb-1">Customer Onboarding: Module 1</h3>
<p class="text-sm sm:text-base text-gray-600 dark:text-gray-400">Presented by Acme Solutions, Inc.</p>
</div>
<div class="mt-4 sm:mt-0 flex space-x-3">
<button class="p-3 rounded-full bg-blue-200 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-pressed-light dark:hover:shadow-neumorphic-pressed-dark text-indigo-700 dark:text-purple-400 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-blue-100 dark:focus:ring-offset-gray-850" aria-label="Like Video">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 21.35l-1.95-1.8C4.24 14.07 2 12.16 2 9.5 2 7.02 3.99 5 6.5 5c1.74 0 3.41.81 4.5 2.09C12.09 5.81 13.76 5 15.5 5 18.01 5 20 7.02 20 9.5c0 2.66-2.24 4.57-8 10.09z"/>
</svg>
</button>
<button class="p-3 rounded-full bg-blue-200 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-pressed-light dark:hover:shadow-neumorphic-pressed-dark text-indigo-700 dark:text-purple-400 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-blue-100 dark:focus:ring-offset-gray-850" aria-label="Share Video">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.55 1.25.89 2.04.89 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.03.47.08.69L6 8.35v7.3l-2.07-1.12c-.01-.01-.02-.01-.03-.02-.12-.08-.2-.17-.28-.31-.1-.18-.18-.39-.23-.62-.05-.23-.08-.48-.08-.73 0-.25.03-.5.08-.73.05-.23.13-.44.23-.62.08-.14.16-.23.28-.31.01-.01.02-.01.03-.02l2.36-1.3c-.05-.22-.08-.46-.08-.7 0-1.66 1.34-3 3-3s3 1.34 3 3c0 .24-.03.47-.08.69L18 8.35c.76 0 1.44.3 1.96.77L21 12.3c-.05.23-.09.46-.09.7s.04.47.09.7L18.04 16.08l-.01.01z"/>
</svg>
</button>
</div>
</div>
<div class="text-gray-700 dark:text-gray-300 mb-6">
<p class="mb-2 text-justify">This comprehensive video provides an in-depth guide to the initial steps of customer onboarding within the CRM system. Learn how to efficiently set up new client profiles, assign tasks, and track their progress through the initial stages of their journey.</p>
<p class="text-sm text-gray-500 dark:text-gray-400">#CRM #Onboarding #CustomerSuccess #BusinessTools</p>
</div>
<!-- Comment / Interaction Section -->
<div class="pt-4 border-t border-blue-200 dark:border-gray-700">
<div class="flex items-center space-x-4 mb-4">
<img class="w-10 h-10 rounded-full shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<input type="text" placeholder="Add a comment..." class="flex-grow p-3 rounded-full bg-blue-50 dark:bg-gray-750 placeholder-gray-500 text-gray-800 dark:text-gray-200 shadow-inset-neumorphic-light dark:shadow-inset-neumorphic-dark focus:outline-none focus:ring-2 focus:ring-indigo-400 dark:focus:ring-purple-500 transition-all duration-200">
<button class="p-3 rounded-full bg-green-400 dark:bg-green-600 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-pressed-light dark:hover:shadow-neumorphic-pressed-dark text-white transform hover:scale-105 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-blue-100 dark:focus:ring-offset-gray-850" aria-label="Post Comment">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
</svg>
</button>
</div>
<div class="space-y-4">
<div class="flex items-start space-x-3 p-3 rounded-xl bg-blue-150 dark:bg-gray-800 shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm">
<img class="w-8 h-8 rounded-full shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Commenter Avatar">
<div>
<p class="font-semibold text-indigo-700 dark:text-purple-300 text-sm">Sarah J.</p>
<p class="text-gray-700 dark:text-gray-300 text-sm">"Great insights! This really simplifies the initial setup."</p>
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">2 days ago</p>
</div>
</div>
<div class="flex items-start space-x-3 p-3 rounded-xl bg-blue-150 dark:bg-gray-800 shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm">
<img class="w-8 h-8 rounded-full shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark" src="https://randomuser.me/api/portraits/men/21.jpg" alt="Commenter Avatar">
<div>
<p class="font-semibold text-indigo-700 dark:text-purple-300 text-sm">Mark P.</p>
<p class="text-gray-700 dark:text-gray-300 text-sm">"How do I integrate this with our external reporting tools?"</p>
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">1 day ago</p>
</div>
</div>
</div>
</div>
</div>
<!-- Sidebar / Related Content Section -->
<div class="lg:col-span-1 p-6 rounded-3xl bg-blue-100 dark:bg-gray-850 shadow-neumorphic-light dark:shadow-neumorphic-dark transition-all duration-300">
<h4 class="text-lg sm:text-xl font-bold text-indigo-800 dark:text-purple-300 mb-4">Related Content</h4>
<div class="space-y-6">
<!-- Related Item 1 -->
<div class="group flex flex-col sm:flex-row items-start sm:items-center space-y-3 sm:space-y-0 sm:space-x-4 p-4 rounded-2xl bg-blue-150 dark:bg-gray-800 shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm hover:shadow-neumorphic-pressed-light dark:hover:shadow-neumorphic-pressed-dark cursor-pointer transition-all duration-200">
<img class="flex-shrink-0 w-28 h-16 sm:w-24 sm:h-16 rounded-lg object-cover shadow-inset-neumorphic-light dark:shadow-inset-neumorphic-dark transform group-hover:scale-105 transition-transform duration-200" src="https://picsum.photos/id/1018/300/200" alt="Thumbnail">
<div>
<p class="font-semibold text-indigo-700 dark:text-purple-300 text-base mb-1 group-hover:text-pink-600 dark:group-hover:text-amber-400">Advanced CRM Analytics</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Unlock deeper customer insights with advanced reporting features.</p>
</div>
</div>
<!-- Related Item 2 -->
<div class="group flex flex-col sm:flex-row items-start sm:items-center space-y-3 sm:space-y-0 sm:space-x-4 p-4 rounded-2xl bg-blue-150 dark:bg-gray-800 shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm hover:shadow-neumorphic-pressed-light dark:hover:shadow-neumorphic-pressed-dark cursor-pointer transition-all duration-200">
<img class="flex-shrink-0 w-28 h-16 sm:w-24 sm:h-16 rounded-lg object-cover shadow-inset-neumorphic-light dark:shadow-inset-neumorphic-dark transform group-hover:scale-105 transition-transform duration-200" src="https://picsum.photos/id/1025/300/200" alt="Thumbnail">
<div>
<p class="font-semibold text-indigo-700 dark:text-purple-300 text-base mb-1 group-hover:text-pink-600 dark:group-hover:text-amber-400">Integrate with Marketing Automation</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Seamlessly connect your CRM with popular marketing platforms.</p>
</div>
</div>
<!-- Related Item 3 -->
<div class="group flex flex-col sm:flex-row items-start sm:items-center space-y-3 sm:space-y-0 sm:space-x-4 p-4 rounded-2xl bg-blue-150 dark:bg-gray-800 shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm hover:shadow-neumorphic-pressed-light dark:hover:shadow-neumorphic-pressed-dark cursor-pointer transition-all duration-200">
<img class="flex-shrink-0 w-28 h-16 sm:w-24 sm:h-16 rounded-lg object-cover shadow-inset-neumorphic-light dark:shadow-inset-neumorphic-dark transform group-hover:scale-105 transition-transform duration-200" src="https://picsum.photos/id/1069/300/200" alt="Thumbnail">
<div>
<p class="font-semibold text-indigo-700 dark:text-purple-300 text-base mb-1 group-hover:text-pink-600 dark:group-hover:text-amber-400">Sales Workflow Optimization</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Streamline your sales process for maximum efficiency.</p>
</div>
</div>
<button class="w-full mt-6 py-3 px-6 rounded-full bg-gradient-to-r from-violet-500 to-fuchsia-500 text-white font-semibold text-lg shadow-neumorphic-vibrant dark:shadow-neumorphic-vibrant-dark hover:from-violet-600 hover:to-fuchsia-600 transform hover:scale-105 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-fuchsia-500 focus:ring-offset-2 focus:ring-offset-blue-100 dark:focus:ring-offset-gray-850">
Explore More Topics
</button>
</div>
</div>
</div>
<style>
/* Neumorphic Shadows (light mode) */
.shadow-neumorphic-light {
box-shadow: 10px 10px 20px #a3b1c6, -10px -10px 20px #ffffff;
}
.shadow-neumorphic-light-sm {
box-shadow: 5px 5px 10px #a3b1c6, -5px -5px 10px #ffffff;
}
.shadow-neumorphic-pressed-light {
box-shadow: inset 5px 5px 10px #a3b1c6, inset -5px -5px 10px #ffffff;
}
.shadow-inset-neumorphic-light {
box-shadow: inset 7px 7px 14px #a3b1c6, inset -7px -7px 14px #ffffff;
}
/* Neumorphic Shadows (dark mode) */
.dark .shadow-neumorphic-dark {
box-shadow: 10px 10px 20px #1a1a1a, -10px -10px 20px #3a3a3a;
}
.dark .shadow-neumorphic-dark-sm {
box-shadow: 5px 5px 10px #1a1a1a, -5px -5px 10px #3a3a3a;
}
.dark .shadow-neumorphic-pressed-dark {
box-shadow: inset 5px 5px 10px #0e0e0e, inset -5px -5px 10px #4d4d4d;
}
.dark .shadow-inset-neumorphic-dark {
box-shadow: inset 7px 7px 14px #0e0e0e, inset -7px -7px 14px #4d4d4d;
}
/* Vibrant neumorphic button shadow */
.shadow-neumorphic-vibrant {
box-shadow: 10px 10px 20px rgba(139, 92, 246, 0.4), -10px -10px 20px rgba(232, 107, 203, 0.4);
}
.dark .shadow-neumorphic-vibrant-dark {
box-shadow: 10px 10px 20px rgba(139, 92, 246, 0.2), -10px -10px 20px rgba(232, 107, 203, 0.2);
}
/* Custom Background Colors for Neumorphism */
.bg-blue-50 {
background-color: #e0f2f7; /* Light cyan for softer neumorphism */
}
.dark .bg-gray-850 {
background-color: #27272a; /* Slightly lighter than gray-900 */
}
.bg-blue-100 {
background-color: #e9f5f9; /* Base for light elements */
}
.dark .bg-gray-850 {
background-color: #27272a; /* Base for dark elements */
}
.bg-blue-150 {
background-color: #f0f7fb; /* Slightly lighter for inner elements */
}
.dark .bg-gray-800 {
background-color: #2c2c2f; /* Slightly lighter for inner elements in dark mode */
}
.dark .bg-gray-750 {
background-color: #3b3b3e; /* Input background */
}
.bg-blue-200 {
background-color: #cce9f5; /* For buttons and interactive elements */
}
/* Example of how to integrate this with Tailwind PostCSS setup:
@layer base {
:root {
--color-blue-50: #e0f2f7;
--color-blue-100: #e9f5f9;
--color-blue-150: #f0f7fb;
--color-blue-200: #cce9f5;
}
.dark {
--color-gray-850: #27272a;
--color-gray-750: #3b3b3e;
--color-gray-800: #2c2c2f;
}
}
@layer components {
.shadow-neumorphic-light {
box-shadow: 10px 10px 20px #a3b1c6, -10px -10px 20px #ffffff;
}
.shadow-neumorphic-dark {
box-shadow: 10px 10px 20px #1a1a1a, -10px -10px 20px #3a3a3a;
}
/* ... rest of the neumorphic shadows */
}
*/
</style>
</div>관련 구성 요소
미디어 임베드 컴포넌트
Glassmorphism 미디어는 비즈니스/기업 웹 사이트를 위한 Earth Tones를 사용한 구성 요소를 포함합니다. 간단한 레이아웃, 반응형 및 어두운 테마 지원.
미디어 임베드 컴포넌트 - 미니멀리스트 어스 톤
대시보드용 미니멀리스트 미디어 임베드 구성 요소로, 흙색을 사용하여 반응형 디자인과 어두운 테마를 지원합니다. 비디오 플레이어, 제목, 설명 및 채널 정보가 표시됩니다.