모든 구성 요소

사용 가능한 모든 Tailwind CSS 구성 요소 찾아보기

콘텐츠 표시 구성 요소

전자 상거래를 위한 간단한 빈티지 스타일의 반응형 콘텐츠 디스플레이 구성 요소로, 단색 색 구성표를 사용하고 다크 모드를 지원합니다.

                <div class="max-w-md mx-auto bg-gray-800 dark:bg-gray-900 rounded-lg overflow-hidden shadow-lg">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/pic1/400/300" alt="Product Image">
    <div class="p-6">
        <h2 class="text-2xl font-bold text-gray-100 dark:text-gray-200 mb-2">Vintage Product Title</h2>
        <p class="text-gray-300 dark:text-gray-400 mb-4">A brief description of the vintage product that evokes nostalgia from the 80s and 90s.</p>
        <div class="flex items-center mb-4">
            <img class="w-10 h-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <div class="text-sm">
                <p class="text-gray-100 dark:text-gray-200">Seller Name</p>
                <p class="text-gray-500 dark:text-gray-400">Seller Rating: ⭐⭐⭐⭐</p>
            </div>
        </div>
        <span class="text-lg font-semibold text-gray-100 dark:text-gray-200">$29.99</span>
        <div class="mt-4">
            <button class="w-full bg-gray-600 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:hover:bg-gray-600">Add to Cart</button>
        </div>
    </div>
</div>

Skeuomorphism 파스텔 색상의 전자 상거래 아코디언

파스텔 색상의 전자 상거래를 위한 스큐어모픽 아코디언 구성 요소로, 다크 모드 지원을 포함하여 복잡한 상호 작용 및 응답성에 중점을 둡니다.

열다 미리 보기

                <div class="max-w-md mx-auto">  <div class="bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 shadow-xl rounded-lg">    <div class="border-b border-gray-300 dark:border-gray-600">      <button class="w-full flex justify-between items-center p-4 text-gray-700 dark:text-gray-300 font-semibold">        <span>Product Details</span>        <svg class="w-5 h-5 transform transition-transform duration-200 rotate-0" 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="M19 9l-7 7-7-7"></path>        </svg>      </button>      <div class="p-4 border-t border-gray-300 dark:border-gray-600 hidden">        <p class="text-gray-600 dark:text-gray-400 text-sm">Here you can add detailed product information like specifications, materials, etc. This content is hidden by default and revealed when the accordion is expanded.</p>      </div>    </div>    <div class="border-b border-gray-300 dark:border-gray-600">      <button class="w-full flex justify-between items-center p-4 text-gray-700 dark:text-gray-300 font-semibold">        <span>Shipping & Returns</span>        <svg class="w-5 h-5 transform transition-transform duration-200 rotate-0" 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="M19 9l-7 7-7-7"></path>        </svg>      </button>      <div class="p-4 border-t border-gray-300 dark:border-gray-600 hidden">        <p class="text-gray-600 dark:text-gray-400 text-sm">Information about shipping options, delivery times, and return policy goes here. Keep it concise and easy to read.</p>      </div>    </div>    <div>      <button class="w-full flex justify-between items-center p-4 text-gray-700 dark:text-gray-300 font-semibold">        <span>Customer Reviews</span>        <svg class="w-5 h-5 transform transition-transform duration-200 rotate-0" 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="M19 9l-7 7-7-7"></path>        </svg>      </button>      <div class="p-4 border-t border-gray-300 dark:border-gray-600 hidden">        <div class="flex items-start mb-4">          <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Avatar">          <div>            <p class="text-gray-700 dark:text-gray-300 font-semibold">Jane Doe</p>            <p class="text-gray-600 dark:text-gray-400 text-sm">This product is amazing! Highly recommend.</p>          </div>        </div>        <div class="flex items-start">          <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">          <div>            <p class="text-gray-700 dark:text-gray-300 font-semibold">John Smith</p>            <p class="text-gray-600 dark:text-gray-400 text-sm">Good quality and fast shipping.</p>          </div>        </div>      </div>    </div>  </div></div>

인증 구성 요소

전자 상거래를 위한 Neumorphism 스타일의 인증 구성 요소로, 트라이어딕 색 구성표와 간단한 레이아웃이 있습니다. 다크 모드를 지원하며 반응성이 뛰어납니다. Tailwind CSS를 사용합니다. 자바스크립트가 없습니다.

열다 미리 보기

                <div class="flex items-center justify-center h-screen bg-gray-200 dark:bg-gray-800">
  <div class="p-8 bg-white dark:bg-gray-700 rounded-xl shadow-lg dark:shadow-none">
    <h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-white mb-6">Login</h2>
    <form>
      <div class="mb-4">
        <label for="email" class="block text-sm font-medium text-gray-600 dark:text-gray-300">Email</label>
        <input type="email" id="email" class="mt-1 block w-full px-3 py-2 bg-gray-100 dark:bg-gray-600 border border-gray-300 dark:border-gray-500 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm text-gray-900 dark:text-white">
      </div>
      <div class="mb-6">
        <label for="password" class="block text-sm font-medium text-gray-600 dark:text-gray-300">Password</label>
        <input type="password" id="password" class="mt-1 block w-full px-3 py-2 bg-gray-100 dark:bg-gray-600 border border-gray-300 dark:border-gray-500 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm text-gray-900 dark:text-white">
      </div>
      <div class="flex items-center justify-between">
        <div class="flex items-start">
          <div class="flex items-center">
            <input id="remember_me" name="remember_me" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded dark:bg-gray-600 dark:border-gray-500">
          </div>
          <div class="ml-2 text-sm">
            <label for="remember_me" class="font-medium text-gray-900 dark:text-gray-300">Remember me</label>
          </div>
        </div>
        <div class="text-sm">
          <a href="#" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">Forgot your password?</a>
        </div>
      </div>
      <div class="mt-6">
        <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-600">
          Sign in
        </button>
      </div>
    </form>
  </div>
</div>

미디어 임베드 컴포넌트

블로그를 위한 잔인하고 생동감 넘치며 복잡한 미디어 임베드 컴포넌트로, Tailwind CSS를 사용하여 반응형 디자인과 다크 모드 지원으로 구축되었습니다.

열다 미리 보기

                <div class="dark:bg-gray-900 dark:text-white p-8">
  <div class="max-w-4xl mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 border-4 border-black dark:border-white p-4">
      <div class="relative pb-56 md:pb-0 md:h-96">
        <iframe class="absolute top-0 left-0 w-full h-full border-4 border-black dark:border-white" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
      <div class="flex flex-col justify-between">
        <div>
          <h2 class="text-3xl font-bold mb-4 border-b-4 border-black dark:border-white pb-2">Embedded Media Title</h2>
          <p class="mb-4">This is a description of the embedded media. It is intentionally a bit rough around the edges to fit the brutalist style. The vibrant colors and bold borders create a sense of energy and excitement.</p>
          <div class="flex items-center mb-4">
            <img class="w-12 h-12 rounded-full mr-4 border-4 border-black dark:border-white" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
            <div>
              <p class="font-bold">Author Name</p>
              <p class="text-sm">Date Published</p>
            </div>
          </div>
        </div>
        <div class="flex justify-end">
          <button class="bg-red-500 text-white px-6 py-3 border-4 border-black dark:border-white font-bold text-lg hover:bg-red-700">Watch Now</button>
        </div>
      </div>
    </div>
  </div>
</div>

필터 구성 요소

간단하고 반응이 빠른 필터 구성 요소로, 마이크로 인터랙션 스타일, 아날로그 색 구성표 및 어두운 테마 지원을 갖춘 소셜 미디어용 구성 요소입니다.

열다 미리 보기

                <div class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 p-4">
  <div class="container mx-auto">
    <h2 class="text-xl font-bold mb-4">Filters</h2>
    <div class="flex flex-wrap gap-2">
      <button class="px-4 py-2 bg-blue-500 text-white rounded-full hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 transition duration-300 ease-in-out transform hover:scale-105">
        Popular
      </button>
      <button class="px-4 py-2 bg-green-500 text-white rounded-full hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-800 transition duration-300 ease-in-out transform hover:scale-105">
        Latest
      </button>
      <button class="px-4 py-2 bg-yellow-500 text-white rounded-full hover:bg-yellow-600 dark:bg-yellow-700 dark:hover:bg-yellow-800 transition duration-300 ease-in-out transform hover:scale-105">
        Following
      </button>
      <button class="px-4 py-2 bg-red-500 text-white rounded-full hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-800 transition duration-300 ease-in-out transform hover:scale-105">
        Friends
      </button>
    </div>
  </div>
</div>

Functional Components 구성 요소

Tailwind CSS로 디자인된 미니멀리스트 포트폴리오 구성 요소로, 생생한 색 구성표와 다크 모드를 지원합니다. 이 구성 요소는 작품 또는 제품을 보여주기 위한 것이며 이미지 및 아바타 자리 표시자를 포함합니다.

열다 미리 보기

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg transition duration-300 ease-in-out">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">My Portfolio</h1>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg">
            <img src="https://picsum.photos/300/200?random=1" alt="Portfolio Item 1" class="w-full h-40 object-cover rounded-lg mb-2">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Project Title 1</h2>
            <p class="text-gray-600 dark:text-gray-400">Short description of project 1.</p>
        </div>
        <div class="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg">
            <img src="https://picsum.photos/300/200?random=2" alt="Portfolio Item 2" class="w-full h-40 object-cover rounded-lg mb-2">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Project Title 2</h2>
            <p class="text-gray-600 dark:text-gray-400">Short description of project 2.</p>
        </div>
        <div class="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg">
            <img src="https://picsum.photos/300/200?random=3" alt="Portfolio Item 3" class="w-full h-40 object-cover rounded-lg mb-2">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Project Title 3</h2>
            <p class="text-gray-600 dark:text-gray-400">Short description of project 3.</p>
        </div>
        <div class="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg">
            <img src="https://picsum.photos/300/200?random=4" alt="Portfolio Item 4" class="w-full h-40 object-cover rounded-lg mb-2">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Project Title 4</h2>
            <p class="text-gray-600 dark:text-gray-400">Short description of project 4.</p>
        </div>
        <div class="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg">
            <img src="https://picsum.photos/300/200?random=5" alt="Portfolio Item 5" class="w-full h-40 object-cover rounded-lg mb-2">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Project Title 5</h2>
            <p class="text-gray-600 dark:text-gray-400">Short description of project 5.</p>
        </div>
        <div class="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg">
            <img src="https://picsum.photos/300/200?random=6" alt="Portfolio Item 6" class="w-full h-40 object-cover rounded-lg mb-2">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Project Title 6</h2>
            <p class="text-gray-600 dark:text-gray-400">Short description of project 6.</p>
        </div>
    </div>
    <div class="mt-6">
        <h2 class="text-lg font-bold text-gray-800 dark:text-white">About Me</h2>
        <div class="flex items-center mt-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <p class="text-gray-600 dark:text-gray-400">Hello! I'm a passionate developer who loves to create. Check out my work above and connect with me for collaboration!</p>
        </div>
    </div>
</div>

Neumorphism Columns 컴포넌트

열다 미리 보기

                <div class="p-8">

    <!-- Light Mode Container -->
    <div class="neumorphism-container relative z-10 max-w-6xl mx-auto p-8 rounded-2xl shadow-neumorphism-light bg-gray-200 dark:bg-gray-800 dark:shadow-neumorphism-dark">

        <!-- Dark Mode Toggle - Simple Example -->
        <div class="absolute top-4 right-4">
            <button class="p-2 rounded-full bg-gray-300 dark:bg-gray-700 shadow-neumorphism-light dark:shadow-neumorphism-dark focus:outline-none">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-700 dark:text-gray-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707m-9.193 9.193l-.707.707M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
            </button>
        </div>

        <h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100 mb-8">My Portfolio</h2>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

            <!-- Portfolio Item 1 -->
            <div class="neumorphism-item p-6 rounded-xl shadow-neumorphism-light bg-gray-300 dark:bg-gray-700 dark:shadow-neumorphism-dark transform transition duration-300 hover:scale-105">
                <img src="https://picsum.photos/seed/project1/400/300" alt="Project 1" class="rounded-lg mb-4 shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark">
                <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Project Title 1</h3>
                <p class="text-gray-600 dark:text-gray-300 mb-4">A brief description of Project 1, highlighting key features and technologies used.</p>
                <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Learn More</a>
            </div>

            <!-- Portfolio Item 2 -->
            <div class="neumorphism-item p-6 rounded-xl shadow-neumorphism-light bg-gray-300 dark:bg-gray-700 dark:shadow-neumorphism-dark transform transition duration-300 hover:scale-105">
                <img src="https://picsum.photos/seed/project2/400/300" alt="Project 2" class="rounded-lg mb-4 shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark">
                <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Project Title 2</h3>
                <p class="text-gray-600 dark:text-gray-300 mb-4">A brief description of Project 2, highlighting key features and technologies used.</p>
                <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Learn More</a>
            </div>

            <!-- Portfolio Item 3 -->
            <div class="neumorphism-item p-6 rounded-xl shadow-neumorphism-light bg-gray-300 dark:bg-gray-700 dark:shadow-neumorphism-dark transform transition duration-300 hover:scale-105">
                <img src="https://picsum.photos/seed/project3/400/300" alt="Project 3" class="rounded-lg mb-4 shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark">
                <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Project Title 3</h3>
                <p class="text-gray-600 dark:text-gray-300 mb-4">A brief description of Project 3, highlighting key features and technologies used.</p>
                <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Learn More</a>
            </div>

        </div>

        <!-- About Section - Example -->
        <div class="neumorphism-item mt-12 p-8 rounded-xl shadow-neumorphism-light bg-gray-300 dark:bg-gray-700 dark:shadow-neumorphism-dark">
            <h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-4">About Me</h3>
            <div class="flex flex-col md:flex-row items-center">
                <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar" class="rounded-full w-24 h-24 mb-4 md:mb-0 md:mr-6 shadow-neumorphism-light dark:shadow-neumorphism-dark">
                <p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
        </div>

    </div>
</div>

<style>
ul,
li {
    list-style: unset
}

/* Base styles for Neumorphism */
.shadow-neumorphism-light {
    box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
}

.shadow-neumorphism-dark {
    box-shadow: 7px 7px 15px #4b4b4b, -7px -7px 15px #333333;
}

.shadow-inner-neumorphism-light {
    box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff;
}

.shadow-inner-neumorphism-dark {
    box-shadow: inset 5px 5px 10px #4b4b4b, inset -5px -5px 10px #333333;
}

/* Adjustments for dark mode */
body.dark .neumorphism-container {
    background-color: #2d3748;
    /* dark gray */
    box-shadow: 7px 7px 15px #1a202c, -7px -7px 15px #3f4a59;
    /* dark mode shadows */
}

body.dark .neumorphism-item {
    background-color: #4a5568;
    /* darker gray */
    box-shadow: 7px 7px 15px #1a202c, -7px -7px 15px #3f4a59;
    /* dark mode shadows */
}
</style>

아코디언 구성 요소

심플하고 반응이 빠른 아코디언 컴포넌트로, 글라스모피즘 효과와 유사한 색 구성표로 디자인되어 포트폴리오에서 작업이나 제품을 선보이는 데 적합합니다.

열다 미리 보기

                <div class="bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-4 max-w-md mx-auto">
    <h2 class="text-xl font-semibold text-center text-gray-800 dark:text-white">My Portfolio</h2>
    <div class="mt-4">
        <div class="rounded-lg shadow-md overflow-hidden">
            <div class="bg-purple-200 dark:bg-purple-600 p-4 cursor-pointer hover:bg-purple-300 dark:hover:bg-purple-500 transition-colors">
                <h3 class="font-semibold text-gray-800 dark:text-white">Project 1</h3>
                <p class="text-gray-600 dark:text-gray-300">Description of Project 1.</p>
            </div>
            <div class="bg-purple-100 dark:bg-purple-700 p-4 cursor-pointer hover:bg-purple-200 dark:hover:bg-purple-600 transition-colors">
                <h3 class="font-semibold text-gray-800 dark:text-white">Project 2</h3>
                <p class="text-gray-600 dark:text-gray-300">Description of Project 2.</p>
            </div>
            <div class="bg-purple-200 dark:bg-purple-600 p-4 cursor-pointer hover:bg-purple-300 dark:hover:bg-purple-500 transition-colors">
                <h3 class="font-semibold text-gray-800 dark:text-white">Project 3</h3>
                <p class="text-gray-600 dark:text-gray-300">Description of Project 3.</p>
            </div>
        </div>
    </div>
    <div class="mt-6 text-center">
        <img src="https://picsum.photos/200/100" alt="Project Image" class="rounded-lg mb-2">
        <p class="text-gray-800 dark:text-white">Showcasing beautiful projects.</p>
    </div>
    <div class="mt-4 text-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-white dark:border-gray-800">
    </div>
</div>

Notifications 구성 요소

다크 모드를 지원하는 복잡하고 반응이 빠른 알림 구성요소로, 블로그/콘텐츠 웹사이트를 위한 머티리얼 디자인 원칙과 파스텔 색 구성표로 설계되었습니다.

열다 미리 보기

                <div class="container mx-auto p-4 md:p-8 dark:bg-gray-900">
  <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-6">Notifications</h2>

  <!-- Notification 1 -->
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md mb-4 overflow-hidden">
    <div class="flex items-center px-4 py-3 border-b border-gray-200 dark:border-gray-700">
      <img class="h-10 w-10 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
      <div class="flex-1">
        <p class="text-gray-800 dark:text-white font-semibold">John Doe</p>
        <p class="text-gray-600 dark:text-gray-400 text-sm">Commented on your post</p>
      </div>
      <span class="text-gray-500 dark:text-gray-400 text-sm">2 hours ago</span>
    </div>
    <div class="p-4 text-gray-700 dark:text-gray-300">
      <p>"This is a great article, thanks for sharing!"</p>
    </div>
    <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 text-right">
      <button class="text-sm text-blue-600 dark:text-blue-400 hover:underline mr-4">Reply</button>
      <button class="text-sm text-red-600 dark:text-red-400 hover:underline">Dismiss</button>
    </div>
  </div>

  <!-- Notification 2 -->
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md mb-4 overflow-hidden">
    <div class="flex items-center px-4 py-3 border-b border-gray-200 dark:border-gray-700">
      <img class="h-10 w-10 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
      <div class="flex-1">
        <p class="text-gray-800 dark:text-white font-semibold">Jane Smith</p>
        <p class="text-gray-600 dark:text-gray-400 text-sm">Liked your post</p>
      </div>
      <span class="text-gray-500 dark:text-gray-400 text-sm">5 hours ago</span>
    </div>
    <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 text-right">
      <button class="text-sm text-red-600 dark:text-red-400 hover:underline">Dismiss</button>
    </div>
  </div>

  <!-- Notification 3 -->
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
    <div class="flex items-center px-4 py-3 border-b border-gray-200 dark:border-gray-700">
       <img class="h-10 w-10 rounded-full object-cover mr-4" src="https://picsum.photos/id/237/200/300" alt="Post Image">
      <div class="flex-1">
        <p class="text-gray-800 dark:text-white font-semibold">New Post Alert</p>
        <p class="text-gray-600 dark:text-gray-400 text-sm">A new article you might be interested in</p>
      </div>
      <span class="text-gray-500 dark:text-gray-400 text-sm">1 day ago</span>
    </div>
    <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 text-right">
      <button class="text-sm text-blue-600 dark:text-blue-400 hover:underline mr-4">View Post</button>
      <button class="text-sm text-red-600 dark:text-red-400 hover:underline">Dismiss</button>
    </div>
  </div>

</div>

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>

1 ... 119 120 121 122 123 ... 242

카테고리

모든 구성 요소