구성 요소 미디어 임베드 Neumorphism Media Embed 구성 요소

Neumorphism Media Embed 구성 요소

비즈니스 웹사이트를 위한 뉴모픽 미디어 임베드 컴포넌트로, 반응형 디자인과 보색을 사용한 어두운 테마를 지원합니다.

미리 보기

HTML 코드

<div class="flex justify-center items-center min-h-screen bg-gray-200 dark:bg-gray-900 p-10">
  <div class="neumorphic-card bg-gray-300 dark:bg-gray-800 p-8 rounded-xl w-full max-w-4xl">
    <div class="flex flex-col md:flex-row space-y-8 md:space-y-0 md:space-x-8">
      <!-- Media Embed -->
      <div class="flex-1 neumorphic-inset p-4 rounded-lg overflow-hidden">
        <iframe class="w-full aspect-video rounded-lg" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-screen" allowfullscreen></iframe>
      </div>
      <!-- Content Area -->
      <div class="flex-1 flex flex-col justify-between">
        <div>
          <h3 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Media Title</h3>
          <p class="text-gray-700 dark:text-gray-300 mb-6">This is a description of the media content. It provides context and details about the video or audio being embedded. The design uses subtle shadows and highlights to create the neumorphic effect, visually pushing the content forward.</p>
        </div>
        <div class="flex items-center mt-4">
          <img class="w-12 h-12 rounded-full mr-4 neumorphic-avatar" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Author Avatar">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-200">Author Name</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">Date Published</p>
          </div>
        </div>
        <div class="mt-6 flex space-x-4">
          <button class="neumorphic-button text-gray-800 dark:text-gray-200 font-semibold py-2 px-6 rounded-full hover:scale-105 transition duration-200">Learn More</button>
          <button class="neumorphic-button text-gray-800 dark:text-gray-200 font-semibold py-2 px-6 rounded-full hover:scale-105 transition duration-200">Share</button>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
.neumorphic-card {
  box-shadow: 9px 9px 16px rgb(163,177,198,.6), -9px -9px 16px rgba(255,255,255, .5);
}
.dark .neumorphic-card {
  box-shadow: 9px 9px 16px rgb(0,0,0,.6), -9px -9px 16px rgba(30,30,30, .5);
}

.neumorphic-inset {
  box-shadow: inset 5px 5px 12px rgb(163,177,198,.6), inset -5px -5px 12px rgba(255,255,255, .5);
}
.dark .neumorphic-inset {
   box-shadow: inset 5px 5px 12px rgb(0,0,0,.6), inset -5px -5px 12px rgba(30,30,30, .5);
}

.neumorphic-avatar {
    box-shadow: 3px 3px 7px rgb(163,177,198,.6), -3px -3px 7px rgba(255,255,255, .5);
}
.dark .neumorphic-avatar {
    box-shadow: 3px 3px 7px rgb(0,0,0,.6), -3px -3px 7px rgba(30,30,30, .5);
}

.neumorphic-button {
    box-shadow: 5px 5px 10px rgb(163,177,198,.6), -5px -5px 10px rgba(255,255,255, .5);
    transition: all 0.2s ease-in-out;
}

.neumorphic-button:not(:active):hover {
    box-shadow: 7px 7px 14px rgb(163,177,198,.7), -7px -7px 14px rgba(255,255,255, .6);
}

.dark .neumorphic-button {
    box-shadow: 5px 5px 10px rgb(0,0,0,.6), -5px -5px 10px rgba(30,30,30, .5);
}

.dark .neumorphic-button:not(:active):hover {
    box-shadow: 7px 7px 14px rgb(0,0,0,.7), -7px -7px 14px rgba(30,30,30, .6);
}

.neumorphic-button:active {
    box-shadow: inset 3px 3px 7px rgb(163,177,198,.6), inset -3px -3px 7px rgba(255,255,255, .5);
}

.dark .neumorphic-button:active {
    box-shadow: inset 3px 3px 7px rgb(0,0,0,.6), inset -3px -3px 7px rgba(30,30,30, .5);
}
</style>

관련 구성 요소

레트로 미디어 임베드 컴포넌트

레트로/빈티지 미디어 임베드 구성 요소는 트라이어딕 색 구성표와 반응형 어두운 테마를 지원하는 비즈니스/기업 웹사이트를 위한 구성 요소입니다.

열다

미디어 임베드 컴포넌트

어스 톤 색상을 사용하고 전자 상거래에 적합하며 어두운 테마를 지원하는 스큐어모픽 방식으로 스타일링된 반응형 미디어 임베드 구성 요소입니다.

열다

미디어 임베드 컴포넌트

Glassmorphism 스타일로 디자인된 반응형 미디어 임베드 컴포넌트로, 콘텐츠 소비를 위한 인터랙티브 요소를 갖추고 있습니다.

열다