CCHub Logo CCHub Tailwind Collection
구성 요소 수도 스큐어모픽 소셜 미디어 모달

스큐어모픽 소셜 미디어 모달

소셜 미디어 상호 작용을 위해 설계된 적당히 복잡하고 반응이 빠른 스큐어모픽 모달 구성 요소로, 보색 구성표와 다크 모드 지원을 특징으로 합니다.

미리 보기

HTML 코드 

<div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900 bg-opacity-50 dark:bg-black dark:bg-opacity-75">
  <div class="relative w-full max-w-lg mx-auto bg-gradient-to-br from-gray-200 to-gray-300 rounded-2xl shadow-2xl overflow-hidden dark:from-neutral-700 dark:to-neutral-900 border border-gray-400 dark:border-neutral-600
              transform perspective-1000 rotateX-3 translateZ-0 transition-all duration-300 ease-in-out
              hover:scale-105 hover:rotateX-0 hover:translateZ-10 md:hover:scale-105 group">

    <!-- Top Bezel / Highlight -->
    <div class="absolute top-0 left-0 right-0 h-4 bg-gray-300 rounded-t-2xl opacity-75 dark:bg-neutral-600 dark:opacity-50 group-hover:h-6 transition-all duration-300"></div>

    <!-- Content Area -->
    <div class="p-6 relative z-10">

      <!-- Header Bar - Mimicking a metallic or glassy top bar -->
      <div class="flex items-center justify-between pb-4 border-b border-gray-400 dark:border-neutral-600 mb-4
                  bg-gray-100/70 dark:bg-neutral-800/70 rounded-md p-3 -mx-3 -mt-3 shadow-inner-sm shadow-gray-400/50 dark:shadow-neutral-900/50">
        <h3 class="text-xl font-bold text-gray-800 dark:text-gray-100 drop-shadow-md">New Post</h3>
        <button class="p-2 rounded-full bg-red-500 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-400
                       shadow-md border border-red-400 dark:bg-red-700 dark:hover:bg-red-800 dark:border-red-600
                       text-white text-lg font-bold aspect-square w-8 h-8 flex items-center justify-center
                       transform transition-all duration-200 ease-out active:scale-95 active:shadow-inner-md active:bg-red-700 dark:active:bg-red-900">
          ✕
        </button>
      </div>

      <!-- User Profile Section -->
      <div class="flex items-center space-x-4 mb-6 relative p-3 rounded-xl bg-gray-100/50 dark:bg-neutral-800/50 shadow-inner shadow-gray-300/50 dark:shadow-neutral-900/50">
        <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar" class="w-16 h-16 rounded-full object-cover border-4 border-orange-400 dark:border-orange-600 shadow-md transform rotate-1 transition-transform duration-300 hover:rotate-6">
        <div>
          <p class="font-semibold text-gray-900 dark:text-gray-100 text-lg">Jessica Miller</p>
          <p class="text-sm text-gray-600 dark:text-gray-300 flex items-center">
            <svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-400 drop-shadow-sm" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path>
            </svg>
            Public <span class="ml-2 text-xs font-mono text-gray-400 select-none dark:text-gray-500">🔒</span>
          </p>
        </div>
      </div>

      <!-- Textarea for post content -->
      <textarea placeholder="What's on your mind?" rows="5" class="w-full p-4 mb-6 rounded-lg resize-none text-gray-800 bg-gray-100 border border-gray-300 dark:bg-neutral-800 dark:border-neutral-700 dark:text-gray-200 outline-none
                 shadow-inner-lg shadow-gray-300/50 dark:shadow-neutral-900/50
                 focus:border-blue-400 focus:ring-2 focus:ring-blue-300 dark:focus:border-blue-600 dark:focus:ring-blue-800
                 placeholder:text-gray-400 dark:placeholder:text-gray-500
                 font-sans custom-scroll-light dark:custom-scroll-dark
                 transition-all duration-300 ease-in-out"></textarea>

      <!-- Action Buttons Mimicking physical buttons -->
      <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        <button class="w-full flex items-center justify-center p-3 rounded-xl bg-gradient-to-br from-green-400 to-green-600 text-white font-semibold
                       shadow-lg shadow-green-500/50 dark:shadow-green-700/50 border border-green-500 dark:border-green-600
                       hover:scale-105 active:scale-95 transition-all duration-200 ease-out
                       transform -rotate-1 hover:rotate-0 group-hover:rotate-0
                       drop-shadow-lg text-shadow-sm
                       dark:from-green-600 dark:to-green-800 dark:hover:from-green-500 dark:hover:to-green-700">
          <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-4 4 4 4-4V5h-2l-4 4-2-2-6 6z" clip-rule="evenodd"></path></svg>
          Photo
        </button>
        <button class="w-full flex items-center justify-center p-3 rounded-xl bg-gradient-to-br from-blue-400 to-blue-600 text-white font-semibold
                       shadow-lg shadow-blue-500/50 dark:shadow-blue-700/50 border border-blue-500 dark:border-blue-600
                       hover:scale-105 active:scale-95 transition-all duration-200 ease-out
                       transform rotate-1 hover:rotate-0 group-hover:rotate-0
                       drop-shadow-lg text-shadow-sm
                       dark:from-blue-600 dark:to-blue-800 dark:hover:from-blue-500 dark:hover:to-blue-700">
          <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 012 14v.001A1 1 0 003 15h14a1 1 0 001-1v-.001a1 1 0 01-1.707-.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"></path></svg>
          Live
        </button>
        <button class="w-full flex items-center justify-center p-3 rounded-xl bg-gradient-to-br from-purple-400 to-purple-600 text-white font-semibold
                       shadow-lg shadow-purple-500/50 dark:shadow-purple-700/50 border border-purple-500 dark:border-purple-600
                       hover:scale-105 active:scale-95 transition-all duration-200 ease-out
                       transform -rotate-1 hover:rotate-0 group-hover:rotate-0
                       drop-shadow-lg text-shadow-sm
                       dark:from-purple-600 dark:to-purple-800 dark:hover:from-purple-500 dark:hover:to-purple-700">
          <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a3 3 0 00-3 3v4a5 5 0 0010 0V7a1 1 0 112 0v4a7 7 0 11-14 0V7a3 3 0 016 0v4a3 3 0 11-6 0V7a1 1 0 012 0v4a1 1 0 102 0V7a3 3 0 00-3-3z" clip-rule="evenodd"></path></svg>
          File
        </button>
        <button class="w-full flex items-center justify-center p-3 rounded-xl bg-gradient-to-br from-yellow-400 to-yellow-600 text-white font-semibold
                       shadow-lg shadow-yellow-500/50 dark:shadow-yellow-700/50 border border-yellow-500 dark:border-yellow-600
                       hover:scale-105 active:scale-95 transition-all duration-200 ease-out
                       transform rotate-1 hover:rotate-0 group-hover:rotate-0
                       drop-shadow-lg text-shadow-sm
                       dark:from-yellow-600 dark:to-yellow-800 dark:hover:from-yellow-500 dark:hover:to-yellow-700">
          <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd"></path></svg>
          Poll
        </button>
      </div>

      <!-- Post Button - Resembles a large, clickable physical button -->
      <button class="w-full py-4 text-2xl font-bold bg-gradient-to-br from-cyan-400 to-cyan-600 rounded-xl text-white
                     shadow-2xl shadow-cyan-500/60 dark:shadow-cyan-700/60 border-2 border-cyan-400 dark:border-cyan-600
                     transform transition-all duration-300 ease-out hover:scale-102 active:scale-98
                     active:shadow-inner-lg active:shadow-cyan-700/70 dark:active:shadow-cyan-900/70
                     drop-shadow-lg text-shadow-lg
                     dark:from-cyan-600 dark:to-cyan-800 dark:hover:from-cyan-500 dark:hover:to-cyan-700">
        Post Now
      </button>

    </div>

    <!-- Bottom Bezel / Shadow -->
    <div class="absolute bottom-0 left-0 right-0 h-4 bg-gray-400 rounded-b-2xl opacity-75 dark:bg-neutral-800 dark:opacity-50 group-hover:h-6 transition-all duration-300 transform translate-y-1"></div>

  </div>
</div>

<style>
/* Define text shadow */
.text-shadow-sm {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
.text-shadow-lg {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

/* Define inner shadow utility classes */
.shadow-inner {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}
.shadow-inner-sm {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}
.shadow-inner-lg {
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.3);
}
.shadow-inner-md {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
}

/* Custom scrollbar for textarea */
.custom-scroll-light::-webkit-scrollbar {
  width: 8px;
  border-radius: 4px;
}

.custom-scroll-light::-webkit-scrollbar-track {
  background: #e0e0e0;
  border-radius: 4px;
}

.custom-scroll-light::-webkit-scrollbar-thumb {
  background: #a0a0a0;
  border-radius: 4px;
  border: 2px solid #e0e0e0;
}

.custom-scroll-light::-webkit-scrollbar-thumb:hover {
  background: #808080;
}

/* Dark mode scrollbar */
.dark .custom-scroll-dark::-webkit-scrollbar {
  width: 8px;
  border-radius: 4px;
}

.dark .custom-scroll-dark::-webkit-scrollbar-track {
  background: #333333;
  border-radius: 4px;
}

.dark .custom-scroll-dark::-webkit-scrollbar-thumb {
  background: #666666;
  border-radius: 4px;
  border: 2px solid #333333;
}

.dark .custom-scroll-dark::-webkit-scrollbar-thumb:hover {
  background: #888888;
}

/* 3D transforms for skeuomorphism */
.perspective-1000 {
  transform-style: preserve-3d;
  perspective: 1000px;
}

.rotateX-3 {
  transform: rotateX(3deg);
}

@media (max-width: 768px) {
  .rotateX-3,
  .group:hover .rotateX-0,
  .group:hover .translateZ-10 {
    transform: none; /* Disable 3D transforms on small screens */
  }
  .group:hover .scale-105,
  .group:hover .scale-102 {
    transform: scale(1.02); /* Slight scale on mobile hover */
  }
}

</style>

관련 구성 요소

다크 모드 모달 컴포넌트

읽기 및 콘텐츠 소비를 위해 설계된 간단하고 반응이 빠른 다크 모드 모달 구성 요소입니다. 보색 구성표와 최소한의 레이아웃이 특징이며 블로그 또는 콘텐츠 기반 웹 사이트에 적합합니다.

열다

미시적 상호작용을 이용한 복잡한 지구적 비즈니스 모달

마이크로 인터랙션이 있는 복잡하고 반응이 빠른 흙색 모달 구성 요소로, 비즈니스 웹 사이트에 적합하며 다크 모드를 지원합니다.

열다

글래스모피즘모달컴포넌트(GlassmorphismModalComponent)

유사한 색 구성표, 중간 정도의 복잡성을 가진 Glassmorphism 스타일의 모달 구성 요소로, 블로그/콘텐츠 표시에 적합합니다. Tailwind CSS를 사용하여 어두운 테마를 지원하는 반응형 디자인이 특징입니다.

열다