검색 구성 요소

카테고리

구성 요소 경고 메시지

경고 메시지

사용자에게 알리기 위한 정보 메시지

Alert Messages 구성 요소

마이크로 인터랙션, 파스텔 색 구성표, 복잡한 디자인, 비즈니스/기업용, 다크 모드 지원 및 JavaScript 없음이 포함된 반응형 경고 메시지 구성 요소.

                <div class="flex items-center justify-center 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-lg shadow-xl overflow-hidden">
    <div class="p-6">
      <div class="flex items-center">
        <div class="flex-shrink-0">
          <svg class="h-8 w-8 text-teal-400" xmlns="http://www.w3.org/2000/svg" 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"></path>
          </svg>
        </div>
        <div class="ml-4">
          <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Message Sent Successfully</h3>
          <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Your message has been sent to the recipient. We will notify you when they respond.</p>
        </div>
      </div>
      <div class="mt-5 sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-3 sm:grid-flow-row-dense">
        <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-teal-400 text-base font-medium text-white hover:bg-teal-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 sm:col-start-2 sm:text-sm">
          Dismiss
        </button>
        <button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 sm:mt-0 sm:col-start-1 sm:text-sm">
          Learn More
        </button>
      </div>
    </div>
  </div> Achilles</div>

Alert Messages 구성 요소

비즈니스 웹 사이트를 위한 간단한 Neumorphism 스타일의 경고 메시지 구성 요소로, JavaScript 없이 Tailwind CSS를 사용하여 생생한 색상과 반응형 어두운 테마 지원을 제공합니다.

열다 미리 보기

                <div class="flex items-center justify-center h-screen bg-gray-200 dark:bg-gray-800">
  <div class="p-6 rounded-xl shadow-xl bg-gray-300 dark:bg-gray-700 dark:shadow-xl-dark">
    <div class="flex items-center">
      <div class="flex-shrink-0">
        <svg class="h-6 w-6 text-green-500 dark:text-green-400" xmlns="http://www.w3.org/2000/svg" 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>
      <div class="ml-3">
        <p class="text-sm leading-5 font-medium text-gray-900 dark:text-gray-100">
          Successfully updated!
        </p>
      </div>
    </div>
  </div>
</div>

Alert Messages 구성 요소

대시보드 데이터 시각화를 위한 Glassmorphism 스타일의 경고 메시지 구성 요소는 젖빛 유리 효과, 보색, 어두운 테마를 지원하는 반응형 디자인을 특징으로 합니다.

열다 미리 보기

                <div class="flex flex-col space-y-4 p-6">
    <div class="bg-white bg-opacity-40 backdrop-blur-md rounded-lg border border-white border-opacity-20 p-4 dark:bg-gray-800 dark:bg-opacity-60">
        <div class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="h-10 w-10 rounded-full">
            <div class="flex-1">
                <p class="text-lg font-semibold text-black dark:text-white">Alert Title</p>
                <p class="text-gray-700 dark:text-gray-300">This is an alert message describing the issue at hand.</p>
            </div>
            <button class="bg-red-600 text-white p-2 rounded-md hover:bg-red-500 dark:bg-red-700 dark:hover:bg-red-600">Dismiss</button>
        </div>
    </div>

    <div class="bg-white bg-opacity-40 backdrop-blur-md rounded-lg border border-white border-opacity-20 p-4 dark:bg-gray-800 dark:bg-opacity-60">
        <div class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="h-10 w-10 rounded-full">
            <div class="flex-1">
                <p class="text-lg font-semibold text-black dark:text-white">Information Alert</p>
                <p class="text-gray-700 dark:text-gray-300">This is a piece of information to keep you updated.</p>
            </div>
            <button class="bg-blue-600 text-white p-2 rounded-md hover:bg-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600">Okay</button>
        </div>
    </div>

    <div class="bg-white bg-opacity-40 backdrop-blur-md rounded-lg border border-white border-opacity-20 p-4 dark:bg-gray-800 dark:bg-opacity-60">
        <div class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="h-10 w-10 rounded-full">
            <div class="flex-1">
                <p class="text-lg font-semibold text-black dark:text-white">Success Alert</p>
                <p class="text-gray-700 dark:text-gray-300">Your operation was successful! Great job!</p>
            </div>
            <button class="bg-green-600 text-white p-2 rounded-md hover:bg-green-500 dark:bg-green-700 dark:hover:bg-green-600">Close</button>
        </div>
    </div>
</div>

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>