All Components

360 Viewer Component

A 360° Viewer Component with dark mode support and responsive design, built with Tailwind CSS. Requires no JavaScript, using only CSS for styling and responsiveness.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-900">
  <div class="container px-4">
    <div class="relative w-full max-w-lg mx-auto">
      </div>
    </div>
  </div>

Brutalist Back to Top Button

A brutalist back-to-top button in Tailwind CSS, with high contrast, bold typography and sharp edges. Includes responsive sizing and dark mode support.

Open Preview

                <button class="fixed bottom-5 right-5 bg-black text-lime-400 border-4 border-lime-400 p-4 text-xl font-bold uppercase transition-all duration-300 hover:bg-lime-400 hover:text-black dark:bg-lime-400 dark:text-black dark:border-black dark:hover:bg-black dark:hover:text-lime-400">
    TOP
</button>

User Mentions Component

A user mention component with 3D design, responsive effects, and dark theme support using Tailwind CSS.

Open Preview

                <div class="flex items-center space-x-4 p-4 bg-white rounded-lg shadow-xl transition-transform transform hover:scale-105 dark:bg-gray-800">
  <img class="w-12 h-12 rounded-full border-2 border-blue-500" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
  <div class="flex-1">
    <p class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</p>
    <p class="text-gray-600 dark:text-gray-400">@johndoe</p>
  </div>
  <span class="inline-block bg-blue-500 text-white text-xs px-3 py-1 rounded-full shadow-md dark:bg-blue-600">
    Mentioned
  </span>
</div>

Product Gallery Component

Glassmorphism Product Gallery Component with responsive effects and dark theme support.

Open Preview

                <div class="container mx-auto px-4 py-8">
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
    </div>
    </div>
  </div>
</div>

Checkout Form Component

A responsive checkout form with glassmorphism design, featuring frosted glass-like translucent elements and support for dark mode.

Open Preview

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 bg-opacity-70 backdrop-blur-md border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-8 w-full sm:w-96">
        <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white">Checkout</h2>
        <form class="mt-4">
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="name">Full Name</label>
                <input class="mt-1 block w-full p-2 bg-transparent border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="name" placeholder="John Doe" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="email">Email Address</label>
                <input class="mt-1 block w-full p-2 bg-transparent border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" type="email" id="email" placeholder="[email protected]" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="address">Shipping Address</label>
                <input class="mt-1 block w-full p-2 bg-transparent border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="address" placeholder="123 Main St" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="card">Credit Card Number</label>
                <input class="mt-1 block w-full p-2 bg-transparent border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="card" placeholder="1234 5678 9012 3456" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="expiry">Expiry Date</label>
                <input class="mt-1 block w-full p-2 bg-transparent border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="expiry" placeholder="MM/YY" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="cvv">CVV</label>
                <input class="mt-1 block w-full p-2 bg-transparent border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="cvv" placeholder="123" required>
            </div>
            <img class="my-4 rounded-lg" src="https://picsum.photos/400/200?random=1" alt="Random placeholder"/>
            <div class="flex justify-between items-center">
                <button class="w-full bg-blue-600 text-white rounded-lg py-2 px-4 hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-300" type="submit">Pay Now</button>
                <div>
                    <img class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
                </div>
            </div>
        </form>
    </div>
</div>

Product Cards Component with Dark Mode UI

Product Cards Component with Dark Mode UI and responsive effects using Tailwind CSS.

Open Preview

                <div class="bg-gray-900 text-white py-8">
  <div class="container mx-auto px-4">
    <h2 class="text-3xl font-bold text-center mb-8">Our Products</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <div class="bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product1/400/300" alt="Product Image">
        <div class="p-6">
          <h3 class="text-xl font-bold mb-2">Product Name 1</h3>
          <p class="text-gray-400 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold">$19.99</span>
            <button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition duration-300">Add to Cart</button>
          </div>
        </div>
      </div>
      <div class="bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product2/400/300" alt="Product Image">
        <div class="p-6">
          <h3 class="text-xl font-bold mb-2">Product Name 2</h3>
          <p class="text-gray-400 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold">$29.99</span>
            <button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition duration-300">Add to Cart</button>
          </div>
        </div>
      </div>
      <div class="bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product3/400/300" alt="Product Image">
        <div class="p-6">
          <h3 class="text-xl font-bold mb-2">Product Name 3</h3>
          <p class="text-gray-400 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold">$39.99</span>
            <button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition duration-300">Add to Cart</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Skeuomorphic Search Box

A search box component with a skeuomorphic design that mimics real-world elements, featuring responsiveness and dark theme support.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="relative w-full max-w-md">
    <input type="text" class="p-4 pl-10 pr-4 text-gray-900 bg-white border border-gray-300 rounded-lg shadow-lg dark:bg-gray-800 dark:text-white dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 placeholder-gray-400" placeholder="Search..." />
    <svg class="absolute left-3 top-3 w-5 h-5 text-gray-400 dark:text-gray-500" 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="M10 6a4 4 0 1 1 0 8 4 4 0 0 1 0-8zm4 0a8 8 0 1 0 0 16 8 8 0 0 0 0-16z" />
    </svg>
  </div>
</div>

Progress Indicators Component

This is a Material Design-styled progress indicator component using Tailwind CSS, with responsive effects and dark theme support.

Open Preview

                <div class="flex flex-col items-center justify-center min-h-screen bg-white dark:bg-gray-800 p-4">

  <!-- Linear Progress Bar -->
  <div class="w-64 h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden shadow-md">
    <div class="h-full bg-blue-500 dark:bg-blue-400 w-3/4 rounded-full animate-pulse"></div>
  </div>

  <!-- Spacer -->
  <div class="my-8"></div>

  <!-- Circular Progress Indicator -->
  <div class="relative">
    <div class="w-16 h-16 border-4 border-blue-500 dark:border-blue-400 border-t-transparent border-solid rounded-full animate-spin shadow-md"></div>
    <div class="absolute top-0 left-0 w-16 h-16 flex items-center justify-center text-blue-700 dark:text-blue-300 font-bold">
      75%
    </div>
  </div>

  <!-- Spacer -->
  <div class="my-8"></div>

  <!-- Linear Progress Bar with Label -->
  <div class="w-64">
    <div class="flex justify-between mb-1 text-gray-700 dark:text-gray-300">
      <span class="text-base font-medium">Progress</span>
      <span class="text-sm font-medium">45%</span>
    </div>
    <div class="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden shadow-md">
      <div class="h-full bg-green-500 dark:bg-green-400 w-[45%] rounded-full" style="width: 45%;"></div>
    </div>
  </div>

</div>

Glassmorphism Container Component

Glassmorphism Container Component with responsive effects and dark theme support.

Open Preview

                <div class="flex items-center justify-center min-h-screen from-teal-100 via-teal-300 to-teal-500 bg-gradient-to-br dark:from-gray-700 dark:via-gray-900 dark:to-black">
  <div class="bg-white bg-opacity-10 px-10 py-5 border-r-8 border-t-8 border-opacity-30 border-white
    backdrop-filter backdrop-blur-sm shadow-2xl rounded-md w-full max-w-md hover:scale-105 transition duration-500 ease-in-out dark:bg-gray-900 dark:bg-opacity-10 dark:border-gray-700 dark:border-opacity-30">
    <h1 class="text-3xl font-bold text-gray-900 text-center dark:text-white mb-6">Welcome</h1>
    <p class="text-gray-700 text-center dark:text-gray-300 mb-8">This is a Glassmorphism container component example with responsive effects and dark theme support.</p>
    <div class="flex justify-center">
      <button class="relative inline-flex items-center justify-center p-0.5 mb-2 me-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-teal-300 to-teal-500 group-hover:from-teal-300 group-hover:to-teal-500 dark:text-white dark:hover:text-gray-900 focus:ring-4 focus:outline-none focus:ring-teal-200 dark:focus:ring-teal-800">
        <span class="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0">
          Get Started
        </span>
      </button>
    </div>
  </div>
</div>

Mega Menu Component

A responsive Mega Menu component styled with Skeuomorphism, featuring dark theme support using Tailwind CSS.

Open Preview

                <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6">
  <div class="flex justify-between items-center">
    <div class="flex items-center">
      <img src="https://picsum.photos/40/40" alt="Logo" class="rounded-full mr-3">
      <h1 class="text-2xl font-bold text-gray-800 dark:text-white">My Website</h1>
    </div>
    <button class="text-gray-800 dark:text-white 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"/>
      </svg>
    </button>
  </div>
  <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
    <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
      <h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Category 1</h2>
      <ul class="mt-2">
        <li class="mt-1 hover:text-blue-500"><a href="#">Link 1</a></li>
        <li class="mt-1 hover:text-blue-500"><a href="#">Link 2</a></li>
        <li class="mt-1 hover:text-blue-500"><a href="#">Link 3</a></li>
      </ul>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
      <h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Category 2</h2>
      <ul class="mt-2">
        <li class="mt-1 hover:text-blue-500"><a href="#">Link 1</a></li>
        <li class="mt-1 hover:text-blue-500"><a href="#">Link 2</a></li>
        <li class="mt-1 hover:text-blue-500"><a href="#">Link 3</a></li>
      </ul>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
      <h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Category 3</h2>
      <ul class="mt-2">
        <li class="mt-1 hover:text-blue-500"><a href="#">Link 1</a></li>
        <li class="mt-1 hover:text-blue-500"><a href="#">Link 2</a></li>
        <li class="mt-1 hover:text-blue-500"><a href="#">Link 3</a></li>
      </ul>
    </div>
  </div>
  <div class="mt-6">
    <h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Featured Users</h2>
    <div class="flex space-x-4 mt-2">
      <div class="flex flex-col items-center">
        <img src="https://picsum.photos/50/50" alt="User 1" class="rounded-full border-2 border-gray-300 dark:border-gray-600">
        <span class="text-gray-800 dark:text-gray-200">User 1</span>
      </div>
      <div class="flex flex-col items-center">
        <img src="https://picsum.photos/50/50" alt="User 2" class="rounded-full border-2 border-gray-300 dark:border-gray-600">
        <span class="text-gray-800 dark:text-gray-200">User 2</span>
      </div>
      <div class="flex flex-col items-center">
        <img src="https://picsum.photos/50/50" alt="User 3" class="rounded-full border-2 border-gray-300 dark:border-gray-600">
        <span class="text-gray-800 dark:text-gray-200">User 3</span>
      </div>
    </div>
  </div>
</div>

Categories