All Components

Browse all available Tailwind CSS components

Content Display Components

A simple vintage-style responsive content display component for e-commerce, using a monochromatic color scheme and supporting dark mode.

Open Preview

                <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 E-commerce Accordion with Pastel Colors

Skeuomorphic Accordion Component for E-commerce with Pastel colors, focusing on complex interactions and responsiveness, including dark mode support.

Open Preview

                <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>

Authentication Component

Neumorphism-style authentication component for e-commerce, with a triadic color scheme and simple layout. Supports dark mode and is responsive. Uses Tailwind CSS. No JavaScript.

Open Preview

                <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>

Media Embed Component

A brutalist, vibrant, and complex Media Embed Component for blogs, built with responsive design and dark mode support using Tailwind CSS.

Open Preview

                <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>

Filters Component

A simple, responsive Filters Component for social media with a Microinteractions style, Analogous color scheme, and dark theme support.

Open Preview

                <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 Component

A minimalist portfolio component designed with Tailwind CSS, featuring a vibrant color scheme and supporting dark mode. This component is intended for showcasing work or products and includes images and avatar placeholders.

Open Preview

                <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 Component

Open Preview

                <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>

Accordion Component

A simple, responsive Accordion Component designed with a glassmorphism effect and an analogous color scheme, suitable for showcasing work or products in a portfolio.

Open Preview

                <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 Component

A complex, responsive notifications component with dark mode support, designed with Material Design principles and a pastel color scheme for a blog/content website.

Open Preview

                <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 Component

Responsive Alert Message Component with Microinteractions, Pastel color scheme, Complex design, Business/Corporate purpose, Dark mode support, and No JavaScript.

Open Preview

                <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

Categories

All Components