Search Components

All Components

Browse all available Tailwind CSS components

Skeuomorphic Navigation Component

A skeuomorphic navigation component designed to mimic real-world elements like a physical control panel or dashboard. Features responsive design, hover effects that simulate physical button presses, and dark theme support. The navigation includes subtle shadows, gradients, and textures to create a 3D, tactile appearance reminiscent of physical interfaces.

Open Preview

                <!-- Skeuomorphic Navigation Component with Dark Mode Support -->
<nav class="w-full bg-gradient-to-b from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 rounded-lg shadow-lg border border-gray-300 dark:border-gray-700 p-2 transition-all duration-300">
  <!-- Container for the nav items -->
  <div class="flex flex-col md:flex-row items-center justify-between">
    
    <!-- Logo Area - Mimicking a metal plate with engraved logo -->
    <div class="flex items-center p-2 bg-gradient-to-r from-gray-300 to-gray-200 dark:from-gray-700 dark:to-gray-800 rounded-lg shadow-inner border border-gray-400 dark:border-gray-600 m-2">
      <div class="w-10 h-10 bg-gradient-to-br from-blue-400 to-blue-600 rounded-full flex items-center justify-center shadow-lg border-2 border-gray-300 dark:border-gray-700">
        <span class="text-white font-bold text-xl">S</span>
      </div>
      <span class="ml-3 font-bold text-gray-700 dark:text-gray-200 tracking-wider text-shadow">SKEUOUI</span>
    </div>
    
    <!-- Navigation buttons - Mimicking physical buttons -->
    <div class="flex flex-wrap justify-center md:justify-end">
      <!-- Home Button -->
      <div class="group m-2">
        <button class="px-6 py-3 bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 rounded-lg text-gray-700 dark:text-gray-200 font-medium border border-gray-400 dark:border-gray-600 shadow-md hover:shadow-inner hover:translate-y-0.5 active:shadow-inner active:translate-y-1 transition-all duration-150 flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
          </svg>
          Home
        </button>
        <div class="h-1 w-full bg-blue-500 rounded-b opacity-0 group-hover:opacity-100 transition-opacity"></div>
      </div>
      
      <!-- Products Button -->
      <div class="group m-2">
        <button class="px-6 py-3 bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 rounded-lg text-gray-700 dark:text-gray-200 font-medium border border-gray-400 dark:border-gray-600 shadow-md hover:shadow-inner hover:translate-y-0.5 active:shadow-inner active:translate-y-1 transition-all duration-150 flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-green-500 dark:text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
          </svg>
          Products
        </button>
        <div class="h-1 w-full bg-green-500 rounded-b opacity-0 group-hover:opacity-100 transition-opacity"></div>
      </div>
      
      <!-- Services Button -->
      <div class="group m-2">
        <button class="px-6 py-3 bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 rounded-lg text-gray-700 dark:text-gray-200 font-medium border border-gray-400 dark:border-gray-600 shadow-md hover:shadow-inner hover:translate-y-0.5 active:shadow-inner active:translate-y-1 transition-all duration-150 flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-purple-500 dark:text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
          </svg>
          Services
        </button>
        <div class="h-1 w-full bg-purple-500 rounded-b opacity-0 group-hover:opacity-100 transition-opacity"></div>
      </div>
    </div>
    
    <!-- User Profile - Mimicking an ID badge -->
    <div class="m-2 flex items-center bg-gradient-to-r from-blue-100 to-blue-50 dark:from-blue-900 dark:to-blue-800 p-2 rounded-lg border border-blue-200 dark:border-blue-700 shadow">
      <div class="relative">
        <img src="https://randomuser.me/api/portraits/men/42.jpg" alt="User" class="w-10 h-10 rounded-full object-cover border-2 border-blue-300 dark:border-blue-600">
        <div class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 border-2 border-white dark:border-gray-800 rounded-full"></div>
      </div>
      <div class="ml-2">
        <div class="text-sm font-semibold text-gray-800 dark:text-gray-200">John Doe</div>
        <div class="text-xs text-gray-600 dark:text-gray-400">Admin Panel</div>
      </div>
    </div>
  </div>
  
  <!-- Mobile Menu Toggle Button - Styled as a switch -->
  <div class="md:hidden mt-2 flex justify-center">
    <div class="relative w-16 h-8 bg-gray-300 dark:bg-gray-700 rounded-full shadow-inner border border-gray-400 dark:border-gray-600 flex items-center p-1 cursor-pointer">
      <div class="absolute left-1 w-6 h-6 bg-gradient-to-br from-white to-gray-200 dark:from-gray-600 dark:to-gray-800 rounded-full shadow transform transition-transform border border-gray-300 dark:border-gray-500"></div>
      <div class="w-full flex justify-between text-xs px-1 font-bold">
        <span class="text-gray-700 dark:text-gray-300">|</span>
        <span class="text-gray-700 dark:text-gray-300">|</span>
      </div>
    </div>
  </div>
</nav>

Wishlist Component

A responsive wishlist component with Glassmorphism design style using Tailwind CSS, supporting dark mode with frosted glass-like effects and random placeholder images.

Open Preview

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <div class="bg-white dark:bg-gray-800 backdrop-blur-md bg-opacity-30 rounded-lg shadow-lg p-6 w-11/12 max-w-md">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 text-center mb-4">My Wishlist</h2>
        <ul class="space-y-4">
            <li class="flex items-center justify-between p-4 rounded-lg bg-white dark:bg-gray-700 shadow-md">
                <img src="https://picsum.photos/50/50" alt="Item Image" class="rounded-full" />
                <div class="flex-grow mx-4">
                    <h3 class="font-semibold text-gray-800 dark:text-gray-200">Item Title</h3>
                    <p class="text-gray-600 dark:text-gray-400">Description of the item goes here.</p>
                </div>
                <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
            </li>
            <li class="flex items-center justify-between p-4 rounded-lg bg-white dark:bg-gray-700 shadow-md">
                <img src="https://picsum.photos/50/50" alt="Item Image" class="rounded-full" />
                <div class="flex-grow mx-4">
                    <h3 class="font-semibold text-gray-800 dark:text-gray-200">Item Title</h3>
                    <p class="text-gray-600 dark:text-gray-400">Description of the item goes here.</p>
                </div>
                <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
            </li>
            <li class="flex items-center justify-between p-4 rounded-lg bg-white dark:bg-gray-700 shadow-md">
                <img src="https://picsum.photos/50/50" alt="Item Image" class="rounded-full" />
                <div class="flex-grow mx-4">
                    <h3 class="font-semibold text-gray-800 dark:text-gray-200">Item Title</h3>
                    <p class="text-gray-600 dark:text-gray-400">Description of the item goes here.</p>
                </div>
                <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
            </li>
        </ul>
    </div>
</div>

Header Component

A responsive header component with a retro/vintage design, featuring dark theme support and nostalgic aesthetics from the 80s/90s.

Open Preview

                <header class="bg-gray-800 text-white p-5 shadow-md">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <h1 class="ml-3 text-lg font-bold">Retro Header</h1>
        </div>
        <nav class="hidden md:flex space-x-4">
            <a href="#" class="text-lg hover:text-gray-400">Home</a>
            <a href="#" class="text-lg hover:text-gray-400">About</a>
            <a href="#" class="text-lg hover:text-gray-400">Services</a>
            <a href="#" class="text-lg hover:text-gray-400">Contact</a>
        </nav>
        <button class="md:hidden 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 12h16m-7 6h7"></path>
            </svg>
        </button>
    </div>
    <div class="mt-4 text-center">
        <img class="mx-auto rounded-lg shadow-lg" src="https://picsum.photos/400/200?random=1" alt="Random Placeholder">
        <p class="mt-2 text-sm text-gray-400">A touch of nostalgia from the 80s/90s.</p>
    </div>
</header>
<style>
@media (prefers-color-scheme: dark) {
    header {
        background-color: #1c1c1c;
    }
    a {
        color: #cbd5e1;
    }
    a:hover {
        color: #f3f4f6;
    }
}
</style>

Table of Contents Component

A responsive Table of Contents component designed in Dark Mode UI style, featuring sections, titles, descriptions, and random images/avatars.

Open Preview

                <div class="bg-gray-900 text-white p-5 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold mb-4">Table of Contents</h2>
    <ul class="space-y-3">
        <li class="hover:bg-gray-800 rounded p-2 transition duration-300">
            <h3 class="font-semibold">Section 1</h3>
            <p class="text-gray-400">Description of Section 1</p>
            <img src="https://picsum.photos/200/100?random=1" alt="Random Image" class="mt-2 rounded" />
        </li>
        <li class="hover:bg-gray-800 rounded p-2 transition duration-300">
            <h3 class="font-semibold">Section 2</h3>
            <p class="text-gray-400">Description of Section 2</p>
            <img src="https://picsum.photos/200/100?random=2" alt="Random Image" class="mt-2 rounded" />
        </li>
        <li class="hover:bg-gray-800 rounded p-2 transition duration-300">
            <h3 class="font-semibold">Section 3</h3>
            <p class="text-gray-400">Description of Section 3</p>
            <img src="https://picsum.photos/200/100?random=3" alt="Random Image" class="mt-2 rounded" />
        </li>
    </ul>
    <div class="mt-5 border-t border-gray-700 pt-4">
        <h4 class="font-semibold">Author</h4>
        <div class="flex items-center mt-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3" />
            <span class="text-gray-400">John Doe</span>
        </div>
    </div>
</div>

Like/Reaction Buttons Component

A 3D Design Like/Reaction Buttons Component using Tailwind CSS with dark theme support and responsive effects.

Open Preview

                <div class="flex justify-center items-center space-x-4 p-8 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
    <div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow-md transform transition-transform duration-200 hover:scale-105">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
        <button class="mt-2 px-4 py-2 text-sm font-bold text-white bg-blue-500 rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-500">Like</button>
    </div>
    <div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow-md transform transition-transform duration-200 hover:scale-105">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" /> 
        <button class="mt-2 px-4 py-2 text-sm font-bold text-white bg-pink-500 rounded hover:bg-pink-600 focus:outline-none focus:ring-2 focus:ring-pink-400 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-500">Love</button>
    </div>
    <div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow-md transform transition-transform duration-200 hover:scale-105">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" />
        <button class="mt-2 px-4 py-2 text-sm font-bold text-white bg-yellow-500 rounded hover:bg-yellow-600 focus:outline-none focus:ring-2 focus:ring-yellow-400 dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-500">Wow</button>
    </div>
    <div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow-md transform transition-transform duration-200 hover:scale-105">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" />
        <button class="mt-2 px-4 py-2 text-sm font-bold text-white bg-green-500 rounded hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-500">Haha</button>
    </div>
</div>

Content Display Component

A responsive content display component that incorporates microinteractions with engaging animations focused on user actions. It includes support for dark mode and placeholders for images and avatars.

Open Preview

                <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
    <div class="flex items-center p-4 border-b border-gray-200 dark:border-gray-700">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
        <div class="ml-4">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-300">John Doe</h2>
            <p class="text-sm text-gray-600 dark:text-gray-400">Software Engineer</p>
        </div>
    </div>
    <div class="p-4">
        <img src="https://picsum.photos/400/200" alt="Placeholder Image" class="w-full rounded-lg hover:scale-105 transition-transform duration-300">
        <p class="mt-2 text-gray-700 dark:text-gray-300">This is a brief description of the content. It engages the user with interesting information and encourages interaction.</p>
        <a href="#" class="inline-block mt-4 px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 transition duration-300">Read More</a>
    </div>
</div>

Product Gallery Component

A responsive product gallery with a retro/vintage aesthetic, featuring dark mode support. It includes images and avatars generated from placeholder services.

Open Preview

                <div class="max-w-7xl mx-auto p-8">
    <h2 class="text-4xl font-bold text-center text-gray-800 dark:text-gray-100 mb-6">Retro Product Gallery</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200?random=1" alt="Product 1" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="font-semibold text-xl text-gray-900 dark:text-gray-200">Product Title 1</h3>
                <p class="text-gray-600 dark:text-gray-400">$19.99</p>
                <div class="flex items-center mt-2">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                    <span class="text-gray-700 dark:text-gray-300">Seller Name</span>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200?random=2" alt="Product 2" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="font-semibold text-xl text-gray-900 dark:text-gray-200">Product Title 2</h3>
                <p class="text-gray-600 dark:text-gray-400">$29.99</p>
                <div class="flex items-center mt-2">
                    <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                    <span class="text-gray-700 dark:text-gray-300">Seller Name</span>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200?random=3" alt="Product 3" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="font-semibold text-xl text-gray-900 dark:text-gray-200">Product Title 3</h3>
                <p class="text-gray-600 dark:text-gray-400">$39.99</p>
                <div class="flex items-center mt-2">
                    <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                    <span class="text-gray-700 dark:text-gray-300">Seller Name</span>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200?random=4" alt="Product 4" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="font-semibold text-xl text-gray-900 dark:text-gray-200">Product Title 4</h3>
                <p class="text-gray-600 dark:text-gray-400">$49.99</p>
                <div class="flex items-center mt-2">
                    <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                    <span class="text-gray-700 dark:text-gray-300">Seller Name</span>
                </div>
            </div>
        </div>
    </div>
</div>

Image Lightbox Component

A responsive image lightbox component with Neumorphism design style and dark theme support using Tailwind CSS.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="relative group">
        <img src="https://picsum.photos/300/200" alt="Thumbnail" class="w-48 h-32 rounded-lg shadow-neu transition-transform duration-300 group-hover:scale-105" />
        <div class="hidden absolute top-0 left-0 right-0 bottom-0 bg-white bg-opacity-75 dark:bg-gray-800 rounded-lg shadow-neu group-hover:block">
            <div class="flex items-center justify-center h-full">
                <img src="https://picsum.photos/600/400" alt="Lightbox image" class="max-w-full h-auto rounded-lg" />
            </div>
        </div>
    </div>
</div>

<style>
    .shadow-neu {
        box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.2), 
                    -8px -8px 20px rgba(255, 255, 255, 0.9);
    }
</style>

Container Component

A responsive Container Component with microinteractions that features engaging animations reacting to user actions, supports dark mode, and uses Tailwind CSS.

Open Preview

                <div class="max-w-4xl mx-auto p-4">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 ease-in-out transform hover:shadow-xl hover:scale-105">
    <div class="flex items-center p-4">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600">
      <div class="ml-4">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h2>
        <p class="text-gray-600 dark:text-gray-400">Web Developer</p>
      </div>
    </div>
    <img src="https://picsum.photos/800/400" alt="Placeholder Image" class="w-full h-48 object-cover transition-transform duration-500 hover:scale-105">
    <div class="p-4">
      <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Engaging Title</h3>
      <p class="text-gray-700 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
      <button class="mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg shadow-md hover:bg-blue-700 transition duration-200 ease-in-out">Learn More</button>
    </div>
  </div>
</div>

Media Components Component

A responsive media component inspired by retro/vintage design styles, featuring nostalgic aesthetics from the 80s/90s. It supports dark theme with Tailwind CSS and includes placeholder images and avatars.

Open Preview

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-sm mx-auto">
    <img class="rounded-lg w-full h-48 object-cover mb-4" src="https://picsum.photos/seed/media/400/200" alt="Media Thumbnail">
    <h2 class="text-2xl font-bold mb-2 text-gray-800 dark:text-gray-200">Retro Media Title</h2>
    <p class="text-gray-600 dark:text-gray-400 mb-4">This is a brief description of the media component, capturing the essence of the nostalgia from the 80s and 90s.</p>
    <div class="flex items-center">
        <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <div>
            <p class="text-gray-800 dark:text-gray-200 font-semibold">User Name</p>
            <p class="text-gray-500 dark:text-gray-400 text-sm">Posted on March 1, 2023</p>
        </div>
    </div>
</div>

1 ... 313 314 315 316 317 ... 335

Search Components

Categories

All Components