All Components

Browse all available Tailwind CSS components

Social Share Buttons Component

Social Share Buttons Component for E-commerce in Dark Mode using Tailwind CSS. Simple, responsive, and grayscale.

                <div class="flex justify-center items-center space-x-4 bg-gray-900 p-4">
  <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">
    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
      <path d="M12 0C5.373 0 0 5.373 0 12c0 5.083 3.79 9.362 8.75 10.346V14.25H6.404V11.89h2.346V9.13c0-2.323 1.4-3.582 3.47-3.582 1.004 0 1.865.076 2.12.11v2.58h-1.53c-1.228 0-1.47.595-1.47 1.467v1.911h2.8L14.2 14.25h-2.8v7.196C18.21 21.362 22 17.083 22 12 22 5.373 17.627 0 12 0z"/>
    </svg>
  </a>
  <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">
    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
      <path d="M24 4.557a9.83 9.83 0 01-2.828.775 4.932 4.932 0 002.165-2.724c-1.036.617-2.19 1.064-3.427 1.31a4.918 4.918 0 00-8.384 4.482A13.952 13.952 0 011.67 3.148a4.929 4.929 0 001.523 6.574 4.89 4.89 0 01-2.228-.616v.061a4.923 4.923 0 003.946 4.827 4.99C8.072 14.912 7.6 14.976 7.11 14.992a4.943 4.943 0 004.6 3.438 9.857 9.857 0 01-6.114 2.107c-.398 0-.79-.023-1.175-.068a13.995 13.995 0 007.55 2.209c9.053 0 13.999-7.496 13.999-13.986 0-.19.004-.379.014-.568A10.035 10.035 0 0024 4.557z"/>
    </svg>
  </a>
  <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">
    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
      <path d="M20.664 3.703a5.003 5.003 0 00-3.742-2.918c-2.462-.511-4.9-.171-7.127.734-2.495 1.01-4.46 3.098-5.44 5.623C3.43 9.55 3.2 12.268 4 15c.758 2.61 2.517 5.08 5.042 6.106 2.567 1.034 5.82.36 8.11-1.87C19.74 17.775 21.277 15.125 21.6 12.25c.325-2.876-.316-5.69-1.136-8.547zM15.636 15.895a2.837 2.837 0 01-4.159-.129L9.613 13.8l-2.783.67c-.77.185-1.5-.575-1.313-1.354l.67-2.786-1.95-2.05a.964.964 0 01.257-1.35c.3-.273.73-.466 1.2-.53l2.783-.67 1.136-2.61.024-.05c.247-.581.975-.817 1.53-.576a.967.967 0 01.595.89l.67 2.783 2.783-.67c.77-.185 1.5.575 1.313 1.354l-.67 2.786 1.95 2.05a.964.964 0 01-.257 1.35c-.3.273-.73.466-1.2.53l-2.783.67-1.136 2.61-.024.05a.965.965 0 01-.93.682z"/>
    </svg>
  </a>
</div>

Sidebar Navigation Component - Grayscale

Responsive Sidebar Navigation Component

Open Preview

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900">
    <!-- Sidebar -->
    <div class="flex flex-col w-64 bg-white dark:bg-gray-800 shadow-lg">
        <div class="flex items-center justify-center h-16 shadow-md">
            <span class="text-xl font-semibold text-gray-700 dark:text-white">Company Name</span>
        </div>
        <div class="flex flex-col flex-1 overflow-y-auto">
            <nav class="flex-1 px-2 py-4 bg-gray-200 dark:bg-gray-700">
                <a href="#" class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600 rounded">
                    <svg class="h-5 w-5 mr-2" 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>
                    Dashboard
                </a>
                <a href="#" class="flex items-center px-4 py-2 mt-2 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600 rounded">
                    <svg class="h-5 w-5 mr-2" 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="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
                    Projects
                </a>
                <a href="#" class="flex items-center px-4 py-2 mt-2 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600 rounded">
                    <svg class="h-5 w-5 mr-2" 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 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
                    Team
                </a>
                <a href="#" class="flex items-center px-4 py-2 mt-2 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600 rounded">
                    <svg class="h-5 w-5 mr-2" 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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.23-.14.447-.297.66-.48z"></path></svg>
                    Settings
                </a>
            </nav>
        </div>
    </div>
    <!-- Main content (placeholder) -->
    <div class="flex flex-col flex-1 overflow-y-auto">
        <div class="h-16 bg-white dark:bg-gray-800 shadow-md"></div>
        <div class="p-4">
            <!-- Your main content goes here -->
        </div>
    </div>
</div>

Simple Dashboard Component

Simple, responsive dashboard component with Material Design principles and vibrant color scheme.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
      <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Sales Overview</h2>
      <div class="flex items-center justify-between">
        <p class="text-3xl font-semibold text-blue-600 dark:text-blue-400">$12,345</p>
        <span class="text-green-500 dark:text-green-400">+5.2%</span>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
      <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">New Users</h2>
      <div class="flex items-center justify-between">
        <p class="text-3xl font-semibold text-purple-600 dark:text-purple-400">1,234</p>
        <span class="text-red-500 dark:text-red-400">-1.1%</span>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 col-span-full">
      <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Recent Activity</h2>
      <ul>
        <li class="flex items-center mb-4">
          <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
          <div>
            <p class="text-gray-800 dark:text-white font-semibold">John Doe</p>
            <p class="text-gray-600 dark:text-gray-400 text-sm">Purchased a product</p>
          </div>
        </li>
         <li class="flex items-center">
          <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
          <div>
            <p class="text-gray-800 dark:text-white font-semibold">Jane Smith</p>
            <p class="text-gray-600 dark:text-gray-400 text-sm">Left a review</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

A responsive footer navigation component for dashboards with dark theme support, featuring microinteractions on link hovers using triadic colors and complex elements. No JavaScript, only HTML with Tailwind CSS.

Open Preview

                <footer class="bg-blue-100 dark:bg-blue-900">
  <div class="container mx-auto px-6 py-8">
    <div class="flex flex-col items-center text-center">
      <div class="flex flex-wrap justify-center -mx-4">
        <a href="#" class="mx-4 text-sm text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300 ease-in-out transform hover:scale-110">About</a>
        <a href="#" class="mx-4 text-sm text-red-800 dark:text-red-200 hover:text-red-600 dark:hover:text-red-400 transition duration-300 ease-in-out transform hover:scale-110">Blog</a>
        <a href="#" class="mx-4 text-sm text-yellow-800 dark:text-yellow-200 hover:text-yellow-600 dark:hover:text-yellow-400 transition duration-300 ease-in-out transform hover:scale-110">Careers</a>
        <a href="#" class="mx-4 text-sm text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300 ease-in-out transform hover:scale-110">Contact Us</a>
      </div>
      <p class="mt-4 text-sm text-blue-800 dark:text-blue-200">&copy; 2023 Dashboard Inc. All rights reserved.</p>
    </div>
  </div>
</footer>

Shopping Cart Component

A responsive Shopping Cart component designed in Neumorphism style using Tailwind CSS, suitable for social media interfaces with dark theme support.

Open Preview

                <div class="container mx-auto p-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Shopping Cart</h2>
        <div class="space-y-4">
            <!-- Cart Item 1 -->
            <div class="flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-inner">
                <img src="https://picsum.photos/80?random=1" alt="Product Image" class="h-20 w-20 rounded-lg shadow-md">
                <div class="flex-1 mx-4">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name 1</h3>
                    <p class="text-gray-600 dark:text-gray-400">$19.99</p>
                </div>
                <button class="text-red-500 font-semibold dark:text-red-300 hover:text-red-700 dark:hover:text-red-400">Remove</button>
            </div>
            
            <!-- Cart Item 2 -->
            <div class="flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-inner">
                <img src="https://picsum.photos/80?random=2" alt="Product Image" class="h-20 w-20 rounded-lg shadow-md">
                <div class="flex-1 mx-4">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name 2</h3>
                    <p class="text-gray-600 dark:text-gray-400">$29.99</p>
                </div>
                <button class="text-red-500 font-semibold dark:text-red-300 hover:text-red-700 dark:hover:text-red-400">Remove</button>
            </div>
            
            <!-- Cart Item 3 -->
            <div class="flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-inner">
                <img src="https://picsum.photos/80?random=3" alt="Product Image" class="h-20 w-20 rounded-lg shadow-md">
                <div class="flex-1 mx-4">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name 3</h3>
                    <p class="text-gray-600 dark:text-gray-400">$39.99</p>
                </div>
                <button class="text-red-500 font-semibold dark:text-red-300 hover:text-red-700 dark:hover:text-red-400">Remove</button>
            </div>
        </div>
        <div class="mt-6 border-t border-gray-300 dark:border-gray-600 pt-4">
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Total: $89.97</h3>
            <button class="mt-4 w-full bg-blue-500 dark:bg-blue-700 text-white rounded-lg py-2 hover:bg-blue-600 dark:hover:bg-blue-600">Checkout</button>
        </div>
    </div>
</div>

Sidebar Component

A responsive sidebar component designed for e-commerce applications with Material Design elements and a pastel color scheme, featuring dark mode support.

Open Preview

                <aside class="bg-white dark:bg-gray-800 h-full w-64 p-5 shadow-lg  transition-transform duration-300 transform lg:translate-x-0 lg:fixed lg:left-0 lg:top-0 lg:h-full">
    <div class="flex items-center mb-5">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <h2 class="ml-3 text-gray-800 dark:text-white font-semibold">User Name</h2>
    </div>
    <nav>
        <ul>
            <li class="mb-3">
                <a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Home</a>
            </li>
            <li class="mb-3">
                <a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Shop</a>
            </li>
            <li class="mb-3">
                <a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Orders</a>
            </li>
            <li class="mb-3">
                <a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Wishlist</a>
            </li>
            <li class="mb-3">
                <a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Profile</a>
            </li>
            <li class="mb-3">
                <a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Settings</a>
            </li>
            <li>
                <a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Logout</a>
            </li>
        </ul>
    </nav>
    <div class="mt-5">
        <h3 class="text-gray-600 dark:text-gray-400 font-semibold">Featured Products</h3>
        <div class="mt-3">
            <img class="w-full h-24 object-cover rounded-lg shadow-md" src="https://picsum.photos/200/100?random=1" alt="Product 1">
            <img class="w-full h-24 object-cover rounded-lg shadow-md mt-2" src="https://picsum.photos/200/100?random=2" alt="Product 2">
        </div>
    </div>
</aside>

Retro Toast Notifications

A responsive Toast Notifications Component with Retro/Vintage design, Triadic color scheme, and dark mode support, built with Tailwind CSS for Portfolio use.

Open Preview

                <div class="fixed bottom-5 right-5 space-y-4">
  <!-- Success Toast -->
  <div class="bg-teal-200 dark:bg-teal-700 text-teal-800 dark:text-teal-200 p-4 rounded-lg shadow-md flex items-center space-x-3 transform transition-all duration-300 ease-out hover:scale-105">
    <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
    <div>
      <div class="font-bold">Success!</div>
      <div class="text-sm">Item successfully added.</div>
    </div>
  </div>

  <!-- Info Toast -->
  <div class="bg-blue-200 dark:bg-blue-700 text-blue-800 dark:text-blue-200 p-4 rounded-lg shadow-md flex items-center space-x-3 transform transition-all duration-300 ease-out hover:scale-105">
    <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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
    <div>
      <div class="font-bold">Information</div>
      <div class="text-sm">Your request is being processed.</div>
    </div>
  </div>

  <!-- Warning Toast -->
  <div class="bg-yellow-200 dark:bg-yellow-700 text-yellow-800 dark:text-yellow-200 p-4 rounded-lg shadow-md flex items-center space-x-3 transform transition-all duration-300 ease-out hover:scale-105">
    <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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
    <div>
      <div class="font-bold">Warning!</div>
      <div class="text-sm">Some issues were found.</div>
    </div>
  </div>

  <!-- Error Toast -->
  <div class="bg-red-200 dark:bg-red-700 text-red-800 dark:text-red-200 p-4 rounded-lg shadow-md flex items-center space-x-3 transform transition-all duration-300 ease-out hover:scale-105">
    <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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
    <div>
      <div class="font-bold">Error!</div>
      <div class="text-sm">Action could not be completed.</div>
    </div>
  </div>
</div>

Neumorphism Breadcrumb Navigation Component

Neumorphism Breadcrumb Navigation Component for Blog/Content with Dark Mode support

Open Preview

                <nav aria-label="Breadcrumb" class="flex">
  <ol role="list" class="flex items-center space-x-4">
    <li>
      <div>
        <a href="#" class="text-gray-400 hover:text-gray-500 dark:text-gray-600 dark:hover:text-gray-400">
          <svg class="h-5 w-5 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M9.293 2.293a1 1 0 011.414 0l7 7A1 1 0 0117 11h-1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-3a1 1 0 011-1h2a1 1 0 011 1v3h1V9.414l-7-7a1 1 0 010-1.414z" clip-rule="evenodd" />
          </svg>
          <span class="sr-only">Home</span>
        </a>
      </div>
    </li>

    <li>
      <div class="flex items-center">
        <svg class="h-5 w-5 flex-shrink-0 text-gray-300 dark:text-gray-700" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path d="M5.22 14.22a.75.75 0 001.06 0L10 10.44l3.72 3.78a.75.75 0 101.06-1.06L11.06 9.38l3.72-3.78a.75.75 0 00-1.06-1.06L10 8.38 6.28 4.6a.75.75 0 00-1.06 1.06L8.94 9.38l-3.72 3.78a.75.75 0 000 1.06z" />
        </svg>
        <a href="#" class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-300">Projects</a>
      </div>
    </li>
    <li>
      <div class="flex items-center">
        <svg class="h-5 w-5 flex-shrink-0 text-gray-300 dark:text-gray-700" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path d="M5.22 14.22a.75.75 0 001.06 0L10 10.44l3.72 3.78a.75.75 0 101.06-1.06L11.06 9.38l3.72-3.78a.75.75 0 00-1.06-1.06L10 8.38 6.28 4.6a.75.75 0 00-1.06 1.06L8.94 9.38l-3.72 3.78a.75.75 0 000 1.06z" />
        </svg>
        <a href="#" class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-300" aria-current="page">Project Nero</a>
      </div>
    </li>
  </ol>
</nav>

Table of Contents Component

A simple Table of Contents component designed in Material Design style, utilizing earth tones and supporting dark mode. Suitable for content consumption in blogs.

Open Preview

                <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 max-w-md mx-auto">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Table of Contents</h2>
    <ul class="space-y-2">
        <li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition duration-200">
            <a href="#section1" class="block text-gray-800 dark:text-gray-200 p-3 rounded-md">1. Introduction</a>
        </li>
        <li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition duration-200">
            <a href="#section2" class="block text-gray-800 dark:text-gray-200 p-3 rounded-md">2. Overview of the Topic</a>
        </li>
        <li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition duration-200">
            <a href="#section3" class="block text-gray-800 dark:text-gray-200 p-3 rounded-md">3. In-Depth Analysis</a>
        </li>
        <li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition duration-200">
            <a href="#section4" class="block text-gray-800 dark:text-gray-200 p-3 rounded-md">4. Conclusion</a>
        </li>
    </ul>
</div>

1 ... 115 116 117 118 119 ... 242

Categories

All Components

Social Share Buttons Component

Sidebar Navigation Component - Grayscale

Tag Cloud Component

Simple Dashboard Component

Footer Navigation Component

Shopping Cart Component

Sidebar Component

Retro Toast Notifications

Neumorphism Breadcrumb Navigation Component

Table of Contents Component