Search Components

All Components

Browse all available Tailwind CSS components

Content Display Component

A Content Display Component designed in a skeuomorphic style for E-commerce with a dark theme. It showcases products with minimal elements, using an analogous color scheme for a pleasing aesthetic.

Open Preview

                <div class="bg-gray-100 dark:bg-gray-900 p-6 rounded-lg shadow-lg">
  <div class="flex flex-col justify-center items-center">
    <img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/500/300" alt="Product Image">
    <div class="bg-white dark:bg-gray-800 p-4 rounded-b-lg w-full">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Product Name</h2>
      <p class="text-gray-600 dark:text-gray-300">$29.99</p>
      <p class="text-gray-700 dark:text-gray-300">A short description of the product goes here, detailing its features and benefits.</p>
      <div class="flex items-center mt-4">
        <img class="w-10 h-10 rounded-full border-2 border-gray-200 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <span class="text-gray-800 dark:text-gray-200 ml-2">Seller Name</span>
      </div>
      <button class="mt-4 bg-blue-500 dark:bg-blue-700 text-white font-bold py-2 px-4 rounded hover:bg-blue-800 dark:hover:bg-blue-600">Add to Cart</button>
    </div>
  </div>
</div>

Data Visualization Components

A complex dashboard data visualization component with retro/vintage aesthetic and complementary color schemes.

Open Preview

                <div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg dark:bg-gray-900">
    <h1 class="text-3xl font-bold mb-4">Data Visualization Dashboard</h1>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-red-500 p-4 rounded-lg shadow-md">
            <h2 class="text-xl font-semibold">User Statistics</h2>
            <p class="text-lg">Total Users: 1,200</p>
            <p class="text-lg">Active: 850</p>
            <img src="https://picsum.photos/300/200?random=1" alt="User Stats" class="mt-4 rounded-lg" />
        </div>
        <div class="bg-blue-500 p-4 rounded-lg shadow-md">
            <h2 class="text-xl font-semibold">Sales Overview</h2>
            <p class="text-lg">Total Sales: $20,000</p>
            <p class="text-lg">Monthly Growth: 15%</p>
            <img src="https://picsum.photos/300/200?random=2" alt="Sales Overview" class="mt-4 rounded-lg" />
        </div>
        <div class="bg-green-500 p-4 rounded-lg shadow-md">
            <h2 class="text-xl font-semibold">Performance Goals</h2>
            <p class="text-lg">Gained 300 New Users</p>
            <p class="text-lg">Target Achieved: 95%</p>
            <img src="https://picsum.photos/300/200?random=3" alt="Performance Goals" class="mt-4 rounded-lg" />
        </div>
    </div>
    <div class="mt-6 bg-gray-700 p-4 rounded-lg shadow-md dark:bg-gray-800">
        <h2 class="text-xl font-semibold">Recent Activities</h2>
        <ul class="list-disc list-inside">
            <li><img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="inline w-8 h-8 rounded-full"> John Doe added a new item</li>
            <li><img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="inline w-8 h-8 rounded-full"> Mike Smith reached 1,000 sales</li>
            <li><img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="inline w-8 h-8 rounded-full"> Alex Johnson updated their profile</li>
        </ul>
    </div>
</div>

Brutalism Dropdown Menu

A brutalist-style dropdown menu component in grayscale, suited for business websites. Features a complex, multi-element interface with responsive design and dark mode support using Tailwind CSS.

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-offset-gray-100 focus:ring-black dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-700" 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" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
    <div class="py-1" role="none">
      <!-- Active: "bg-gray-100 text-gray-900", Not Active: "text-gray-700" -->
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm dark:text-gray-300 dark:hover:bg-gray-700 hover:bg-gray-100" role="menuitem" tabindex="-1" id="menu-item-0">
        <div class="flex items-center">
          <img class="h-6 w-6 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
          <span>Account Settings</span>
        </div>
      </a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm dark:text-gray-300 dark:hover:bg-gray-700 hover:bg-gray-100" role="menuitem" tabindex="-1" id="menu-item-1">
         <div class="flex items-center">
          <img class="h-6 w-6 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/1.jpg" alt="">
          <span>Support</span>
        </div>
      </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 dark:text-gray-300 dark:hover:bg-gray-700 hover:bg-gray-100" role="menuitem" tabindex="-1" id="menu-item-2">
           <div class="flex items-center">
            <svg class="h-4 w-4 mr-2" 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="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
            </svg>
            <span>Sign out</span>
          </div>
        </button>
      </form>
    </div>
  </div>
</div>

Product Gallery Component

A product gallery component with a brutalist design, grayscale color scheme, and moderate complexity. It is designed for a dashboard purpose and is responsive with dark theme support.

Open Preview

                <div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white p-6">
  <div class="container mx-auto">
    <h2 class="text-3xl font-bold mb-6 border-b-4 border-gray-900 dark:border-white pb-2">Product Gallery</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <div class="border-4 border-gray-900 dark:border-white p-4 relative">
        <img src="https://picsum.photos/seed/product1/400/300" alt="Product Image" class="mb-4 border-4 border-gray-900 dark:border-white">
        <h3 class="text-xl font-bold mb-2">Product Name 1</h3>
        <p class="text-gray-700 dark:text-gray-300 mb-4">A brief description of the product goes here. It's a fantastic product that will change your life.</p>
        <span class="text-2xl font-bold absolute top-4 right-4">$199.99</span>
        <button class="mt-4 px-4 py-2 bg-gray-900 dark:bg-white text-white dark:text-gray-900 font-bold border-2 border-gray-900 dark:border-white hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">Add to Cart</button>
      </div>
      <div class="border-4 border-gray-900 dark:border-white p-4 relative">
        <img src="https://picsum.photos/seed/product2/400/300" alt="Product Image" class="mb-4 border-4 border-gray-900 dark:border-white">
        <h3 class="text-xl font-bold mb-2">Product Name 2</h3>
        <p class="text-gray-700 dark:text-gray-300 mb-4">Another amazing product with features you won't believe. Get yours today!</p>
         <span class="text-2xl font-bold absolute top-4 right-4">$249.00</span>
        <button class="mt-4 px-4 py-2 bg-gray-900 dark:bg-white text-white dark:text-gray-900 font-bold border-2 border-gray-900 dark:border-white hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">Add to Cart</button>
      </div>
      <div class="border-4 border-gray-900 dark:border-white p-4 relative">
        <img src="https://picsum.photos/seed/product3/400/300" alt="Product Image" class="mb-4 border-4 border-gray-900 dark:border-white">
        <h3 class="text-xl font-bold mb-2">Product Name 3</h3>
        <p class="text-gray-700 dark:text-gray-300 mb-4">You won't want to miss out on this one. Limited stock available!</p>
         <span class="text-2xl font-bold absolute top-4 right-4">$99.50</span>
        <button class="mt-4 px-4 py-2 bg-gray-900 dark:bg-white text-white dark:text-gray-900 font-bold border-2 border-gray-900 dark:border-white hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">Add to Cart</button>
      </div>
    </div>
  </div>
</div>

Neumorphism Vibrant Heat Maps Component

A responsive Heat Maps Component with Neumorphism design, using a vibrant color scheme and moderate complexity. Includes dark mode support and hover effects. Built with plain HTML and Tailwind CSS classes, supplemented with a small CSS block for custom Neumorphism shadows and color levels.

Open Preview

                <!-- Heat Maps Component - Neumorphism, Vibrant, Responsive, Dark Mode, No JS -->

<div class="p-4 transition-colors duration-300 neumorphism-container">

  <!-- Component Title -->
  <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200">Annual Contribution Summary</h3>

  <div class="flex overflow-x-auto pb-4">
    <!-- Month Labels (simplified) -->
    <div class="flex flex-col mr-2 text-sm text-gray-600 dark:text-gray-400">
        <span class="h-5 mb-1"></span> <!-- Spacing for alignment -->
        <span class="h-5 mb-1">Jan</span>
        <span class="h-5 mb-1">Feb</span>
        <span class="h-5 mb-1">Mar</span>
        <span class="h-5 mb-1">Apr</span>
        <span class="h-5 mb-1">May</span>
        <span class="h-5 mb-1">Jun</span>
        <span class="h-5 mb-1">Jul</span>
        <span class="h-5 mb-1">Aug</span>
        <span class="h-5 mb-1">Sep</span>
        <span class="h-5 mb-1">Oct</span>
        <span class="h-5 mb-1">Nov</span>
        <span class="h-5 mb-1">Dec</span>
      </div>


    <!-- Heatmap Grid - Simplified representation of columns (weeks/days) -->
    <div class="grid grid-flow-col grid-rows-12 gap-1">
      <!-- Column representing a week/period -->
      <div class="flex flex-col gap-1">
        <!-- Cells representing days -->
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-3 hover:level-3-hover cursor-pointer" title="Level 3"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-4 hover:level-4-hover cursor-pointer" title="Level 4"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-3 hover:level-3-hover cursor-pointer" title="Level 3"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
      </div>

       <!-- Repeat columns for more data points -->
      <div class="flex flex-col gap-1">
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-3 hover:level-3-hover cursor-pointer" title="Level 3"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-4 hover:level-4-hover cursor-pointer" title="Level 4"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-4 hover:level-4-hover cursor-pointer" title="Level 4"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover-inner cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
         <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-3 hover:level-3-hover cursor-pointer" title="Level 3"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-4 hover:level-4-hover cursor-pointer" title="Level 4"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
      </div>
        <!-- Add more columns for a fuller year representation -->
         <div class="flex flex-col gap-1">
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-3 hover:level-3-hover cursor-pointer" title="Level 3"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-4 hover:level-4-hover cursor-pointer" title="Level 4"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-3 hover:level-3-hover cursor-pointer" title="Level 3"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
      </div>

       <div class="flex flex-col gap-1">
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-3 hover:level-3-hover cursor-pointer" title="Level 3"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-4 hover:level-4-hover cursor-pointer" title="Level 4"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-4 hover:level-4-hover cursor-pointer" title="Level 4"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover-inner cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
         <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-3 hover:level-3-hover cursor-pointer" title="Level 3"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-4 hover:level-4-hover cursor-pointer" title="Level 4"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
      </div>
         <div class="flex flex-col gap-1">
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-3 hover:level-3-hover cursor-pointer" title="Level 3"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-4 hover:level-4-hover cursor-pointer" title="Level 4"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-3 hover:level-3-hover cursor-pointer" title="Level 3"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
      </div>

       <div class="flex flex-col gap-1">
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-3 hover:level-3-hover cursor-pointer" title="Level 3"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-4 hover:level-4-hover cursor-pointer" title="Level 4"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-4 hover:level-4-hover cursor-pointer" title="Level 4"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover-inner cursor-pointer" title="Level 1"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-0 hover:level-0-hover cursor-pointer" title="Level 0"></div>
         <div class="w-5 h-5 rounded-sm neumorphism-cell level-2 hover:level-2-hover cursor-pointer" title="Level 2"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-3 hover:level-3-hover cursor-pointer" title="Level 3"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-4 hover:level-4-hover cursor-pointer" title="Level 4"></div>
        <div class="w-5 h-5 rounded-sm neumorphism-cell level-1 hover:level-1-hover cursor-pointer" title="Level 1"></div>
      </div>
    </div>
  </div>

  <!-- Legend -->
   <div class="flex justify-end items-center text-sm mt-4 text-gray-600 dark:text-gray-400">
      Less
       <div class="w-4 h-4 rounded-sm neumorphism-cell level-0 ml-2"></div>
       <div class="w-4 h-4 rounded-sm neumorphism-cell level-1 ml-1"></div>
       <div class="w-4 h-4 rounded-sm neumorphism-cell level-2 ml-1"></div>
       <div class="w-4 h-4 rounded-sm neumorphism-cell level-3 ml-1"></div>
       <div class="w-4 h-4 rounded-sm neumorphism-cell level-4 ml-1 mr-2"></div>
      More
   </div>

</div>

<!-- Add custom CSS for Neumorphism and color levels -->
<!-- These styles are necessary to achieve the specific Neumorphism effect
     and vibrant color levels not available via standard Tailwind utilities alone. -->
<style>
/* Base background for Neumorphism */
/* Apply this to the body or the container containing the component for the full effect */
/* body {
  background-color: #e0e0e0;
} */

/* Neumorphism container style */
.neumorphism-container {
  background: #e0e0e0; /* Base light mode color */
  border-radius: 12px;
  padding-top: 1rem; /* pt-4 */
  padding-bottom: 1rem; /* pb-4 */
  padding-left: 1rem; /* pl-4 */
   padding-right: 1rem; /* pr-4 */
  /* Convex effect */
  box-shadow: 7px 7px 15px #bebebe,
             -7px -7px 15px #ffffff;
}

/* Dark mode Neumorphism container style */
.dark .neumorphism-container {
  background: #333333; /* Base dark mode color */
   box-shadow: 7px 7px 15px #222222,
              -7px -7px 15px #444444;
}


/* Neumorphism cell base style */
.neumorphism-cell {
  background: #e0e0e0; /* Match container background initially */
   box-shadow: 2px 2px 5px #bebebe,
              -2px -2px 5px #ffffff;
   transition: all 0.1s ease-in-out; /* Smooth transition for hover */
}

/* Dark mode Neumorphism cell base style */
.dark .neumorphism-cell {
   background: #333333; /* Match dark container background */
   box-shadow: 2px 2px 5px #222222,
              -2px -2px 5px #444444;
}


/* Vibrant Color Levels (Light Mode) */
.level-0 { background-color: #e0e0e0; } /* Base/none */
.level-1 { background-color: #a7f3d0; } /* Green 200 */
.level-2 { background-color: #34d399; } /* Green 500 */
.level-3 { background-color: #059669; } /* Green 700 */
.level-4 { background-color: #047857; } /* Green 800 - More vibrant */

/* Vibrant Color Levels (Dark Mode) */
.dark .level-0 { background-color: #333333; } /* Base/none */
.dark .level-1 { background-color: #064e3b; } /* Green 900 dark inverse */
.dark .level-2 { background-color: #065f46; } /* Green 800 dark inverse */
.dark .level-3 { background-color: #047857; } /* Green 700 dark inverse */
.dark .level-4 { background-color: #059669; } /* Green 600 dark inverse */


/* Hover effect: Simulate pressing in */
.neumorphism-cell.hover\:level-0-hover:hover {
  box-shadow: inset 2px 2px 5px #bebebe,
             inset -2px -2px 5px #ffffff;
}
.dark .neumorphism-cell.hover\:level-0-hover:hover {
   box-shadow: inset 2px 2px 5px #222222,
              inset -2px -2px 5px #444444;
}


.neumorphism-cell.hover\:level-1-hover:hover {
   box-shadow: inset 2px 2px 5px #86efac, /* Darker vibrant shadow */
              inset -2px -2px 5px #d1fae5; /* Lighter vibrant highlight */
}
.dark .neumorphism-cell.hover\:level-1-hover:hover {
    box-shadow: inset 2px 2px 5px #059669,
              inset -2px -2px 5px #0f766e;
}


.neumorphism-cell.hover\:level-2-hover:hover {
   box-shadow: inset 2px 2px 5px #10b981,
              inset -2px -2px 5px #6ee7b7;
}
.dark .neumorphism-cell.hover\:level-2-hover:hover {
   box-shadow: inset 2px 2px 5px #047857,
              inset -2px -2px 5px #1d403b;
}

.neumorphism-cell.hover\:level-3-hover:hover {
   box-shadow: inset 2px 2px 5px #047857,
              inset -2px -2px 5px #06d6a0;
}
.dark .neumorphism-cell.hover\:level-3-hover:hover {
   box-shadow: inset 2px 2px 5px #059669,
              inset -2px -2px 5px #022c22;
}

.neumorphism-cell.hover\:level-4-hover:hover {
   box-shadow: inset 2px 2px 5px #065f46,
              inset -2px -2px 5px #08e5a4;
}
.dark .neumorphism-cell.hover\:level-4-hover:hover {
   box-shadow: inset 2px 2px 5px #047857,
              inset -2px -2px 5px #011f17;
}

/* Note: Ensure parent container or body has a background color matching the neumorphism base */
/* For the preview, you might need to add a base background to the html or body */
/*
html, body {
  background-color: #e0e0e0; /* Light mode base *
  transition: background-color 0.3s ease;
}
.dark html, .dark body {
   background-color: #333333; /* Dark mode base *
}
*/

</style>

Complex CAPTCHA Component

A complex CAPTCHA component for social media applications with dark mode and vibrant colors.

Open Preview

                <div class="flex items-center justify-center h-screen bg-gray-900 dark:bg-black p-6">
  <div class="bg-gray-800 dark:bg-gray-900 rounded-lg shadow-xl p-8 w-full max-w-md">
    <h2 class="text-2xl font-bold text-purple-400 mb-6 text-center">CAPTCHA Verification</h2>
    
    <div class="mb-6">
      <label class="block text-yellow-400 text-sm font-semibold mb-2" for="captcha-text">
        Please type the characters you see in the image:
      </label>
      <div class="flex items-center space-x-4">
        <img src="https://picsum.photos/150/60?random=1" alt="CAPTCHA Image" class="rounded">
        <input
          class="shadow appearance-none border border-gray-700 bg-gray-900 dark:bg-gray-800 rounded w-full py-3 px-4 text-teal-400 leading-tight focus:outline-none focus:ring-2 focus:ring-teal-500"
          id="captcha-text"
          type="text"
          placeholder="Enter characters here"
        >
      </div>
    </div>
    
    <div class="mb-6">
      <label class="block text-yellow-400 text-sm font-semibold mb-2" for="captcha-audio">
        Alternatively, listen to the audio and type the numbers:
      </label>
      <div class="flex items-center space-x-4">
        <audio controls class="w-full">
          <source src="your-audio-file.mp3" type="audio/mpeg">
          Your browser does not support the audio element.
        </audio>
      </div>
    </div>

    <div class="mb-6">
        <label class="block text-yellow-400 text-sm font-semibold mb-2" for="captcha-drag-drop">
          Drag and drop the slider to match the image:
        </label>
        <div class="relative w-full h-10 bg-gray-700 rounded-full">
            <div class="absolute top-0 left-0 h-10 w-10 bg-pink-500 rounded-full shadow flex items-center justify-center text-white font-bold cursor-pointer" style="left: 0%;">
                drag
            </div>
            <div class="absolute top-0 right-0 h-10 w-10 bg-purple-500 rounded-full shadow flex items-center justify-center text-white font-bold">
                drop
            </div>
        </div>
    </div>
    
    <div class="flex items-center justify-between">
      <button
        class="bg-teal-500 hover:bg-teal-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-300 ease-in-out transform hover:-translate-y-1"
        type="button"
      >
        Verify
      </button>
      <button
        class="inline-block align-baseline font-bold text-sm text-purple-400 hover:text-purple-600"
        type="button"
      >
        Cannot see or hear?
      </button>
    </div>
  </div>
</div>

Shopping Cart Component

A retro/vintage themed shopping cart component with monochromatic color scheme, moderate complexity, responsive design, and dark mode support. Suitable for business/corporate websites.

Open Preview

                <div class="container mx-auto p-4">
  <div class="max-w-md mx-auto rounded-lg shadow-lg bg-white dark:bg-gray-800 overflow-hidden">
    <div class="px-6 py-4">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Shopping Cart</h2>
      <div class="flex items-center mb-4">
        <img src="https://picsum.photos/seed/retro1/80/80" alt="Product Image" class="w-16 h-16 object-cover rounded-lg dark:brightness-75">
        <div class="ml-4">
          <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Product Name 1</h3>
          <p class="text-gray-600 dark:text-gray-400">$19.99</p>
        </div>
        <div class="ml-auto">
          <span class="text-gray-700 dark:text-gray-200">Qty: 1</span>
        </div>
      </div>
      <div class="flex items-center mb-4">
        <img src="https://picsum.photos/seed/retro2/80/80" alt="Product Image" class="w-16 h-16 object-cover rounded-lg dark:brightness-75">
        <div class="ml-4">
          <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Product Name 2</h3>
          <p class="text-gray-600 dark:text-gray-400">$29.99</p>
        </div>
        <div class="ml-auto">
          <span class="text-gray-700 dark:text-gray-200">Qty: 2</span>
        </div>
      </div>
      <div class="border-t border-gray-200 dark:border-gray-600 pt-4">
        <div class="flex justify-between">
          <span class="text-lg font-semibold text-gray-800 dark:text-white">Total:</span>
          <span class="text-lg font-semibold text-gray-800 dark:text-white">$79.97</span>
        </div>
      </div>
    </div>
    <div class="bg-gray-50 dark:bg-gray-700 px-6 py-4">
      <button class="w-full bg-blue-500 dark:bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Checkout</button>
    </div>
  </div>
</div>

E-commerce Pagination

A responsive Material Design inspired pagination component with dark theme support, suitable for e-commerce product listings. Implements a complementary color scheme and moderate complexity with interactive button states using only HTML and Tailwind CSS.

Open Preview

                <nav aria-label="Pagination" class="flex justify-center items-center space-x-2 my-4 dark:bg-gray-800 p-2 rounded-md">
  <button class="px-3 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">
    Previous
  </button>
  <a href="#" class="px-3 py-2 text-sm font-medium text-gray-700 bg-blue-200 rounded-md hover:bg-blue-300 dark:bg-blue-700 dark:text-blue-200 dark:hover:bg-blue-600">
    1
  </a>
  <a href="#" class="px-3 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">
    2
  </a>
  <a href="#" aria-current="page" class="px-3 py-2 text-sm font-medium text-white bg-blue-500 rounded-md dark:bg-blue-500">
    3
  </a>
  <a href="#" class="px-3 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">
    4
  </a>
  <a href="#" class="px-3 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">
    5
  </a>
  <button class="px-3 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">
    Next
  </button>
</nav>

DarkTriadicSimpleBusinessHeader

Responsive Header Component with Dark Mode Support for Business Websites

Open Preview

                <header class="bg-gray-900 text-gray-300 dark:bg-gray-dark dark:text-gray-light shadow-md">
  <div class="container mx-auto px-6 py-4">
    <div class="flex items-center justify-between">
      <div class="text-xl font-bold text-white dark:text-white">Business Name</div>
      <nav class="space-x-4">
        <a href="#" class="hover:text-white dark:hover:text-white">Home</a>
        <a href="#" class="hover:text-white dark:hover:text-white">About</a>
        <a href="#" class="hover:text-white dark:hover:text-white">Services</a>
        <a href="#" class="hover:text-white dark:hover:text-white">Contact</a>
      </nav>
    </div>
  </div>
</header>

RetroVintage_CheckoutFormComponent

Retro/Vintage Checkout Form with Earth tones, Moderate complexity, and Dark Mode Support

Open Preview

                <div class="container mx-auto p-6 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-xl font-mono">
  <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Checkout Information</h2>
  <form>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <div class="mb-4">
        <label for="full_name" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Full Name</label>
        <input type="text" id="full_name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your full name">
      </div>
      <div class="mb-4">
        <label for="email" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Email Address</label>
        <input type="email" id="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your email address">
      </div>
    </div>

    <div class="mb-4">
      <label for="address" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Address</label>
      <input type="text" id="address" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your address">
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <div class="mb-4">
        <label for="city" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">City</label>
        <input type="text" id="city" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your city">
      </div>
      <div class="mb-4">
        <label for="state" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">State</label>
        <input type="text" id="state" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your state">
      </div>
      <div class="mb-4">
        <label for="zip" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Zip Code</label>
        <input type="text" id="zip" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your zip code">
      </div>
    </div>

    <div class="mb-6">
      <label for="card_number" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Credit Card Number</label>
      <input type="text" id="card_number" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your credit card number">
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <div class="mb-6">
        <label for="expiry_date" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Expiry Date</label>
        <input type="text" id="expiry_date" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="MM/YY">
      </div>
      <div class="mb-6">
        <label for="cvv" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">CVV</label>
        <input type="text" id="cvv" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="CVV">
      </div>
        <div class="mb-6">
            <label for="country" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Country</label>
            <input type="text" id="country" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your country">
        </div>
    </div>

    <div class="flex items-center justify-between">
      <button class="bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline dark:bg-green-800 dark:hover:bg-green-900" type="button">
        Submit Payment
      </button>
    </div>
  </form>
</div>

1 ... 268 269 270 271 272 ... 335

Search Components

Categories

All Components