Search Components

All Components

Browse all available Tailwind CSS components

Notifications Component

A Neumorphic Notifications Component with a grayscale color scheme and moderate complexity, designed for blog/content consumption. It is responsive and supports dark theme.

Open Preview

                <div class="min-h-screen bg-gray-200 dark:bg-gray-800 flex items-center justify-center p-4">
  <div class="w-full max-w-sm mx-auto bg-gray-200 dark:bg-gray-800 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark p-6">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Notifications</h2>
    
    <div class="space-y-4">
      <!-- Notification 1 -->
      <div class="flex items-center p-3 rounded-lg shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">
        <img class="h-10 w-10 rounded-full border-2 border-gray-300 dark:border-gray-700 mr-3" src="https://picsum.photos/id/1025/200/200" alt="User Avatar">
        <div>
          <p class="text-sm font-medium text-gray-800 dark:text-gray-200">John Doe commented on your post.</p>
          <p class="text-xs text-gray-600 dark:text-gray-400">2 hours ago</p>
        </div>
      </div>

      <!-- Notification 2 -->
      <div class="flex items-center p-3 rounded-lg shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">
        <img class="h-10 w-10 rounded-full border-2 border-gray-300 dark:border-gray-700 mr-3" src="https://picsum.photos/id/1011/200/200" alt="User Avatar">
        <div>
          <p class="text-sm font-medium text-gray-800 dark:text-gray-200">New article published: "The Future of AI".</p>
          <p class="text-xs text-gray-600 dark:text-gray-400">1 day ago</p>
        </div>
      </div>

      <!-- Notification 3 -->
      <div class="flex items-center p-3 rounded-lg shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">
        <img class="h-10 w-10 rounded-full border-2 border-gray-300 dark:border-gray-700 mr-3" src="https://picsum.photos/id/1005/200/200" alt="User Avatar">
        <div>
          <p class="text-sm font-medium text-gray-800 dark:text-gray-200">Your subscription is expiring soon.</p>
          <p class="text-xs text-gray-600 dark:text-gray-400">3 days ago</p>
        </div>
      </div>
    </div>
    
    <div class="mt-6 text-center">
      <a href="#" class="inline-block px-5 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-800 rounded-full shadow-neumorphic-button-light dark:shadow-neumorphic-button-dark hover:shadow-neumorphic-button-inset-light dark:hover:shadow-neumorphic-button-inset-dark transition-all duration-300">
        View All Notifications
      </a>
    </div>
  </div>
</div>

<style>
  .shadow-neumorphic-light {
    box-shadow: 6px 6px 12px #b0b0b0, -6px -6px 12px #ffffff;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 6px 6px 12px #1f1f1f, -6px -6px 12px #3c3c3c;
  }
  .shadow-neumorphic-inset-light {
    box-shadow: inset 5px 5px 10px #b0b0b0, inset -5px -5px 10px #ffffff;
  }
  .dark .shadow-neumorphic-inset-dark {
    box-shadow: inset 5px 5px 10px #1f1f1f, inset -5px -5px 10px #3c3c3c;
  }
  .shadow-neumorphic-button-light {
    box-shadow: 4px 4px 8px #b0b0b0, -4px -4px 8px #ffffff;
  }
  .dark .shadow-neumorphic-button-dark {
    box-shadow: 4px 4px 8px #1f1f1f, -4px -4px 8px #3c3c3c;
  }
  .hover\:shadow-neumorphic-button-inset-light:hover {
    box-shadow: inset 4px 4px 8px #b0b0b0, inset -4px -4px 8px #ffffff;
  }
  .dark .hover\:shadow-neumorphic-button-inset-dark:hover {
    box-shadow: inset 4px 4px 8px #1f1f1f, inset -4px -4px 8px #3c3c3c;
  }
</style>

Glassmorphism Monochromatic Footer

A simple, monochromatic glassmorphism footer component for a blog, with responsive design and dark mode support.

Open Preview

                
<footer class="backdrop-blur-md bg-white/30 dark:bg-gray-800/30 text-gray-800 dark:text-gray-200 p-6">
  <div class="container mx-auto flex flex-col items-center justify-between md:flex-row">
    <div class="mb-4 md:mb-0 text-center md:text-left">
      <p>&copy; 2023 Blog Name. All rights reserved.</p>
    </div>
    <div class="flex space-x-4">
      <a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition-colors duration-200">Privacy Policy</a>
      <a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition-colors duration-200">Terms of Service</a>
      <a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition-colors duration-200">Contact</a>
    </div>
  </div>
</footer>

Neumorphic Accordion Component

A Neumorphic Accordion Component with a Triadic color scheme, suitable for business websites. It features a responsive design with dark mode support, implemented purely with HTML and Tailwind CSS.

Open Preview

                <div class="p-6 bg-gray-200 dark:bg-gray-800 min-h-screen flex items-start justify-center">
  <div class="w-full max-w-2xl">
    <!-- Accordion Item 1 -->
    <div class="mb-4 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <input type="checkbox" id="accordion-1" class="hidden peer">
      <label for="accordion-1" class="flex items-center justify-between p-5 cursor-pointer text-gray-800 dark:text-gray-200">
        <span class="font-semibold text-lg">Our Vision</span>
        <svg class="w-6 h-6 transform transition-transform duration-300 peer-checked:rotate-180" 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>
      </label>
      <div class="max-h-0 overflow-hidden transition-all duration-500 peer-checked:max-h-screen">
        <div class="px-5 pb-5 text-gray-700 dark:text-gray-300">
          <p>At our core, we envision a future where innovative solutions empower businesses to thrive in a dynamically evolving digital landscape. We strive to be the leading partner in digital transformation, fostering growth and efficiency through cutting-edge technology and unwavering commitment to our clients' success.</p>
        </div>
      </div>
    </div>

    <!-- Accordion Item 2 -->
    <div class="mb-4 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <input type="checkbox" id="accordion-2" class="hidden peer">
      <label for="accordion-2" class="flex items-center justify-between p-5 cursor-pointer text-gray-800 dark:text-gray-200">
        <span class="font-semibold text-lg">Our Mission</span>
        <svg class="w-6 h-6 transform transition-transform duration-300 peer-checked:rotate-180" 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>
      </label>
      <div class="max-h-0 overflow-hidden transition-all duration-500 peer-checked:max-h-screen">
        <div class="px-5 pb-5 text-gray-700 dark:text-gray-300">
          <p>Our mission is to deliver tailored, high-impact digital strategies and solutions that drive tangible results for our clients. We are dedicated to continuous innovation, fostering a collaborative environment, and maintaining the highest standards of integrity and excellence in all our endeavors.</p>
        </div>
      </div>
    </div>

    <!-- Accordion Item 3 -->
    <div class="rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <input type="checkbox" id="accordion-3" class="hidden peer">
      <label for="accordion-3" class="flex items-center justify-between p-5 cursor-pointer text-gray-800 dark:text-gray-200">
        <span class="font-semibold text-lg">Our Values</span>
        <svg class="w-6 h-6 transform transition-transform duration-300 peer-checked:rotate-180" 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>
      </label>
      <div class="max-h-0 overflow-hidden transition-all duration-500 peer-checked:max-h-screen">
        <div class="px-5 pb-5 text-gray-700 dark:text-gray-300">
          <p>We are guided by a core set of values: Innovation, Integrity, Client-Centricity, and Excellence. These principles underpin every decision we make and every action we take, ensuring we consistently deliver exceptional value and build lasting relationships with our clients.</p>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  /* Neumorphic Shadows (Light Mode) */
  .shadow-neumorphic-light {
    box-shadow: 8px 8px 16px #a0a0a0, -8px -8px 16px #ffffff;
  }

  /* Neumorphic Shadows (Dark Mode) */
  .dark .shadow-neumorphic-dark {
    box-shadow: 8px 8px 16px #4a4a4a, -8px -8px 16px #222222;
  }

  /* Triadic Color Scheme */
  /* Using a base gray-200/gray-800 for background and text, and will imply the triadic through subtle interaction/accent colors if required for active states or borders (not explicitly drawn in this simple example, but conceptually part of the triadic palette) */
  /* For a true triadic, you might introduce a complementary hue for highlights/accents, e.g., an orange or teal if starting with purple/green. For this

Retro Rating System Component

A retro/vintage rating system component with Earth tones, designed for business/corporate websites. It supports responsive design and dark theme.

Open Preview

                <div class="bg-stone-100 dark:bg-stone-900 p-8 rounded-lg shadow-lg max-w-md mx-auto my-10 font-mono">
  <div class="text-stone-800 dark:text-stone-200 text-center mb-6">
    <h2 class="text-3xl font-bold mb-2">Rate Our Service</h2>
    <p class="text-stone-600 dark:text-stone-400">Your feedback helps us improve.</p>
  </div>
  
  <div class="flex justify-center items-center mb-8">
    <div class="flex space-x-2 text-4xl">
      <input type="radio" id="star1" name="rating" value="1" class="hidden" />
      <label for="star1" class="cursor-pointer text-stone-400 hover:text-yellow-500 dark:hover:text-yellow-400 transition-colors duration-200">
        &#9733;
      </label>
      <input type="radio" id="star2" name="rating" value="2" class="hidden" />
      <label for="star2" class="cursor-pointer text-stone-400 hover:text-yellow-500 dark:hover:text-yellow-400 transition-colors duration-200">
        &#9733;
      </label>
      <input type="radio" id="star3" name="rating" value="3" class="hidden" />
      <label for="star3" class="cursor-pointer text-stone-400 hover:text-yellow-500 dark:hover:text-yellow-400 transition-colors duration-200">
        &#9733;
      </label>
      <input type="radio" id="star4" name="rating" value="4" class="hidden" />
      <label for="star4" class="cursor-pointer text-stone-400 hover:text-yellow-500 dark:hover:text-yellow-400 transition-colors duration-200">
        &#9733;
      </label>
      <input type="radio" id="star5" name="rating" value="5" class="hidden" />
      <label for="star5" class="cursor-pointer text-stone-400 hover:text-yellow-500 dark:hover:text-yellow-400 transition-colors duration-200">
        &#9733;
      </label>
    </div>
  </div>

  <div class="mb-6">
    <label for="comment" class="block text-stone-700 dark:text-stone-300 text-sm font-bold mb-2">Leave a comment (optional):</label>
    <textarea id="comment" rows="4" class="shadow appearance-none border rounded w-full py-2 px-3 text-stone-700 leading-tight focus:outline-none focus:shadow-outline bg-stone-200 dark:bg-stone-800 dark:text-stone-300 border-stone-300 dark:border-stone-700 focus:border-stone-500 dark:focus:border-stone-500"></textarea>
  </div>

  <div class="flex justify-between items-center">
    <button class="bg-amber-600 hover:bg-amber-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition-colors duration-200">
      Submit Rating
    </button>
    <div class="flex -space-x-2 overflow-hidden">
      <img class="inline-block h-10 w-10 rounded-full ring-2 ring-stone-100 dark:ring-stone-900" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
      <img class="inline-block h-10 w-10 rounded-full ring-2 ring-stone-100 dark:ring-stone-900" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
      <img class="inline-block h-10 w-10 rounded-full ring-2 ring-stone-100 dark:ring-stone-900" src="https://randomuser.me/api/portraits/men/4.jpg" alt="User Avatar">
    </div>
  </div>
</div>

Dropdown Menu Component

Dropdown Menu Component with microinteractions, vibrant colors, and simple layout for a portfolio, with responsive design and dark theme support.

Open Preview

                <div class="relative inline-block text-left">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-700 transition transform hover:scale-105" id="menu-button" aria-expanded="true" aria-haspopup="true">
      Options
      <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>

  <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800 dark:ring-gray-700 hidden" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
    <div class="py-1" role="none">
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-indigo-500 hover:text-white dark:text-gray-200 dark:hover:bg-indigo-600 transition duration-150 ease-in-out transform hover:-translate-y-0.5" role="menuitem" tabindex="-1" id="menu-item-0">Account settings</a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-indigo-500 hover:text-white dark:text-gray-200 dark:hover:bg-indigo-600 transition duration-150 ease-in-out transform hover:-translate-y-0.5" role="menuitem" tabindex="-1" id="menu-item-1">Support</a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-indigo-500 hover:text-white dark:text-gray-200 dark:hover:bg-indigo-600 transition duration-150 ease-in-out transform hover:-translate-y-0.5" role="menuitem" tabindex="-1" id="menu-item-2">License</a>
      <form method="POST" action="#" role="none">
        <button type="submit" class="text-gray-700 block w-full text-left px-4 py-2 text-sm hover:bg-indigo-500 hover:text-white dark:text-gray-200 dark:hover:bg-indigo-600 transition duration-150 ease-in-out transform hover:-translate-y-0.5" role="menuitem" tabindex="-1" id="menu-item-3">
          Sign out
        </button>
      </form>
    </div>
  </div>
</div>

E-commerce Data Visualization Components Component

A data visualization component for e-commerce, styled with Material Design principles, earthy tones, and responsive dark mode support using Tailwind CSS.

Open Preview

                <div class="p-4 bg-white dark:bg-gray-800 shadow-md rounded-lg">
  <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Sales Performance</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div class="flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-sm">
      <div>
        <p class="text-sm text-gray-500 dark:text-gray-400">Total Revenue</p>
        <p class="text-2xl font-bold text-green-700 dark:text-green-400">$1,234,567</p>
      </div>
      <svg class="w-8 h-8 text-green-500 dark:text-green-300" 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 7h8m0 0v8m0-8L11 20m-7-2a2 2 0 01-2-2V8a2 2 0 012-2h4l2 2m0 0l-3 3-2-2-4 4"></path></svg>
    </div>
    <div class="flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-sm">
      <div>
        <p class="text-sm text-gray-500 dark:text-gray-400">Items Sold</p>
        <p class="text-2xl font-bold text-yellow-700 dark:text-yellow-400">9,876</p>
      </div>
      <svg class="w-8 h-8 text-yellow-500 dark:text-yellow-300" 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="M16 11V7l-4 4m0 0l-4-4m4 4v8m-4-2a2 2 0 01-2-2V6a2 2 0 012-2h4l2 2m0 0l-3 3-2-2-4 4"></path></svg>
    </div>
    <div class="md:col-span-2 p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-sm">
      <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-2">Sales Trends</h3>
      <!-- Placeholder for a simple chart -->
      <div class="h-32 bg-gray-200 dark:bg-gray-600 rounded-md flex items-center justify-center">
        <p class="text-gray-500 dark:text-gray-400">Chart Placeholder</p>
      </div>
    </div>
  </div>
  <div class="mt-4 text-center">
    <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">View Full Report</a>
  </div>
</div>

Brutalist E-commerce Footer Navigation

Brutalist E-commerce Footer Navigation with Analogous Colors, Complex, Responsive, Dark Mode Support, No JS

Open Preview

                <footer class="bg-gray-900 text-purple-200 dark:bg-black dark:text-purple-300 py-12 px-6 font-mono border-t-8 border-purple-600 dark:border-purple-800">
    <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-12">
        
        <!-- About Section -->
        <div class="col-span-1 lg:col-span-2">
            <h3 class="text-3xl font-bold mb-6 text-purple-400">BRUTALIST SHOP</h3>
            <p class="text-lg leading-relaxed mb-6">Unapologetically bold and raw, we bring you an e-commerce experience unlike any other. Industrial aesthetics meet cutting-edge commerce.</p>
            <div class="flex space-x-6">
                <a href="#" class="text-purple-200 hover:text-purple-500 transition duration-300 text-3xl"><i class="fab fa-facebook-f"></i></a>
                <a href="#" class="text-purple-200 hover:text-purple-500 transition duration-300 text-3xl"><i class="fab fa-twitter"></i></a>
                <a href="#" class="text-purple-200 hover:text-purple-500 transition duration-300 text-3xl"><i class="fab fa-instagram"></i></a>
                <a href="#" class="text-purple-200 hover:text-purple-500 transition duration-300 text-3xl"><i class="fab fa-linkedin-in"></i></a>
            </div>
        </div>

        <!-- Navigation Links 1 -->
        <div>
            <h3 class="text-xl font-bold mb-6 text-purple-400">SHOP</h3>
            <ul class="space-y-4 text-lg">
                <li><a href="#" class="hover:text-purple-500 transition duration-300 border-b border-dashed border-purple-600 pb-1">New Arrivals</a></li>
                <li><a href="#" class="hover:text-purple-500 transition duration-300 border-b border-dashed border-purple-600 pb-1">Bestsellers</a></li>
                <li><a href="#" class="hover:text-purple-500 transition duration-300 border-b border-dashed border-purple-600 pb-1">Unisex Collection</a></li>
                <li><a href="#" class="hover:text-purple-500 transition duration-300 border-b border-dashed border-purple-600 pb-1">Clearance</a></li>
                <li><a href="#" class="hover:text-purple-500 transition duration-300 border-b border-dashed border-purple-600 pb-1">Limited Editions</a></li>
            </ul>
        </div>

        <!-- Navigation Links 2 -->
        <div>
            <h3 class="text-xl font-bold mb-6 text-purple-400">CUSTOMER CARE</h3>
            <ul class="space-y-4 text-lg">
                <li><a href="#" class="hover:text-purple-500 transition duration-300 border-b border-dashed border-purple-600 pb-1">Contact Us</a></li>
                <li><a href="#" class="hover:text-purple-500 transition duration-300 border-b border-dashed border-purple-600 pb-1">FAQs</a></li>
                <li><a href="#" class="hover:text-purple-500 transition duration-300 border-b border-dashed border-purple-600 pb-1">Shipping & Returns</a></li>
                <li><a href="#" class="hover:text-purple-500 transition duration-300 border-b border-dashed border-purple-600 pb-1">Order Tracking</a></li>
                <li><a href="#" class="hover:text-purple-500 transition duration-300 border-b border-dashed border-purple-600 pb-1">Privacy Policy</a></li>
            </ul>
        </div>

        <!-- Newsletter Signup & Payment Methods -->
        <div>
            <h3 class="text-xl font-bold mb-6 text-purple-400">STAY RAW</h3>
            <p class="text-lg mb-6">Subscribe for irregular updates and exclusive drops directly to your inbox.</p>
            <form class="flex mb-6">
                <input type="email" placeholder="YOUR EMAIL..." class="px-5 py-3 w-full bg-gray-800 dark:bg-black border-2 border-purple-600 dark:border-purple-800 text-purple-200 dark:text-purple-300 focus:outline-none focus:border-purple-400 placeholder-purple-400" />
                <button type="submit" class="bg-purple-600 hover:bg-purple-700 text-white dark:bg-purple-800 dark:hover:bg-purple-900 px-6 py-3 font-bold transition duration-300 border-2 border-purple-600 dark:border-purple-800">JOIN</button>
            </form>
            
            <h4 class="text-xl font-bold mb-4 text-purple-400">ACCEPTED METHODS</h4>
            <div class="flex flex-wrap gap-4 text-4xl">
                <i class="fab fa-cc-visa text-purple-300"></i>
                <i class="fab fa-cc-mastercard text-purple-300"></i>
                <i class="fab fa-cc-amex text-purple-300"></i>
                <i class="fab fa-paypal text-purple-300"></i>
            </div>
        </div>

    </div>

    <div class="text-center mt-12 pt-8 border-t-4 border-purple-700 dark:border-purple-900 text-purple-400 text-lg">
        <p>&copy; <span id="currentYear"></span> BRUTALIST SHOP. All Rights Reserved. Embrace the Grit.</p>
    </div>
</footer>

<!-- Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

Neumorphic Social Media Container

A simple Neumorphic container component for social media, with grayscale colors and dark mode support.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-4">
  <div class="w-full max-w-sm bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
    <div class="flex items-center space-x-4 mb-4">
      <img class="w-12 h-12 rounded-full shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
      <div>
        <p class="font-semibold text-gray-800 dark:text-gray-200">John Doe</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">@johndoe</p>
      </div>
    </div>
    <p class="text-gray-700 dark:text-gray-300 mb-4">
      This is a sample post demonstrating the Neumorphism container component with grayscale colors.
      It supports dark mode and is designed for social media interfaces.
    </p>
    <img class="w-full h-48 object-cover rounded-md shadow-neumorphic-light dark:shadow-neumorphic-dark mb-4" src="https://picsum.photos/400/200" alt="Post Image">
    <div class="flex justify-between text-gray-600 dark:text-gray-400 text-sm">
      <span class="flex items-center space-x-1">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" />
        </svg>
        <span>1.2K Likes</span>
      </span>
      <span class="flex items-center space-x-1">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M18 13V5a2 2 0 00-2-2H4a2 2 0 00-2 2v8a2 2 0 002 2h3l3 3 3-3h3a2 2 0 002-2zM5 7a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H6z" clip-rule="evenodd" />
        </svg>
        <span>240 Comments</span>
      </span>
    </div>
  </div>
</div>

<style>
  .shadow-neumorphic-light {
    box-shadow: 8px 8px 16px #acacac,
                -8px -8px 16px #ffffff;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 8px 8px 16px #4a4a4a,
                -8px -8px 16px #1a1a1a;
  }
  .shadow-neumorphic-inset-light {
    box-shadow: inset 5px 5px 10px #acacac,
                inset -5px -5px 10px #ffffff;
  }
  .dark .shadow-neumorphic-inset-dark {
    box-shadow: inset 5px 5px 10px #4a4a4a,
                inset -5px -5px 10px #1a1a1a;
  }
</style>

Neumorphic Loaders Component

A Neumorphic Loaders Component with an analogous color scheme, suitable for a blog or content site, featuring a responsive design and dark theme support.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-900">
  <!-- Neumorphic Loader 1 -->
  <div class="relative w-24 h-24 m-4 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark flex items-center justify-center">
    <div class="absolute w-16 h-16 rounded-full border-4 border-t-4 border-blue-500 dark:border-blue-700 animate-spin"></div>
  </div>

  <!-- Neumorphic Loader 2 -->
  <div class="relative w-24 h-24 m-4 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark flex items-center justify-center">
    <div class="absolute w-16 h-16 rounded-full border-4 border-t-4 border-green-500 dark:border-green-700 animate-pulse"></div>
  </div>

  <!-- Neumorphic Loader 3 (for larger screens with subtle animation) -->
  <div class="hidden md:flex relative w-24 h-24 m-4 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark items-center justify-center">
    <div class="absolute w-16 h-16 rounded-full border-4 border-t-4 border-purple-500 dark:border-purple-700 animate-bounce-slow"></div>
  </div>
</div>

<!-- Add a style block for the custom animation, as Tailwind doesn't have a direct "bounce-slow" -->
<style>
  @keyframes bounce-slow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }

  .animate-bounce-slow {
    animation: bounce-slow 2s infinite ease-in-out;
  }

  /* Neumorphism Shadows */
  .shadow-neumorphic-light {
    box-shadow: 8px 8px 16px #a3b1c6, -8px -8px 16px #ffffff;
  }

  .dark .shadow-neumorphic-dark {
    box-shadow: 8px 8px 16px #1a202c, -8px -8px 16px #4a5568;
  }
</style>

Material Design Accordion

Material Design Accordion for E-commerce with Complementary Color Scheme and Dark Theme Support.

Open Preview

                <div class="max-w-md mx-auto my-8 bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden">
    <div class="accordion-item">
        <input type="checkbox" id="accordion-1" class="hidden peer">
        <label for="accordion-1" class="flex items-center justify-between p-4 cursor-pointer bg-blue-500 text-white dark:bg-blue-700 dark:text-gray-100">
            <h3 class="text-lg font-medium">Product Details</h3>
            <svg class="w-6 h-6 transform transition-transform duration-300 peer-checked:rotate-180" 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>
        </label>
        <div class="max-h-0 overflow-hidden transition-all duration-500 peer-checked:max-h-screen">
            <div class="p-4 bg-blue-100 dark:bg-blue-900 text-gray-800 dark:text-gray-200">
                <p><strong>Material:</strong> 100% Cotton</p>
                <p><strong>Care Instructions:</strong> Machine wash cold</p>
                <p><strong>Origin:</strong> Made in Vietnam</p>
            </div>
        </div>
    </div>

    <div class="accordion-item">
        <input type="checkbox" id="accordion-2" class="hidden peer">
        <label for="accordion-2" class="flex items-center justify-between p-4 cursor-pointer bg-green-500 text-white dark:bg-green-700 dark:text-gray-100">
            <h3 class="text-lg font-medium">Shipping Information</h3>
            <svg class="w-6 h-6 transform transition-transform duration-300 peer-checked:rotate-180" 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>
        </label>
        <div class="max-h-0 overflow-hidden transition-all duration-500 peer-checked:max-h-screen">
            <div class="p-4 bg-green-100 dark:bg-green-900 text-gray-800 dark:text-gray-200">
                <p><strong>Shipping Options:</strong> Standard, Express</p>
                <p><strong>Estimated Delivery:</strong> 3-5 business days</p>
                <p><strong>Tracking:</strong> Available</p>
            </div>
        </div>
    </div>

    <div class="accordion-item">
        <input type="checkbox" id="accordion-3" class="hidden peer">
        <label for="accordion-3" class="flex items-center justify-between p-4 cursor-pointer bg-orange-500 text-white dark:bg-orange-700 dark:text-gray-100">
            <h3 class="text-lg font-medium">Customer Reviews</h3>
            <svg class="w-6 h-6 transform transition-transform duration-300 peer-checked:rotate-180" 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>
        </label>
        <div class="max-h-0 overflow-hidden transition-all duration-500 peer-checked:max-h-screen">
            <div class="p-4 bg-orange-100 dark:bg-orange-900 text-gray-800 dark:text-gray-200">
                <div class="mb-2">
                    <p class="font-semibold">John Doe</p>
                    <p class="text-sm">"Great product, highly recommend!"</p>
                </div>
                <div>
                    <p class="font-semibold">Jane Smith</p>
                    <p class="text-sm">"Fast shipping and excellent quality."</p>
                </div>
            </div>
        </div>
    </div>
</div>

1 ... 126 127 128 129 130 ... 335

Search Components

Categories

All Components