모든 구성 요소

Maps 컴포넌트

머티리얼 디자인 스타일링과 어두운 테마를 지원하는 반응형 Maps Component로, Tailwind CSS를 사용하여 제작되었습니다.

                <div class="h-screen flex flex-col bg-gray-100 dark:bg-gray-900">
  <!-- Header -->
  <header class="bg-white dark:bg-gray-800 shadow-md">
    <div class="container mx-auto px-4 py-4 flex items-center justify-between">
      <h1 class="text-xl font-semibold text-gray-800 dark:text-white">Maps</h1>
      <nav>
        <ul class="flex space-x-4">
          <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Explore</a></li>
          <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Saved</a></li>
          <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Contribute</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <!-- Main Content -->
  <main class="flex-grow container mx-auto px-[10px] py-4 grid grid-cols-1 md:grid-cols-3 gap-4">
    <!-- Map Area (Placeholder) -->
    <section class="md:col-span-2 bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
      <div class="h-[400px] bg-gray-300 dark:bg-gray-700 flex items-center justify-center text-gray-600 dark:text-gray-300">
        Map will be loaded here
      </div>
    </section>

    <!-- Sidebar/Details Area -->
    <aside class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Location Details</h2>
      <div class="space-y-4">
        <!-- Example Detail Item -->
        <div class="flex items-center space-x-3">
          <div class="flex-shrink-0 w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold">I</div>
          <p class="text-gray-700 dark:text-gray-300">Information about the location.</p>
        </div>
        <div class="flex items-center space-x-3">
          <div class="flex-shrink-0 w-10 h-10 bg-green-500 rounded-full flex items-center justify-center text-white font-bold">P</div>
          <p class="text-gray-700 dark:text-gray-300">Photos and imagery here.</p>
        </div>
        <div class="flex items-center space-x-3">
          <div class="flex-shrink-0 w-10 h-10 bg-red-500 rounded-full flex items-center justify-center text-white font-bold">R</div>
          <p class="text-gray-700 dark:text-gray-300">Reviews and ratings go here.</p>
        </div>
      </div>
    </aside>
  </main>

  <!-- Footer -->
  <footer class="bg-white dark:bg-gray-800 shadow-md mt-4">
    <div class="container mx-auto px-4 py-4 text-center text-gray-600 dark:text-gray-300">
      © 2023 Maps Component
    </div>
  </footer>
</div>

Glassmorphism 사이드바(다크 모드 포함)

glassmorphism 디자인 및 Tailwind CSS를 사용하는 다크 모드 지원이 있는 반응형 사이드바 구성 요소입니다. 여기에는 로고, 사이트 이름, 탐색 링크 및 사용자 프로필 섹션이 포함됩니다.

미리보기 열기

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900">
  <!-- Glassmorphism Sidebar -->
  <div class="flex flex-col w-64 bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg dark:backdrop-blur-lg shadow-xl dark:shadow-2xl">
    <div class="flex items-center justify-center h-16">
      <!-- Logo and Site Name -->
      <img src="https://picsum.photos/40/40" alt="Logo" class="rounded-full mr-2">
      <span class="text-gray-800 dark:text-white text-lg font-semibold">AppName</span>
    </div>
    <div class="flex flex-col flex-1 overflow-y-auto">
      <nav class="flex-1 px-2 py-4">
        <!-- Navigation Links -->
        <a href="#" class="flex items-center px-4 py-2 text-gray-600 dark:text-gray-200 hover:bg-white hover:bg-opacity-40 dark:hover:bg-gray-700 dark:hover:bg-opacity-40 rounded-md">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7m-2 2v5a1 1 0 01-1 1H9m2-13V9a1 1 0 011-1h2a1 1 0 011 1v3m-7 7h7"></path>
          </svg>
          Dashboard
        </a>
        <a href="#" class="flex items-center px-4 py-2 mt-2 text-gray-600 dark:text-gray-200 hover:bg-white hover:bg-opacity-40 dark:hover:bg-gray-700 dark:hover:bg-opacity-40 rounded-md">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M12 20.646A17.938 17.938 0 015 10H4c0 2.761 3.582 5 8 5s8-2.239 8-5h-1c-7.033 0-10.95.51-11.297 1.702l-.155.595A1.99 1.99 0 015 15l-.155.595A1.99 1.99 0 008 19.646z"></path>
          </svg>
          Users
        </a>
        <a href="#" class="flex items-center px-4 py-2 mt-2 text-gray-600 dark:text-gray-200 hover:bg-white hover:bg-opacity-40 dark:hover:bg-gray-700 dark:hover:bg-opacity-40 rounded-md">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2m14 0V9a2 2 0 00-2-2H7a2 2 0 00-2 2v2m7 7v-4"></path>
          </svg>
          Products
        </a>
        <a href="#" class="flex items-center px-4 py-2 mt-2 text-gray-600 dark:text-gray-200 hover:bg-white hover:bg-opacity-40 dark:hover:bg-gray-700 dark:hover:bg-opacity-40 rounded-md">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c1.03-.523 2.175-.956 3.402-.956C15.463 3.361 17.5 5.252 17.5 7.5c0 2.249-2.037 4.138-4.275 4.138C11.215 11.638 10 10.457 10 8.952c0-1.486 1.184-2.652 2.618-2.652a4.06 4.06 0 013.162 1.4zM2.875 18.25h-.32C1.918 18.25 2 18.11 2 17.75c0-1.376 2.13-2.875 4.95-2.875 1.678 0 3.074.406 3.99-.94.791-1.223 2.093-1.844 3.455-1.844A5.42 5.42 0 0120.5 15.25c0 2.892-4.243 5.25-9.25 5.25-3.095 0-5.732-.919-7.166-2.42l-.224-.224z"></path>
          </svg>
          Settings
        </a>
      </nav>
    </div>
    <!-- User Profile Section -->
    <div class="flex items-center p-4 border-t border-gray-300 dark:border-gray-700">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full h-10 w-10 mr-3">
      <div class="flex flex-col">
        <span class="text-gray-800 dark:text-white text-sm font-semibold">John Doe</span>
        <span class="text-gray-600 dark:text-gray-400 text-sm">[email protected]</span>
      </div>
    </div>
  </div>
  <!-- Main Content (optional - for demonstration) -->
  <div class="flex flex-col flex-1 p-4 overflow-y-auto">
    <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Main Content Area</h1>
    <p class="mt-4 text-gray-700 dark:text-gray-300">This is the main content area. The sidebar is positioned to the left.</p>
  </div>
</div>

Toast Notifications 구성 요소

Tailwind CSS로 구축된 스큐어모픽 디자인 및 다크 모드 지원 기능이 있는 반응형 Toast Notification 구성 요소입니다.

미리보기 열기

                <div class="fixed bottom-5 right-5 space-y-3">
  <!-- Success Toast -->
  <div class="flex items-center p-4 bg-white border border-gray-200 rounded-lg shadow-xl dark:bg-gray-700 dark:border-gray-700">
    <div class="flex-shrink-0">
      <svg class="w-6 h-6 text-green-500" 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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
    </div>
    <div class="ml-3 text-sm font-normal text-gray-800 dark:text-gray-200">
      Successfully saved your settings.
    </div>
    <button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-700 dark:hover:bg-gray-600">
      <span class="sr-only">Close</span>
      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
    </button>
  </div>

  <!-- Error Toast -->
  <div class="flex items-center p-4 bg-white border border-gray-200 rounded-lg shadow-xl dark:bg-gray-700 dark:border-gray-700">
    <div class="flex-shrink-0">
      <svg class="w-6 h-6 text-red-500" 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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
    </div>
    <div class="ml-3 text-sm font-normal text-gray-800 dark:text-gray-200">
      Something went wrong.
    </div>
    <button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-700 dark:hover:bg-gray-600">
      <span class="sr-only">Close</span>
      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
    </button>
  </div>

  <!-- Warning Toast -->
  <div class="flex items-center p-4 bg-white border border-gray-200 rounded-lg shadow-xl dark:bg-gray-700 dark:border-gray-700">
    <div class="flex-shrink-0">
      <svg class="w-6 h-6 text-yellow-500" 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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
    </div>
    <div class="ml-3 text-sm font-normal text-gray-800 dark:text-gray-200">
      Proceed with caution.
    </div>
    <button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-700 dark:hover:bg-gray-600">
      <span class="sr-only">Close</span>
      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
    </button>
  </div>
</div>

레트로 소셜 공유 버튼

레트로/빈티지 디자인, 반응형 효과 및 Tailwind CSS를 사용하는 어두운 테마 지원이 있는 소셜 공유 버튼 구성 요소, JavaScript가 필요하지 않습니다.

미리보기 열기

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900" style="font-family: 'Press Start 2P', cursive;">
  <div class="flex space-x-4 p-6 bg-white dark:bg-gray-800 rounded-lg shadow-retro">
    <a href="#" class="share-button facebook">
      <img src="https://img.icons8.com/fluent/48/000000/facebook-new.png" alt="Facebook" class="w-8 h-8">
    </a>
    <a href="#" class="share-button twitter">
      <img src="https://img.icons8.com/fluent/48/000000/twitter.png" alt="Twitter" class="w-8 h-8">
    </a>
    <a href="#" class="share-button instagram">
      <img src="https://img.icons8.com/fluent/48/000000/instagram.png" alt="Instagram" class="w-8 h-8">
    </a>
    <a href="#" class="share-button pinterest">
      <img src="https://img.icons8.com/fluent/48/000000/pinterest.png" alt="Pinterest" class="w-8 h-8">
    </a>
  </div>

  <style>
    @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

    .shadow-retro {
        box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.2);
    }

    .dark .shadow-retro {
        box-shadow: 8px 8px 0px rgba(255, 255, 255, 0.2);
    }

    .share-button {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0.75rem;
      border-radius: 0.5rem;
      transition: all 0.3s ease;
      border: 2px solid #000;
    }

     .dark .share-button {
        border: 2px solid #fff;
     }

    .share-button:hover {
      transform: translateY(-5px);
      box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.3);
    }

    .dark .share-button:hover {
        box-shadow: 4px 4px 0px rgba(255, 255, 255, 0.3);
    }

    .facebook {
      background-color: #4267B2;
    }
    .twitter {
      background-color: #1DA1F2;
    }
    .instagram {
      background-color: #E1306C;
    }
    .pinterest {
      background-color: #BD081C;
    }
  </style>
</div>

Progress Bar 구성 요소

최신 웹 애플리케이션에 적합한 Tailwind CSS를 사용하여 다크 모드용으로 설계된 반응형 진행률 표시줄 구성 요소입니다.

미리보기 열기

                <div class="flex items-center justify-center h-screen bg-gray-900 p-4">
    <div class="w-full max-w-md">
        <h2 class="text-white text-lg font-semibold mb-2">Upload Progress</h2>
        <div class="relative bg-gray-700 rounded-full h-4">
            <div class="bg-green-500 rounded-full h-full" style="width: 60%;"></div>
        </div>
        <div class="flex justify-between text-xs text-gray-400 mt-1">
            <span>0%</span>
            <span>60%</span>
            <span>100%</span>
        </div>
    </div>
</div>

Success Messages 구성 요소

성공 메시지 구성 요소: Neumorphism 디자인, 반응형 및 어두운 테마 지원

미리보기 열기

                <div class="flex items-center justify-center h-screen dark:bg-gray-900">
  <div class="bg-gray-200 p-6 rounded-xl shadow-xl s Neumorphism dark:bg-gray-800">
    <div class="text-green-500 text-2xl mb-4">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
    </div>
    <h3 class="text-xl font-semibold mb-2 dark:text-white">Success!</h3>
    <p class="text-gray-600 dark:text-gray-300">Your action was performed successfully.</p>
  </div>
</div>

로그인/가입 구성 요소

Tailwind CSS를 사용하여 다크 모드를 위해 설계된 반응형 로그인/가입 구성 요소입니다.

미리보기 열기

                <div class="min-h-screen flex items-center justify-center bg-gray-900 p-6">
    <div class="bg-gray-800 rounded-lg shadow-lg p-8 max-w-sm w-full">
        <h2 class="text-2xl text-white text-center mb-6">Welcome</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-300 mb-2" for="email">Email</label>
                <input class="w-full p-3 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-blue-500" type="email" id="email" placeholder="Enter your email" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-300 mb-2" for="password">Password</label>
                <input class="w-full p-3 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-blue-500" type="password" id="password" placeholder="Enter your password" required>
            </div>
            <button class="w-full bg-blue-600 text-white p-3 rounded hover:bg-blue-500 transition duration-300" type="submit">Login</button>
        </form>
        <div class="text-center text-gray-400 mt-4">
            <p>Don't have an account? <a href="#" class="text-blue-400">Sign up</a></p>
        </div>
    </div>
    <div class="bg-gray-800 rounded-lg shadow-lg p-8 max-w-sm w-full mt-8">
        <h2 class="text-2xl text-white text-center mb-6">Sign Up</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-300 mb-2" for="name">Name</label>
                <input class="w-full p-3 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-blue-500" type="text" id="name" placeholder="Enter your name" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-300 mb-2" for="email-signup">Email</label>
                <input class="w-full p-3 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-blue-500" type="email" id="email-signup" placeholder="Enter your email" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-300 mb-2" for="password-signup">Password</label>
                <input class="w-full p-3 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-blue-500" type="password" id="password-signup" placeholder="Create a password" required>
            </div>
            <button class="w-full bg-blue-600 text-white p-3 rounded hover:bg-blue-500 transition duration-300" type="submit">Sign Up</button>
        </form>
    </div>
</div>

스큐어모픽 반응 버튼

스큐어모픽 디자인 스타일의 좋아요 및 반응 버튼 세트로, 반응형 레이아웃과 다크 모드를 지원합니다. 버튼은 JavaScript 없이 HTML 및 Tailwind CSS로만 구현됩니다. 다크 모드는 CSS 클래스를 통해 처리됩니다. 자리 표시자 이미지는 아바타에 사용됩니다.

미리보기 열기

                 <style>
      .skeuomorphic {
        background-color: #e0e0e0;
        box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
        border-radius: 10px;
        padding: 10px;
      }

      .skeuomorphic:active {
        box-shadow: inset 7px 7px 15px #bebebe, inset -7px -7px 15px #ffffff;
      }

      .dark .skeuomorphic {
        background-color: #333;
        box-shadow: 7px 7px 15px #222, -7px -7px 15px #444;
      }

      .dark .skeuomorphic:active {
        box-shadow: inset 7px 7px 15px #222, inset -7px -7px 15px #444;
      }
    </style>
    <div class="flex justify-center items-center space-x-4 p-6 bg-gray-100 dark:bg-black">
      <div class="flex space-x-4 skeuomorphic dark:skeuomorphic">
        <button class="flex items-center space-x-1 p-2 skeuomorphic dark:skeuomorphic">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-6 w-6 text-gray-500 dark:text-gray-300"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21c-.64-.149-1.28-.293-1.92-.434L13 18H4a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v4zm-2 0h2"
            ></path>
          </svg>
          <span class="text-gray-700 dark:text-gray-300">Like</span>
        </button>

        <button class="flex items-center space-x-1 p-2 skeuomorphic dark:skeuomorphic">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-6 w-6 text-gray-500 dark:text-gray-300"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
            ></path>
          </svg>
          <span class="text-gray-700 dark:text-gray-300">Love</span>
        </button>

        <button class="flex items-center space-x-1 p-2 skeuomorphic dark:skeuomorphic">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-6 w-6 text-gray-500 dark:text-gray-300"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M14.828 14.828a4 4 0 01-5.656 0M9 21v-6a2 2 0 012-2h2a2 2 0 012 2v6m-6 0h6"
            ></path>
          </svg>
          <span class="text-gray-700 dark:text-gray-300">Haha</span>
        </button>

        <button class="flex items-center space-x-1 p-2 skeuomorphic dark:skeuomorphic">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-6 w-6 text-gray-500 dark:text-gray-300"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
            ></path>
          </svg>
          <span class="text-gray-700 dark:text-gray-300">Wow</span>
        </button>

        <button class="flex items-center space-x-1 p-2 skeuomorphic dark:skeuomorphic">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-6 w-6 text-gray-500 dark:text-gray-300"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
            ></path>
          </svg>
          <span class="text-gray-700 dark:text-gray-300">Sad</span>
        </button>

        <button class="flex items-center space-x-1 p-2 skeuomorphic dark:skeuomorphic">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-6 w-6 text-gray-500 dark:text-gray-300"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
            ></path>
          </svg>
          <span class="text-gray-700 dark:text-gray-300">Angry</span>
        </button>
      </div>
    </div>

Social Share Buttons 구성 요소

glassmorphism 효과로 스타일링된 반응형 소셜 공유 버튼 구성 요소로, 밝은 테마와 어두운 테마를 모두 지원합니다.

미리보기 열기

                <div class="flex justify-center items-center p-6 bg-white dark:bg-gray-800 rounded-xl shadow-lg backdrop-blur-lg bg-opacity-30 border border-gray-300 dark:border-gray-600">
    <a href="https://facebook.com" class="flex items-center justify-center h-12 w-12 mx-2 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/40/40?random=1" alt="Facebook" class="rounded-full">
    </a>
    <a href="https://twitter.com" class="flex items-center justify-center h-12 w-12 mx-2 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/40/40?random=2" alt="Twitter" class="rounded-full">
    </a>
    <a href="https://linkedin.com" class="flex items-center justify-center h-12 w-12 mx-2 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/40/40?random=3" alt="LinkedIn" class="rounded-full">
    </a>
    <a href="https://instagram.com" class="flex items-center justify-center h-12 w-12 mx-2 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/40/40?random=4" alt="Instagram" class="rounded-full">
    </a>
</div>

<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1F2937;
        }
    }
</style>

등급 시스템 구성 요소

Neumorphism 스타일, 반응형 효과 및 어두운 테마를 지원하는 등급 시스템 구성 요소.

미리보기 열기

                <div class='flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4'><div class='w-full max-w-md bg-white dark:bg-gray-800 rounded-xl shadow-neumorphism dark:shadow-neumorphism-dark p-6 space-y-6'><h2 class='text-2xl font-bold text-center text-gray-800 dark:text-white'>Rate our service</h2><div class='flex items-center justify-center space-x-4'><button class='text-gray-500 dark:text-gray-400 hover:text-yellow-500 dark:hover:text-yellow-500 transition-colors duration-200'><svg class='w-8 h-8 fill-current' viewBox='0 0 24 24'><path d='M12 .288l3.674 7.556 8.326 1.153-6.001 5.835 1.416 8.284L12 18.288l-7.415 3.238 1.416-8.284-6.001-5.835 8.326-1.153z'/></svg></button><button class='text-gray-500 dark:text-gray-400 hover:text-yellow-500 dark:hover:text-yellow-500 transition-colors duration-200'><svg class='w-8 h-8 fill-current' viewBox='0 0 24 24'><path d='M12 .288l3.674 7.556 8.326 1.153-6.001 5.835 1.416 8.284L12 18.288l-7.415 3.238 1.416-8.284-6.001-5.835 8.326-1.153z'/></svg></button><button class='text-gray-500 dark:text-gray-400 hover:text-yellow-500 dark:hover:text-yellow-500 transition-colors duration-200'><svg class='w-8 h-8 fill-current' viewBox='0 0 24 24'><path d='M12 .288l3.674 7.556 8.326 1.153-6.001 5.835 1.416 8.284L12 18.288l-7.415 3.238 1.416-8.284-6.001-5.835 8.326-1.153z'/></svg></button><button class='text-gray-500 dark:text-gray-400 hover:text-yellow-500 dark:hover:text-yellow-500 transition-colors duration-200'><svg class='w-8 h-8 fill-current' viewBox='0 0 24 24'><path d='M12 .288l3.674 7.556 8.326 1.153-6.001 5.835 1.416 8.284L12 18.288l-7.415 3.238 1.416-8.284-6.001-5.835 8.326-1.153z'/></svg></button><button class='text-gray-500 dark:text-gray-400 hover:text-yellow-500 dark:hover:text-yellow-500 transition-colors duration-200'><svg class='w-8 h-8 fill-current' viewBox='0 0 24 24'><path d='M12 .288l3.674 7.556 8.326 1.153-6.001 5.835 1.416 8.284L12 18.288l-7.415 3.238 1.416-8.284-6.001-5.835 8.326-1.153z'/></svg></button></div></div></div><style>.shadow-neumorphism { box-shadow: 7px 7px 15px #c7c7c7, -7px -7px 15px #ffffff; }.dark .shadow-neumorphism-dark { box-shadow: 7px 7px 15px #333, -7px -7px 15px #555; }</style>

카테고리