Search Components

All Components

Browse all available Tailwind CSS components

Columns Component

A responsive columns component designed for portfolio showcasing with dark mode support, using a grayscale color scheme and Tailwind CSS.

Open Preview

                <div class="container mx-auto px-4 py-8">
    <h2 class="text-3xl font-bold text-white text-center mb-8">Portfolio Showcase</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-gray-800 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/400/300?random=1" alt="Project 1" class="w-full h-40 object-cover rounded-t-lg">
            <h3 class="text-xl font-semibold text-white mt-4">Project Title 1</h3>
            <p class="text-gray-400 mt-2">Brief description of the project goes here. Explaining the key features and technologies used.</p>
            <div class="flex items-center mt-4">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-700">
                <span class="ml-2 text-gray-300">John Doe</span>
            </div>
        </div>
        <div class="bg-gray-800 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/400/300?random=2" alt="Project 2" class="w-full h-40 object-cover rounded-t-lg">
            <h3 class="text-xl font-semibold text-white mt-4">Project Title 2</h3>
            <p class="text-gray-400 mt-2">Brief description of the project goes here. Explaining the key features and technologies used.</p>
            <div class="flex items-center mt-4">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-700">
                <span class="ml-2 text-gray-300">Jane Smith</span>
            </div>
        </div>
        <div class="bg-gray-800 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/400/300?random=3" alt="Project 3" class="w-full h-40 object-cover rounded-t-lg">
            <h3 class="text-xl font-semibold text-white mt-4">Project Title 3</h3>
            <p class="text-gray-400 mt-2">Brief description of the project goes here. Explaining the key features and technologies used.</p>
            <div class="flex items-center mt-4">
                <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-700">
                <span class="ml-2 text-gray-300">Alice Johnson</span>
            </div>
        </div>
        <div class="bg-gray-800 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/400/300?random=4" alt="Project 4" class="w-full h-40 object-cover rounded-t-lg">
            <h3 class="text-xl font-semibold text-white mt-4">Project Title 4</h3>
            <p class="text-gray-400 mt-2">Brief description of the project goes here. Explaining the key features and technologies used.</p>
            <div class="flex items-center mt-4">
                <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-700">
                <span class="ml-2 text-gray-300">Mark Brown</span>
            </div>
        </div>
        <div class="bg-gray-800 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/400/300?random=5" alt="Project 5" class="w-full h-40 object-cover rounded-t-lg">
            <h3 class="text-xl font-semibold text-white mt-4">Project Title 5</h3>
            <p class="text-gray-400 mt-2">Brief description of the project goes here. Explaining the key features and technologies used.</p>
            <div class="flex items-center mt-4">
                <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-700">
                <span class="ml-2 text-gray-300">Emma Williams</span>
            </div>
        </div>
        <div class="bg-gray-800 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/400/300?random=6" alt="Project 6" class="w-full h-40 object-cover rounded-t-lg">
            <h3 class="text-xl font-semibold text-white mt-4">Project Title 6</h3>
            <p class="text-gray-400 mt-2">Brief description of the project goes here. Explaining the key features and technologies used.</p>
            <div class="flex items-center mt-4">
                <img src="https://randomuser.me/api/portraits/men/6.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-700">
                <span class="ml-2 text-gray-300">Oliver Davis</span>
            </div>
        </div>
    </div>
</div>

Glassmorphism Mega Menu Component

Glassmorphism Mega Menu for Dashboard interfaces with Triadic color scheme. Features a frosted glass effect, responsive design, and dark mode support using Tailwind CSS.

Open Preview

                <nav class="backdrop-filter backdrop-blur-lg bg-opacity-30 bg-white py-4 px-6 sticky top-0 z-50 dark:bg-black dark:bg-opacity-30">
    <div class="container mx-auto flex justify-between items-center">
        <a href="#" class="text-xl font-bold text-blue-600 dark:text-blue-400">Dashboard</a>
        <div class="hidden md:flex space-x-6">
            <div class="relative group">
                <button class="text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 cursor-default">Data</button>
                <div class="absolute hidden group-hover:block backdrop-filter backdrop-blur-lg bg-opacity-30 bg-white p-6 rounded-lg shadow-lg mt-2 dark:bg-black dark:bg-opacity-30">
                    <div class="grid grid-cols-2 gap-4">
                        <a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Overview</a>
                        <a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Reports</a>
                        <a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Analytics</a>
                        <a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Trends</a>
                    </div>
                </div>
            </div>
            <div class="relative group">
                <button class="text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 cursor-default">Management</button>
                <div class="absolute hidden group-hover:block backdrop-filter backdrop-blur-lg bg-opacity-30 bg-white p-6 rounded-lg shadow-lg mt-2 dark:bg-black dark:bg-opacity-30">
                    <div class="grid grid-cols-2 gap-4">
                        <a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Users</a>
                        <a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Settings</a>
                        <a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Permissions</a>
                    </div>
                </div>
            </div>
            <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Settings</a>
            <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Help</a>
        </div>
        <button class="md:hidden text-gray-800 dark:text-gray-200 focus:outline-none">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
        </button>
    </div>
    <div class="hidden md:hidden mobile-menu">
        <a href="#" class="block py-2 px-4 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">Data</a>
        <a href="#" class="block py-2 px-4 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">Management</a>
        <a href="#" class="block py-2 px-4 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">Settings</a>
        <a href="#" class="block py-2 px-4 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">Help</a>
    </div>
</nav>

Table of Contents Component

A responsive Table of Contents component styled in Material Design with vibrant colors, suitable for blogs and content consumption, including dark mode support and multiple interactive elements.

Open Preview

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Table of Contents</h2>
    <ul class="space-y-3">
        <li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded p-2 transition duration-200">
            <a href="#section1" class="flex items-center text-gray-600 dark:text-gray-200">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3">
                <span class="font-medium">Section 1: Introduction</span>
            </a>
        </li>
        <li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded p-2 transition duration-200">
            <a href="#section2" class="flex items-center text-gray-600 dark:text-gray-200">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3">
                <span class="font-medium">Section 2: Features</span>
            </a>
        </li>
        <li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded p-2 transition duration-200">
            <a href="#section3" class="flex items-center text-gray-600 dark:text-gray-200">
                <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3">
                <span class="font-medium">Section 3: Implementation</span>
            </a>
        </li>
        <li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded p-2 transition duration-200">
            <a href="#section4" class="flex items-center text-gray-600 dark:text-gray-200">
                <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3">
                <span class="font-medium">Section 4: Conclusion</span>
            </a>
        </li>
    </ul>
    <div class="mt-6">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Images</h3>
        <div class="grid grid-cols-2 gap-4 mt-2">
            <img src="https://picsum.photos/200/150?random=1" alt="Random Image 1" class="rounded-lg shadow">
            <img src="https://picsum.photos/200/150?random=2" alt="Random Image 2" class="rounded-lg shadow">
            <img src="https://picsum.photos/200/150?random=3" alt="Random Image 3" class="rounded-lg shadow">
            <img src="https://picsum.photos/200/150?random=4" alt="Random Image 4" class="rounded-lg shadow">
        </div>
    </div>
</div>

Responsive Navigation Component

Responsive Navigation Component with Microinteractions, Grayscale color scheme, and Simple complexity.

Open Preview

                <nav class="bg-white dark:bg-gray-800 shadow">
  <div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
    <div class="relative flex items-center justify-between h-16">
      <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
        <!-- Mobile menu button-->
        <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
           <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
          <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
      <div class="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
        <div class="flex-shrink-0">
          <span class="text-xl font-bold text-gray-900 dark:text-white">Logo</span>
        </div>
        <div class="hidden sm:block sm:ml-6">
          <div class="flex space-x-4">
            <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
            <a href="#" class="text-gray-900 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium" aria-current="page">Dashboard</a>

            <a href="#" class="text-gray-900 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Team</a>

            <a href="#" class="text-gray-900 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Projects</a>

            <a href="#" class="text-gray-900 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Calendar</a>
          </div>
        </div>
      </div>
      <div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
        <button type="button" class="bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
          <span class="sr-only">View notifications</span>
          <!-- Heroicon name: outline/bell -->
          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
          </svg>
        </button>

        <!-- Profile dropdown -->
        <div class="ml-3 relative">
          <div>
            <button type="button" class="bg-gray-800 flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
              <span class="sr-only">Open user menu</span>
              <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Mobile menu, show/hide based on menu state. -->
  <div class="sm:hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1">
      <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
      <a href="#" class="text-gray-900 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium" aria-current="page">Dashboard</a>

      <a href="#" class="text-gray-900 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Team</a>

      <a href="#" class="text-gray-900 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Projects</a>

      <a href="#" class="text-gray-900 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Calendar</a>
    </div>
  </div>
</nav>

Shopping Cart Component

Shopping Cart Component with Material Design, Monochromatic color scheme, and Moderate complexity for E-commerce. Responsive design with dark theme support using Tailwind CSS.

Open Preview

                <div class="container mx-auto p-4 bg-gray-lightest dark:bg-gray-dark">
  <h1 class="text-2xl font-bold mb-4 text-gray-darkest dark:text-gray-lightest">Shopping Cart</h1>

  <div class="shadow-md rounded-lg overflow-hidden">
    <!-- Cart Item -->
    <div class="flex items-center p-4 bg-white dark:bg-gray-darker border-b border-gray-200 dark:border-gray-700">
      <img src="https://picsum.photos/seed/item1/100/100" alt="Product Image" class="w-16 h-16 object-cover rounded-md">
      <div class="ml-4 flex-grow">
        <h2 class="text-lg font-semibold text-gray-darkest dark:text-gray-lightest">Product Name 1</h2>
        <p class="text-gray-dark dark:text-gray-light">Price: $19.99</p>
        <div class="flex items-center mt-2">
          <label for="quantity1" class="mr-2 text-gray-dark dark:text-gray-light">Quantity:</label>
          <input type="number" id="quantity1" name="quantity1" value="1" min="1" class="w-16 px-2 py-1 border rounded dark:bg-gray-darkest dark:text-gray-lightest">
        </div>
      </div>
      <button class="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-600">Remove</button>
    </div>

    <!-- Cart Item -->
    <div class="flex items-center p-4 bg-white dark:bg-gray-darker border-b border-gray-200 dark:border-gray-700">
      <img src="https://picsum.photos/seed/item2/100/100" alt="Product Image" class="w-16 h-16 object-cover rounded-md">
      <div class="ml-4 flex-grow">
        <h2 class="text-lg font-semibold text-gray-darkest dark:text-gray-lightest">Product Name 2</h2>
        <p class="text-gray-dark dark:text-gray-light">Price: $29.99</p>
        <div class="flex items-center mt-2">
          <label for="quantity2" class="mr-2 text-gray-dark dark:text-gray-light">Quantity:</label>
          <input type="number" id="quantity2" name="quantity2" value="2" min="1" class="w-16 px-2 py-1 border rounded dark:bg-gray-darkest dark:text-gray-lightest">
        </div>
      </div>
      <button class="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-600">Remove</button>
    </div>

    <!-- Total -->
    <div class="flex justify-between items-center p-4 bg-white dark:bg-gray-darker">
      <span class="text-lg font-semibold text-gray-darkest dark:text-gray-lightest">Total:</span>
      <span class="text-lg font-bold text-gray-darkest dark:text-gray-lightest">$79.97</span>
    </div>
  </div>

  <!-- Checkout Button -->
  <div class="mt-4 text-right">
    <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded dark:bg-blue-800 dark:hover:bg-blue-900">
      Checkout
    </button>
  </div>
</div>

File Viewer Component

Responsive File Viewer Component with Dark Mode Support

Open Preview

                
<div class="container mx-auto p-6">

  <!-- File Header -->
  <div class="flex items-center justify-between mb-6">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white">File Viewer</h2>
    <div class="flex items-center space-x-4">
      <button class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300 focus:outline-none">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
        </svg>
      </button>
      <button class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300 focus:outline-none">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
        </svg>
      </button>
    </div>
  </div>

  <!-- File List -->
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">

    <!-- File Card -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
      <div class="p-4">
        <div class="flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-500 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-5m3 5v-5m3 5v-5M9 8h6m-be 4h6m-3-4a3 3 0 01-3-3V4a3 3 0 013-3h2a3 3 0 013 3v1a3 3 0 01-3 3h-2a3 3 0 01-3-3z" />
          </svg>
          <div>
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Document.pdf</h3>
            <p class="text-sm text-gray-600 dark:text-gray-400">1.2 MB</p>
          </div>
        </div>
      </div>
      <div class="bg-gray-100 dark:bg-gray-700 p-4 flex justify-end">
        <button class="text-sm text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-600 focus:outline-none">Download</button>
      </div>
    </div>

    <!-- File Card -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <div class="p-4">
          <div class="flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-green-500 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
            </svg>
            <div>
              <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Image.png</h3>
              <p class="text-sm text-gray-600 dark:text-gray-400">800 KB</p>
            </div>
          </div>
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 p-4 flex justify-end">
          <button class="text-sm text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-600 focus:outline-none">View</button>
        </div>
      </div>

    <!-- File Card -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <div class="p-4">
          <div class="flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-yellow-500 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-7.072a9 9 0 010 12.728m-9.193-2.829a5 5 0 010-7.072M6.343 4.515a9 9 0 010 12.728M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
            </svg>
            <div>
              <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Audio.mp3</h3>
              <p class="text-sm text-gray-600 dark:text-gray-400">3.5 MB</p>
            </div>
          </div>
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 p-4 flex justify-end">
          <button class="text-sm text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-600 focus:outline-none">Listen</button>
        </div>
      </div>

    <!-- File Card -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <div class="p-4">
          <div class="flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-red-500 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M3 8h18M3 16h18" />
            </svg>
            <div>
              <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Video.mp4</h3>
              <p class="text-sm text-gray-600 dark:text-gray-400">15 MB</p>
            </div>
          </div>
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 p-4 flex justify-end">
          <button class="text-sm text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-600 focus:outline-none">Watch</button>
        </div>
      </div>

  </div>

</div>

Authentication Components Component

A responsive dark mode authentication component for dashboards, utilizing earth tones for a natural aesthetic.

Open Preview

                <div class="min-h-screen bg-gray-800 text-gray-100 flex items-center justify-center">
    <div class="bg-gray-900 dark:bg-gray-800 p-8 rounded-lg shadow-md w-full max-w-sm">
        <h1 class="text-2xl font-semibold mb-4 text-center">Sign In</h1>
        <form>
            <div class="mb-4">
                <label class="block text-sm mb-2" for="email">Email</label>
                <input class="w-full p-2 bg-gray-700 text-gray-300 rounded focus:outline-none focus:ring focus:ring-earth-500" type="email" id="email" placeholder="[email protected]">
            </div>
            <div class="mb-6">
                <label class="block text-sm mb-2" for="password">Password</label>
                <input class="w-full p-2 bg-gray-700 text-gray-300 rounded focus:outline-none focus:ring focus:ring-earth-500" type="password" id="password" placeholder="••••••••">
            </div>
            <button class="w-full bg-earth-500 text-white py-2 rounded focus:outline-none hover:bg-earth-600 transition duration-200" type="submit">Log In</button>
        </form>
        <p class="mt-4 text-sm text-center">
            <a href="#" class="text-earth-400 hover:underline">Forgot Password?</a>
        </p>
        <div class="flex items-center justify-center mt-6">
            <span class="w-1/4 border-b border-gray-600"></span>
            <span class="mx-2 text-gray-400">or</span>
            <span class="w-1/4 border-b border-gray-600"></span>
        </div>
        <button class="flex items-center justify-center w-full bg-earth-500 text-white py-2 mt-4 rounded focus:outline-none hover:bg-earth-600 transition duration-200">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2">
            Sign in with Google
        </button>
    </div>
</div>

360° Viewer Component

A simple and responsive 360° Viewer Component designed for e-commerce with engaging microinteractions and a triadic color scheme, supporting dark mode.

Open Preview

                <div class="flex flex-col items-center justify-center w-full h-screen bg-gray-100 dark:bg-gray-800 transition-all duration-300 p-5">
    <!-- Title -->
    <h1 class="text-2xl font-bold text-gray-800 dark:text-white mb-5">360° Product Viewer</h1>
    
    <!-- 360° Image Viewer -->
    <div class="relative w-full max-w-lg overflow-hidden rounded-lg shadow-lg bg-white dark:bg-gray-900">
        <img src="https://picsum.photos/600/400?random=1" alt="Product Image" class="w-full transition-transform duration-500 ease-in-out transform hover:scale-105" />
        <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-30 opacity-0 hover:opacity-100 transition-opacity duration-300">
            <span class="text-white text-lg">Hover to view</span>
        </div>
    </div>
    
    <!-- Product Details -->
    <div class="mt-5 text-center">
        <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Stylish and Modern Product</h2>
        <p class="text-gray-600 dark:text-gray-400">This product is perfect for your day-to-day activities and brings a fresh touch to your style.</p>
        <div class="flex items-center justify-center space-x-4 mt-4">
            <span class="text-lg font-bold text-gray-800 dark:text-white">$29.99</span>
            <button class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition duration-200">Add to Cart</button>
        </div>
    </div>
</div>

360° Viewer Component

A responsive 360 degree viewer component designed for e-commerce, with support for dark mode. The styling is retro/vintage with a pastel color scheme. Uses only HTML and Tailwind CSS.

Open Preview

                <div class="retro-vintage bg-gradient-to-br from-pastel-pink to-pastel-blue text-pastel-gray min-h-screen p-8 dark:from-pastel-gray dark:to-pastel-purple dark:text-pastel-pink">

  <!-- Component Container -->
  <div class="max-w-4xl mx-auto bg-white bg-opacity-30 rounded-lg shadow-lg overflow-hidden dark:bg-gray-800 dark:bg-opacity-50">

    <!-- 360 Viewer Placeholder -->
    <div class="relative w-full" style="padding-top: 75%;">
      <!-- This is a placeholder for the 360 viewer. In a real application, a 360 viewer library/script would be initialized here. -->
      <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center bg-pastel-light-gray dark:bg-pastel-dark-blue">
        <p class="text-pastel-dark-gray text-xl font-bold dark:text-pastel-light-gray">360° Viewer Placeholder</p>
      </div>
    </div>

    <!-- Product Info & Controls (placeholder) -->
    <div class="p-6">
      <h2 class="text-2xl font-bold mb-4 dark:text-pastel-light-gray">Product Name</h2>
      <p class="text-pastel-dark-gray mb-4 dark:text-pastel-light-gray">Product description goes here. This is a placeholder.</p>
      
      <!-- Controls Placeholder -->
      <div class="flex justify-center space-x-4">
        <button class="px-4 py-2 bg-pastel-pink text-white rounded hover:bg-pastel-red transition duration-300 dark:bg-pastel-purple dark:hover:bg-pastel-pink">Rotate Left</button>
        <button class="px-4 py-2 bg-pastel-blue text-white rounded hover:bg-pastel-dark-blue transition duration-300 dark:bg-pastel-pink dark:hover:bg-pastel-purple">Rotate Right</button>
      </div>
    </div>

  </div>

</div>

Retro Dashboard Navigation Component

Retro/Vintage Navigation Component for Dashboard with Vibrant colors, Moderate complexity, responsiveness, and dark theme support.

Open Preview

                <nav class='bg-gradient-to-r from-purple-600 via-pink-600 to-red-600 p-4 text-white dark:from-purple-900 dark:via-pink-900 dark:to-red-900'>
  <div class='container mx-auto flex justify-between items-center'>
    <div class='text-2xl font-bold font-mono'>Dashboard</div>
    <ul class='flex space-x-4'>
      <li><a href='#' class='hover:underline text-yellow-300 dark:text-yellow-500'>Home</a></li>
      <li><a href='#' class='hover:underline text-yellow-300 dark:text-yellow-500'>Analytics</a></li>
      <li><a href='#' class='hover:underline text-yellow-300 dark:text-yellow-500'>Settings</a></li>
      <li><a href='#' class='hover:underline text-yellow-300 dark:text-yellow-500'>Profile</a></li>
    </ul>
  </div>
</nav>

1 ... 196 197 198 199 200 ... 335

Search Components

Categories

All Components