경고 메시지

Alert Messages 구성 요소

전자 상거래를 위한 복잡하고 생생한 glassmorphism 스타일의 경고 메시지 구성 요소로, 다크 모드를 지원합니다.

                <div class="container mx-auto p-8">

  <!-- Light Mode - Vibrant Glassmorphism Alerts -->
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

    <!-- Success Alert -->
    <div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-white border-opacity-20">
      <div class="flex items-center">
        <div class="flex-shrink-0 text-green-600">
          <svg class="h-6 w-6" 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">
          <p class="text-green-800 font-semibold">Success!</p>
          <p class="text-green-700 text-sm mt-1">Your order has been placed successfully.</p>
        </div>
      </div>
    </div>

    <!-- Info Alert -->
    <div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-white border-opacity-20">
      <div class="flex items-center">
        <div class="flex-shrink-0 text-blue-600">
          <svg class="h-6 w-6" 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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
        </div>
        <div class="ml-3">
          <p class="text-blue-800 font-semibold">Info!</p>
          <p class="text-blue-700 text-sm mt-1">Your items are being processed.</p>
        </div>
      </div>
    </div>

    <!-- Warning Alert -->
    <div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-white border-opacity-20">
      <div class="flex items-center">
        <div class="flex-shrink-0 text-yellow-600">
          <svg class="h-6 w-6" 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 4H2.81a1.97 1.97 0 01-1.834-2.283l1.642-7.34A1.97 1.97 0 014.655 4h14.69a1.97 1.97 0 011.833 2.375l-1.642 7.34A1.97 1.97 0 0119.19 20h-4.253"></path>
          </svg>
        </div>
        <div class="ml-3">
          <p class="text-yellow-800 font-semibold">Warning!</p>
          <p class="text-yellow-700 text-sm mt-1">Payment verification is pending.</p>
        </div>
      </div>
    </div>

    <!-- Danger Alert -->
    <div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-white border-opacity-20">
      <div class="flex items-center">
        <div class="flex-shrink-0 text-red-600">
          <svg class="h-6 w-6" 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">
          <p class="text-red-800 font-semibold">Danger!</p>
          <p class="text-red-700 text-sm mt-1">There was an issue processing your payment.</p>
        </div>
      </div>
    </div>

  </div>

  <!-- Dark Mode - Vibrant Glassmorphism Alerts -->
  <div class="dark mt-8 grid grid-cols-1 md:grid-cols-2 gap-6">

    <!-- Success Alert -->
    <div class="bg-gray-800 bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-gray-700 border-opacity-20">
      <div class="flex items-center">
        <div class="flex-shrink-0 text-green-400">
          <svg class="h-6 w-6" 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">
          <p class="text-green-300 font-semibold">Success!</p>
          <p class="text-green-400 text-sm mt-1">Your order has been placed successfully.</p>
        </div>
      </div>
    </div>

    <!-- Info Alert -->
    <div class="bg-gray-800 bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-gray-700 border-opacity-20">
      <div class="flex items-center">
        <div class="flex-shrink-0 text-blue-400">
          <svg class="h-6 w-6" 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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
        </div>
        <div class="ml-3">
          <p class="text-blue-300 font-semibold">Info!</p>
          <p class="text-blue-400 text-sm mt-1">Your items are being processed.</p>
        </div>
      </div>
    </div>

    <!-- Warning Alert -->
    <div class="bg-gray-800 bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-gray-700 border-opacity-20">
      <div class="flex items-center">
        <div class="flex-shrink-0 text-yellow-400">
          <svg class="h-6 w-6" 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 4H2.81a1.97 1.97 0 01-1.834-2.283l1.642-7.34A1.97 1.97 0 014.655 4h14.69a1.97 1.97 0 011.833 2.375l-1.642 7.34A1.97 1.97 0 0119.19 20h-4.253"></path>
          </svg>
        </div>
        <div class="ml-3">
          <p class="text-yellow-300 font-semibold">Warning!</p>
          <p class="text-yellow-400 text-sm mt-1">Payment verification is pending.</p>
        </div>
      </div>
    </div>

    <!-- Danger Alert -->
    <div class="bg-gray-800 bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-gray-700 border-opacity-20">
      <div class="flex items-center">
        <div class="flex-shrink-0 text-red-400">
          <svg class="h-6 w-6" 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">
          <p class="text-red-300 font-semibold">Danger!</p>
          <p class="text-red-400 text-sm mt-1">There was an issue processing your payment.</p>
        </div>
      </div>
    </div>

  </div>


</div>

Alert Messages 구성 요소

전자 상거래 사이트를 위한 간단하고 반응이 빠른 회색조 경고 메시지 구성 요소로, 다크 모드를 지원합니다.

미리보기 열기

                <div class="flex items-center p-4 text-sm text-gray-800 border border-gray-300 rounded-lg bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600" role="alert">
  <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
    <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM10 15.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"/>
  </svg>
  <span class="sr-only">Info</span>
  <div>
    <span class="font-medium">New message:</span> Your order has been placed successfully.
  </div>
</div>

Alert Messages 구성 요소

전자 상거래를 위해 glassmorphism 효과로 설계된 반응형 경고 메시지 구성 요소입니다. 단색 색 구성표와 Tailwind CSS를 사용한 다크 모드 지원이 있는 간단한 레이아웃이 특징입니다.

미리보기 열기

                <div class="flex flex-col items-center justify-center h-screen bg-gray-900 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-700 backdrop-blur-md rounded-xl border border-gray-300 dark:border-gray-600 shadow-lg p-6 max-w-md w-full">
        <h2 class="text-xl text-gray-800 dark:text-gray-200 mb-4">Alert Message</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-4">
            Your order has been placed successfully! You will receive a confirmation email shortly.
        </p>
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="text-sm">
                <p class="text-gray-800 dark:text-gray-200">John Doe</p>
                <p class="text-gray-500 dark:text-gray-400">Just now</p>
            </div>
        </div>
        <div class="mt-4">
            <img src="https://picsum.photos/200/100?random=1" alt="Product Image" class="rounded-lg shadow-md">
        </div>
    </div>
</div>

Alert Messages 구성 요소

레트로/빈티지 그레이스케일 경고 메시지 구성 요소: 다크 모드를 지원하는 소셜 미디어용 구성 요소

미리보기 열기

                <div class="flex flex-col space-y-4 p-4 bg-gray-100 dark:bg-gray-800">

  <!-- Success Alert -->
  <div class="flex items-center justify-between p-4 bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 border border-gray-500 dark:border-gray-600 rounded shadow-md">
    <div class="flex items-center space-x-2">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 dark:text-gray-400" 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>
      <p class="text-sm font-mono">Success: Your post was published.</p>
    </div>
    <button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" 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>

  <!-- Info Alert -->
  <div class="flex items-center justify-between p-4 bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 border border-gray-500 dark:border-gray-600 rounded shadow-md">
    <div class="flex items-center space-x-2">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
      <p class="text-sm font-mono">Info: New messages available.</p>
    </div>
    <button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" 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>

  <!-- Warning Alert -->
  <div class="flex items-center justify-between p-4 bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 border border-gray-500 dark:border-gray-600 rounded shadow-md">
    <div class="flex items-center space-x-2">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 dark:text-gray-400" 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 4H21a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
      </svg>
      <p class="text-sm font-mono">Warning: Profile incomplete.</p>
    </div>
    <button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" 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>

  <!-- Danger Alert -->
  <div class="flex items-center justify-between p-4 bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 border border-gray-500 dark:border-gray-600 rounded shadow-md">
    <div class="flex items-center space-x-2">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <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" />
      </svg>
      <p class="text-sm font-mono">Error: Failed to send message.</p>
    </div>
    <button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" 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>

Alert Messages 구성 요소

마이크로 인터랙션에 중점을 둔 애니메이션, 다크 모드 지원 및 응답성이 있는 블로그를 위한 간단한 단색 경고 메시지 구성 요소입니다.

미리보기 열기

                <div class="max-w-sm mx-auto bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md overflow-hidden mt-4">
  <div class="flex items-center px-4 py-3 animate-bounce">
    <div class="flex-shrink-0">
      <svg class="h-6 w-6 text-gray-500 dark:text-gray-400" 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" />
      </svg>
    </div>
    <div class="ml-3">
      <p class="text-sm leading-5 font-medium text-gray-700 dark:text-gray-300">
        New article published!
      </p>
    </div>
  </div>
</div>

Alert Messages 구성 요소

파스텔 색상 구성표가 있는 브루탈리즘 스타일의 경고 메시지 구성 요소로, 비즈니스/기업 웹사이트용으로 설계되었으며 어두운 테마 지원으로 반응합니다.

미리보기 열기

                <div class="flex flex-col space-y-4 p-6 bg-white text-black dark:bg-gray-800 dark:text-white">
    <!-- Alert Message Header -->
    <h2 class="text-2xl font-bold">Alert Messages</h2>
    
    <!-- Alert Message Item -->
    <div class="flex items-center p-4 bg-pink-100 border-l-4 border-pink-500 dark:bg-pink-800 dark:border-pink-400">
        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <div class="flex flex-col">
            <span class="font-semibold">John Doe</span>
            <p>This is an informational alert message to notify you about updates.</p>
        </div>
    </div>
    
    <!-- Alert Message Item -->
    <div class="flex items-center p-4 bg-yellow-100 border-l-4 border-yellow-500 dark:bg-yellow-800 dark:border-yellow-400">
        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
        <div class="flex flex-col">
            <span class="font-semibold">Jane Smith</span>
            <p>This is a warning alert message to notify you about potential issues.</p>
        </div>
    </div>
    
    <!-- Alert Message Item -->
    <div class="flex items-center p-4 bg-green-100 border-l-4 border-green-500 dark:bg-green-800 dark:border-green-400">
        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
        <div class="flex flex-col">
            <span class="font-semibold">Alex Johnson</span>
            <p>This is a success alert message to confirm your action.</p>
        </div>
    </div>
</div>

Alert Messages 구성 요소

레트로/빈티지 디자인의 경고 메시지 구성 요소로, 다크 모드 및 응답성에 대한 지원을 포함합니다.

미리보기 열기

                <div class="rounded-md bg-yellow-50 p-4 dark:bg-yellow-900">
  <div class="flex">
    <div class="flex-shrink-0">
      <svg class="h-5 w-5 text-yellow-400 dark:text-yellow-300" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M8.485 2.495a.75.75 0 00-1.06 0L3.235 6.725a4.5 4.5 0 000 6.35l4.19 4.19a.75.75 0 001.06 0l4.19-4.19a4.5 4.5 0 000-6.35L9.545 2.495a.75.75 0 00-1.06 0zM9.75 9.75a.75.75 0 000 1.5h.008a.75.75 0 000-1.5H9.75z" clip-rule="evenodd" />
      </svg>
    </div>
    <div class="ml-3">
      <h3 class="text-sm font-medium text-yellow-800 dark:text-yellow-200">Attention needed</h3>
      <div class="mt-2 text-sm text-yellow-700 dark:text-yellow-300">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid ab dignissimos sint officiis. </p>
      </div>
      <div class="mt-4">
        <div class="-mx-2 -my-1 flex">
          <button type="button" class="rounded-md bg-yellow-50 px-2 py-1.5 text-sm font-medium text-yellow-800 hover:bg-yellow-100 focus:outline-none focus:ring-2 focus:ring-yellow-600 focus:ring-offset-2 dark:bg-yellow-900 dark:text-yellow-200 dark:hover:bg-yellow-800 dark:focus:ring-yellow-400 dark:focus:ring-offset-yellow-900">Take action</button>
          <button type="button" class="ml-3 rounded-md bg-yellow-50 px-2 py-1.5 text-sm font-medium text-yellow-800 hover:bg-yellow-100 focus:outline-none focus:ring-2 focus:ring-yellow-600 focus:ring-offset-2 dark:bg-yellow-900 dark:text-yellow-200 dark:hover:bg-yellow-800 dark:focus:ring-yellow-400 dark:focus:ring-offset-yellow-900">Dismiss</button>
        </div>
      </div>
    </div>
  </div>
</div>

Alert Messages 구성 요소

Tailwind CSS를 사용하여 3D 디자인, 반응형 기능 및 어두운 테마를 지원하는 Alert Messages 구성 요소입니다. 구성 요소에는 아이콘과 메시지가 있는 다양한 경고 유형(성공, 오류, 경고, 정보)이 포함됩니다.

미리보기 열기

                <div class="flex flex-col space-y-4 p-6">  <!-- Success Alert -->  <div class="relative flex items-center justify-between bg-green-500 text-white py-3 px-4 rounded-lg shadow-lg transform transition duration-300 hover:scale-105 dark:bg-green-700">    <div class="flex items-center space-x-2">      <svg class="w-6 h-6" 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>      <span class="font-semibold">Success:</span>      <span>Your action was successful.</span>    </div>    <button class="text-white hover:text-gray-200 focus:outline-none">      <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="M6 18L18 6M6 6l12 12"></path>      </svg>    </button>  </div>  <!-- Error Alert -->  <div class="relative flex items-center justify-between bg-red-500 text-white py-3 px-4 rounded-lg shadow-lg transform transition duration-300 hover:scale-105 dark:bg-red-700">    <div class="flex items-center space-x-2">      <svg class="w-6 h-6" 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>      <span class="font-semibold">Error:</span>      <span>Something went wrong.</span>    </div>    <button class="text-white hover:text-gray-200 focus:outline-none">      <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="M6 18L18 6M6 6l12 12"></path>      </svg>    </button>  </div>  <!-- Warning Alert -->  <div class="relative flex items-center justify-between bg-yellow-500 text-white py-3 px-4 rounded-lg shadow-lg transform transition duration-300 hover:scale-105 dark:bg-yellow-700">    <div class="flex items-center space-x-2">      <svg class="w-6 h-6" 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>      <span class="font-semibold">Warning:</span>      <span>Proceed with caution.</span>    </div>    <button class="text-white hover:text-gray-200 focus:outline-none">      <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="M6 18L18 6M6 6l12 12"></path>      </svg>    </button>  </div>  <!-- Info Alert -->  <div class="relative flex items-center justify-between bg-blue-500 text-white py-3 px-4 rounded-lg shadow-lg transform transition duration-300 hover:scale-105 dark:bg-blue-700">    <div class="flex items-center space-x-2">      <svg class="w-6 h-6" 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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>      </svg>      <span class="font-semibold">Info:</span>      <span>Here is some information.</span>    </div>    <button class="text-white hover:text-gray-200 focus:outline-none">      <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="M6 18L18 6M6 6l12 12"></path>      </svg>    </button>  </div></div>

카테고리