모든 구성 요소

Hamburger Menu 컴포넌트

스큐어모픽 햄버거 메뉴 구성 요소는 파스텔 색 구성표와 미니멀한 디자인의 대시보드를 위한 것입니다.

                <div class="flex items-center justify-between p-4 bg-pastel-light dark:bg-pastel-dark rounded-lg shadow-lg">
    <div class="flex items-center">
        <img src="https://picsum.photos/40" alt="Logo" class="rounded-full mr-2">
        <h1 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Dashboard</h1>
    </div>
    <button class="flex items-center p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
        <div class="hamburger"> 
            <div class="w-6 h-1 bg-gray-800 dark:bg-gray-200 mb-1"></div>
            <div class="w-6 h-1 bg-gray-800 dark:bg-gray-200 mb-1"></div>
            <div class="w-6 h-1 bg-gray-800 dark:bg-gray-200"></div>
        </div>
    </button>
</div>

<div class="hidden lg:block bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg mt-2">
    <ul class="space-y-2">
        <li class="flex items-center p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full h-8 w-8 mr-2">
            <span class="text-gray-800 dark:text-gray-200">User Profile</span>
        </li>
        <li class="flex items-center p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="rounded-full h-8 w-8 mr-2">
            <span class="text-gray-800 dark:text-gray-200">Settings</span>
        </li>
        <li class="flex items-center p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="rounded-full h-8 w-8 mr-2">
            <span class="text-gray-800 dark:text-gray-200">Logout</span>
        </li>
    </ul>
</div>

<style>
.hamburger {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
</style>

OAuth 버튼 구성 요소

포트폴리오용으로 설계된 뉴모피즘으로 스타일이 지정된 OAuth 인증 버튼용 웹 구성 요소로, 어두운 테마를 지원하는 반응형 레이아웃이 포함되어 있습니다.

미리보기 열기

                <div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <div class="p-6 bg-white rounded-xl shadow-lg dark:bg-gray-800 dark:shadow-gray-700">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Connect with Us</h2>
        <div class="flex flex-col space-y-4">
            <a href="#" class="flex items-center justify-center p-4 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-lg transition-transform transform hover:scale-105">
                <img src="https://picsum.photos/30?blur=1" alt="Google Logo" class="mr-3 rounded-full">
                <span class="text-gray-700 dark:text-white">Sign in with Google</span>
            </a>
            <a href="#" class="flex items-center justify-center p-4 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-lg transition-transform transform hover:scale-105">
                <img src="https://picsum.photos/30?blur=1" alt="Facebook Logo" class="mr-3 rounded-full">
                <span class="text-gray-700 dark:text-white">Sign in with Facebook</span>
            </a>
            <a href="#" class="flex items-center justify-center p-4 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-lg transition-transform transform hover:scale-105">
                <img src="https://picsum.photos/30?blur=1" alt="GitHub Logo" class="mr-3 rounded-full">
                <span class="text-gray-700 dark:text-white">Sign in with GitHub</span>
            </a>
        </div>
    </div>
</div>

인포그래픽 구성 요소

3D 디자인 요소와 블로그/콘텐츠 사용을 위한 유사한 색 구성표가 있는 간단하고 반응이 빠른 인포그래픽 구성 요소입니다. 여기에는 Tailwind CSS를 사용하는 어두운 테마 지원이 포함됩니다.

미리보기 열기

                <div class="container mx-auto p-6 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100">
  <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
    <div class="relative bg-white dark:bg-gray-700 rounded-lg shadow-lg p-6 transform transition duration-500 hover:scale-105">
      <div class="absolute inset-0 bg-gradient-to-br from-purple-400 to-pink-500 opacity-75 rounded-lg" style="transform: translateZ(-20px);"></div>
      <div class="relative z-10">
        <h2 class="text-2xl font-bold mb-4">Key Statistic 1</h2>
        <p class="text-gray-700 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>

    <div class="relative bg-white dark:bg-gray-700 rounded-lg shadow-lg p-6 transform transition duration-500 hover:scale-105">
      <div class="absolute inset-0 bg-gradient-to-br from-blue-400 to-green-500 opacity-75 rounded-lg" style="transform: translateZ(-20px);"></div>
      <div class="relative z-10">
        <h2 class="text-2xl font-bold mb-4">Key Statistic 2</h2>
        <p class="text-gray-700 dark:text-gray-300">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </div>
  </div>

  <div class="mt-8 relative bg-white dark:bg-gray-700 rounded-lg shadow-lg p-6 transform transition duration-500 hover:scale-105">
    <div class="absolute inset-0 bg-gradient-to-br from-yellow-400 to-red-500 opacity-75 rounded-lg" style="transform: translateZ(-20px);"></div>
    <div class="relative z-10">
      <h2 class="text-2xl font-bold mb-4">Key Finding</h2>
      <p class="text-gray-700 dark:text-gray-300">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    </div>
  </div>
</div>

레트로 오디오 플레이어

레트로/빈티지 디자인, 파스텔 색 구성표, 복잡한 복잡성, 소셜 미디어 목적, 반응형, 어두운 테마 지원, Tailwind CSS가 있는 HTML 전용 오디오 플레이어 구성 요소

미리보기 열기

                <div class="bg-gradient-to-br from-purple-200 via-pink-200 to-yellow-100 dark:from-purple-800 dark:via-pink-800 dark:to-yellow-700 p-6 rounded-lg shadow-xl max-w-sm mx-auto font-mono">
  <div class="flex justify-between items-center mb-4">
    <div class="text-gray-700 dark:text-gray-300 text-sm">NOW PLAYING</div>
    <div class="text-gray-700 dark:text-gray-300 text-sm">03:45</div>
  </div>
  <div class="flex items-center mb-6">
    <img class="w-16 h-16 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Album Art">
    <div>
      <h3 class="text-lg font-bold text-gray-800 dark:text-white">Synthwave Nights</h3>
      <p class="text-gray-600 dark:text-gray-400">Neon Rider</p>
    </div>
  </div>
  <div class="relative mb-4">
    <div class="h-2 bg-purple-300 dark:bg-purple-600 rounded-full"></div>
    <div class="absolute top-0 left-0 h-2 bg-purple-600 dark:bg-purple-300 rounded-full w-3/4"></div>
    <div class="absolute -top-1 left-3/4 w-4 h-4 bg-purple-800 dark:bg-purple-100 rounded-full shadow"></div>
  </div>
  <div class="flex justify-center items-center space-x-6">
    <button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white focus:outline-none">
      <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
    </button>
    <button class="bg-purple-500 dark:bg-purple-400 text-white dark:text-gray-800 rounded-full p-3 shadow-lg hover:bg-purple-600 dark:hover:bg-purple-300 focus:outline-none">
      <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197 2.132A1 1 0 0010 13.803V9.197a1 1 0 001.555-.832l3.197 2.132a1 1 0 010 1.664z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
    </button>
    <button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white focus:outline-none">
      <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
    </button>
  </div>
  <div class="flex justify-center items-center mt-4 space-x-4 text-gray-700 dark:text-gray-300 text-sm">
    <div><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg></div>
    <div><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.295 10C9.501 6.619 13.305 4 18 4s8.499 2.619 9.705 6M16 18V9m-5 5v4m9-4v4"></path></svg></div>
    <div><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6a2 2 0 00-2-2H5a2 2 0 00-2 2v13a2 2 0 002 2h2a2 2 0 002-2zm7 0V6a2 2 0 00-2-2h-2a2 2 0 00-2 2v13a2 2 0 002 2h2a2 2 0 002-2z"></path></svg></div>
  </div>
</div>

컨테이너 구성 요소

Tailwind CSS를 사용하여 마이크로 인터랙션 및 어두운 테마 지원을 제공하는 블로그/콘텐츠 소비를 위한 간단한 반응형 컨테이너 구성 요소입니다.

미리보기 열기

                <div class="container mx-auto p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg transition-all duration-300 ease-in-out hover:shadow-xl">
    <div class="flex flex-col items-center">
        <img src="https://picsum.photos/400/200" alt="Blog Image" class="w-full h-48 object-cover rounded-md transition-transform duration-300 ease-in-out hover:scale-105">
        <h2 class="mt-4 text-2xl font-semibold text-gray-800 dark:text-white transition-colors duration-300">Blog Title</h2>
        <p class="mt-2 text-gray-600 dark:text-gray-400 text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
        <div class="flex items-center mt-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600">
            <div class="ml-2">
                <p class="text-gray-800 dark:text-white font-semibold">Author Name</p>
                <p class="text-gray-500 dark:text-gray-400 text-sm">Date Published</p>
            </div>
        </div>
    </div>
</div>

Toast Notifications 구성 요소

Glassmorphism으로 설계된 반응형 Toast Notifications 구성 요소로, 단색 색 구성표, 다크 모드 지원을 특징으로 하며 포트폴리오에서 사용할 준비가 되어 있습니다.

미리보기 열기

                <div class="fixed bottom-5 right-5 space-y-4 z-50">
    <!-- Toast Notification 1 -->
    <div class="bg-white/30 backdrop-blur-md border border-white/20 rounded-lg shadow-lg p-4 transition-all duration-300 dark:bg-gray-800/30 dark:border-gray-700/20">
        <div class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full" />
            <div class="flex-1">
                <h2 class="text-gray-900 dark:text-gray-100 font-semibold">New Project Alert</h2>
                <p class="text-gray-700 dark:text-gray-300">You have successfully created a new project!</p>
                <span class="text-sm text-gray-500 dark:text-gray-400">Just now</span>
            </div>
            <button class="text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
            </button>
        </div>
    </div>
    <!-- Toast Notification 2 -->
    <div class="bg-white/30 backdrop-blur-md border border-white/20 rounded-lg shadow-lg p-4 transition-all duration-300 dark:bg-gray-800/30 dark:border-gray-700/20">
        <div class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-10 h-10 rounded-full" />
            <div class="flex-1">
                <h2 class="text-gray-900 dark:text-gray-100 font-semibold">Portfolio Updated</h2>
                <p class="text-gray-700 dark:text-gray-300">Your portfolio has been successfully updated!</p>
                <span class="text-sm text-gray-500 dark:text-gray-400">5 mins ago</span>
            </div>
            <button class="text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
            </button>
        </div>
    </div>
</div>

미디어 임베드 컴포넌트

어두운 테마 지원, 복잡한 레이아웃 및 보색 구성표를 갖춘 반응형 미디어 임베드 구성 요소로, 대시보드용으로 설계되었습니다.

미리보기 열기

                <div class="container mx-auto p-6 bg-gray-900 text-gray-200">
  <div class="flex flex-wrap -mx-4">
    <div class="w-full lg:w-2/3 px-4 mb-6 lg:mb-0">
      <div class="bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <div class="relative" style="padding-top: 56.25%;">
          <iframe class="absolute inset-0 w-full h-full" src="https://www.youtube.com/embed/your-video-id" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-screen" allowfullscreen></iframe>
        </div>
        <div class="p-6">
          <h3 class="text-xl font-semibold mb-3 text-teal-400 dark:text-teal-500">Video Title Here</h3>
          <p class="text-gray-400 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <div class="flex items-center text-gray-500 text-sm">
            <span><i class="far fa-eye mr-2"></i>1.2M Views</span>
            <span class="ml-4"><i class="far fa-comment mr-2"></i>3.5K Comments</span>
          </div>
        </div>
      </div>
    </div>
    <div class="w-full lg:w-1/3 px-4">
      <div class="bg-gray-800 rounded-lg shadow-lg p-6">
        <h4 class="text-lg font-semibold mb-4 text-orange-400 dark:text-orange-500">Related Content</h4>
        <ul>
          <li class="flex items-center mb-4">
            <img class="w-12 h-12 rounded-md mr-4" src="https://picsum.photos/id/1018/60/60" alt="Related Video Thumbnail">
            <div>
              <p class="font-semibold text-teal-400 dark:text-teal-500 leading-tight">Related Video Title</p>
              <p class="text-gray-500 text-sm">Channel Name</p>
            </div>
          </li>
          <li class="flex items-center mb-4">
            <img class="w-12 h-12 rounded-md mr-4" src="https://picsum.photos/id/1015/60/60" alt="Related Video Thumbnail">
            <div>
              <p class="font-semibold text-teal-400 dark:text-teal-500 leading-tight">Another Related Video</p>
              <p class="text-gray-500 text-sm">Another Channel</p>
            </div>
          </li>
           <li class="flex items-center">
            <img class="w-12 h-12 rounded-md mr-4" src="https://picsum.photos/id/1019/60/60" alt="Related Video Thumbnail">
            <div>
              <p class="font-semibold text-teal-400 dark:text-teal-500 leading-tight">Yet Another Video</p>
              <p class="text-gray-500 text-sm">Yet Another Channel</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

콘텐츠 링크로 건너뛰기

접근성을 위한 "Skip to Content" 링크 구성 요소로, 회색조 색 구성표가 있는 다크 모드 대시보드용으로 설계되었습니다. 반응형 및 다크 모드 스타일로 인해 적당히 복잡합니다. JavaScript는 사용되지 않습니다. 어두운 테마 지원을 위해 dark: 접두사가 있는 Tailwind CSS를 사용합니다.

미리보기 열기

                <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-0 focus:left-0 focus:z-50 focus:bg-gray-800 focus:text-white focus:p-3 focus:underline dark:focus:bg-gray-900 dark:focus:text-gray-200">Skip to Content</a>

Password Reset 구성 요소

미니멀하고 평평한 디자인의 비밀번호 재설정 구성 요소는 어스 톤, 반응형 디자인, 어두운 테마를 지원하며 블로그 콘텐츠에 맞게 조정됩니다.

미리보기 열기

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-800 p-4">
    <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-8 max-w-md w-full">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-6 text-center">Reset Password</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-4 text-center">Enter your email address to receive a link to create a new password.</p>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email Address</label>
                <input type="email" id="email" class="bg-gray-100 dark:bg-gray-700 border rounded-lg w-full h-12 px-4 focus:outline-none focus:ring focus:ring-green-300" required>
            </div>
            <button type="submit" class="w-full bg-green-500 hover:bg-green-400 text-white font-bold py-2 rounded-lg transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-green-300">Send Reset Link</button>
        </form>
        <div class="mt-6 text-center">
            <p class="text-gray-600 dark:text-gray-400">Remembered your password? <a href="#" class="text-green-500 hover:underline">Login here</a></p>
        </div>
    </div>
</div>

360° 뷰어 구성 요소

머티리얼 디자인 원칙에 따라 설계된 간단한 360° 뷰어 구성 요소로, 생생한 색상과 어두운 테마 지원을 사용하여 포트폴리오 쇼케이스에 적합합니다.

미리보기 열기

                <div class="flex flex-col items-center justify-center p-5 bg-white dark:bg-gray-800 rounded-lg shadow-lg transition duration-300 ease-in-out">
  <h1 class="text-2xl font-bold text-blue-600 dark:text-blue-400 mb-4">360° Viewer Component</h1>
  <div class="relative w-full h-80 overflow-hidden rounded-lg shadow-md">
    <img src="https://picsum.photos/seed/viewer1/400/300" alt="360° View" class="w-full h-full object-cover transition-transform duration-700 ease-in-out" />
    <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 rounded-lg">
      <span class="text-white text-lg">Swipe to view</span>
    </div>
  </div>
  <p class="mt-4 text-gray-700 dark:text-gray-300">Showcase your work or products beautifully.</p>
  <div class="flex space-x-4 mt-6">
    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-lg dark:border-gray-800" />
    <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-lg dark:border-gray-800" />
    <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-lg dark:border-gray-800" />
  </div>
</div>

카테고리