Search Components

All Components

Browse all available Tailwind CSS components

Notifications Component

A Notifications Component designed with Material Design principles and a monochromatic color scheme for e-commerce applications, featuring a responsive design and dark theme support.

Open Preview

                <div class="fixed inset-0 z-50 flex items-end justify-center p-4 space-x-4 sm:items-start">
  <div class="w-full max-w-sm">
    <div class="bg-gray-800 dark:bg-gray-900 rounded-lg drop-shadow-lg p-4">
      <div class="flex items-center space-x-2">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full">
        <div class="flex-1">
          <h2 class="text-white text-lg font-semibold">New Message</h2>
          <p class="text-gray-300">You have a new message from a seller.</p>
        </div>
        <button class="text-gray-400 hover:text-gray-200">
          <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="M6 18L18 6M6 6l12 12" /></svg>
        </button>
      </div>
      <img src="https://picsum.photos/200/100" alt="Product Image" class="rounded-md mt-2" />
      <div class="mt-2">
        <span class="inline-block px-2 py-1 text-xs font-semibold text-gray-700 bg-gray-300 rounded-full">E-commerce</span>
        <span class="inline-block px-2 py-1 text-xs font-semibold text-gray-700 bg-gray-300 rounded-full float-right">5 min ago</span>
      </div>
    </div>
  </div>
  <div class="w-full max-w-sm">
    <div class="bg-gray-800 dark:bg-gray-900 rounded-lg drop-shadow-lg p-4">
      <div class="flex items-center space-x-2">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full">
        <div class="flex-1">
          <h2 class="text-white text-lg font-semibold">Order Shipped</h2>
          <p class="text-gray-300">Your order #12345 has been shipped.</p>
        </div>
        <button class="text-gray-400 hover:text-gray-200">
          <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="M6 18L18 6M6 6l12 12" /></svg>
        </button>
      </div>
      <img src="https://picsum.photos/200/100?random=1" alt="Product Image" class="rounded-md mt-2" />
      <div class="mt-2">
        <span class="inline-block px-2 py-1 text-xs font-semibold text-gray-700 bg-gray-300 rounded-full">E-commerce</span>
        <span class="inline-block px-2 py-1 text-xs font-semibold text-gray-700 bg-gray-300 rounded-full float-right">10 min ago</span>
      </div>
    </div>
  </div>
</div>

Alert Messages Component with Material Design style, Pastel color scheme, and Complex complexity level, for Portfolio purpose. Responsive design with dark theme support. No JavaScript code needed, only HTML with Tailwind classes. Dark mode uses Tailwind's dark: prefix for styling. Images use picsum.photos for images and randomuser.me for avatars.

Open Preview

                <div class="container mx-auto p-4">
  <!-- Success Alert -->
  <div class="flex items-center bg-green-200 dark:bg-green-700 text-green-800 dark:text-green-200 px-4 py-3 rounded shadow-md mb-4" role="alert">
    <svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.66 2.512-1.27 0-2.01-.733-2.01-1.831 0-1.008 1.102-1.942 2.01-1.942zm-.432 9.024c0 1.32.826 2.12 1.905 2.12 1.04 0 1.9-.851 1.9-2.12v-.97c0-1.6.792-2.012 1.936-2.012 1.04 0 1.9.851 1.9 2.12v.97c0 1.32-.826 2.12-1.905 2.12-1.04 0-1.9-.851-1.9-2.12v-.97c0-1.6-.792-2.012-1.936-2.012-1.04 0-1.9.851-1.9 2.12v.97z"/></svg>
    <p class="text-sm">Success! Your action was completed.</p>
  </div>

  <!-- Info Alert -->
  <div class="flex items-center bg-blue-200 dark:bg-blue-700 text-blue-800 dark:text-blue-200 px-4 py-3 rounded shadow-md mb-4" role="alert">
    <svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.66 2.512-1.27 0-2.01-.733-2.01-1.831 0-1.008 1.102-1.942 2.01-1.942zm-.432 9.024c0 1.32.826 2.12 1.905 2.12 1.04 0 1.9-.851 1.9-2.12v-.97c0-1.6.792-2.012 1.936-2.012 1.04 0 1.9.851 1.9 2.12v.97c0 1.32-.826 2.12-1.905 2.12-1.04 0-1.9-.851-1.9-2.12v-.97c0-1.6-.792-2.012-1.936-2.012-1.04 0-1.9.851-1.9 2.12v.97z"/></svg>
    <p class="text-sm">Information: This is an important message.</p>
  </div>

  <!-- Warning Alert -->
  <div class="flex items-center bg-yellow-200 dark:bg-yellow-700 text-yellow-800 dark:text-yellow-200 px-4 py-3 rounded shadow-md mb-4" role="alert">
    <svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2.93 17.07A10 10 0 1 1 17.07 2.93A10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z"/></svg>
    <p class="text-sm">Warning: Something needs your attention.</p>
  </div>

  <!-- Danger Alert -->
  <div class="flex items-center bg-red-200 dark:bg-red-700 text-red-800 dark:text-red-200 px-4 py-3 rounded shadow-md" role="alert">
    <svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94z"/></svg>
    <p class="text-sm">Error: Something went wrong.</p>
  </div>
</div>

Activity Feed Component

Activity Feed Component with Retro/Vintage 80s/90s aesthetics, monochromatic color scheme, moderate complexity for blog/content consumption. Responsive design with dark mode support using Tailwind CSS. Images from picsum.photos and avatars from randomuser.me.

Open Preview

                <div class="container mx-auto px-4 py-8 bg-gray-200 dark:bg-gray-800">
  <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200">Activity Feed</h2>

  <!-- Activity Item -->
  <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md mb-6">
    <div class="flex items-center mb-4">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
      <div>
        <p class="font-bold text-gray-800 dark:text-gray-200">John Doe</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">posted a new article</p>
      </div>
    </div>
    <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-gray-200">The Future of Web Development</h3>
    <p class="text-gray-700 dark:text-gray-300 leading-relaxed 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 justify-between items-center text-sm text-gray-600 dark:text-gray-400">
      <span>2 hours ago</span>
      <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Read more</a>
    </div>
  </div>

  <!-- Activity Item -->
  <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md mb-6">
    <div class="flex items-center mb-4">
      <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
      <div>
        <p class="font-bold text-gray-800 dark:text-gray-200">Jane Smith</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">commented on a post</p>
      </div>
    </div>
    <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">Great insightful article, John! I learned a lot.</p>
    <div class="flex justify-between items-center text-sm text-gray-600 dark:text-gray-400">
      <span>4 hours ago</span>
      <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">View post</a>
    </div>
  </div>

  <!-- Activity Item -->
  <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md">
    <div class="flex items-center mb-4">
      <img src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
      <div>
        <p class="font-bold text-gray-800 dark:text-gray-200">Peter Jones</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">liked an article</p>
      </div>
    </div>
    <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-gray-200">10 Tips for Better Productivity</h3>
    <div class="flex justify-between items-center text-sm text-gray-600 dark:text-gray-400">
      <span>6 hours ago</span>
      <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">View article</a>
    </div>
  </div>
</div>

File Viewer Component

A neumorphic styled file viewer for e-commerce that displays an image and file details. Provides a soft UI experience with dark theme support.

Open Preview

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-6">
    <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-5 w-full max-w-md text-center">
        <div class="mb-4 rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-700 shadow-inner">
            <img class="object-cover w-full h-32" src="https://picsum.photos/400/200" alt="File Preview">
        </div>
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">File Name.jpg</h2>
        <p class="text-gray-600 dark:text-gray-400">Size: 2.5 MB</p>
        <p class="text-gray-600 dark:text-gray-400">Uploaded by: <img class="inline-block w-6 h-6 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar"> John Doe</p>
        <div class="mt-4 text-center">
            <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded shadow-md focus:outline-none focus:shadow-outline">Download</button>
        </div>
    </div>
</div>

Simple Brutalist Chat Window

Brutalist simple grayscale chat window component for blog content consumption with dark mode and responsive design

Open Preview

                <div class="flex flex-col h-screen bg-white dark:bg-black border border-black dark:border-white">
  <!-- Chat Header -->
  <div class="flex justify-between items-center p-4 bg-gray-200 dark:bg-gray-800 border-b border-black dark:border-white">
    <div class="flex items-center">
      <img class="w-8 h-8 rounded-full mr-2 border border-black dark:border-white" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
      <h2 class="text-lg font-bold text-black dark:text-white">Simple Chat</h2>
    </div>
    <button class="text-black dark:text-white font-bold">X</button>
  </div>

  <!-- Chat Body -->
  <div class="flex-1 overflow-y-auto p-4">
    <!-- Incoming Message -->
    <div class="flex mb-4">
      <div class="bg-gray-300 dark:bg-gray-700 p-3 rounded-lg max-w-xs border border-black dark:border-white">
        <p class="text-sm text-black dark:text-white">Hey, this is a simple message.</p>
      </div>
    </div>

    <!-- Outgoing Message -->
    <div class="flex justify-end mb-4">
      <div class="bg-black dark:bg-white text-white dark:text-black p-3 rounded-lg max-w-xs border border-black dark:border-white">
        <p class="text-sm">This is a reply message.</p>
      </div>
    </div>

    <!-- Incoming Message -->
    <div class="flex mb-4">
      <div class="bg-gray-300 dark:bg-gray-700 p-3 rounded-lg max-w-xs border border-black dark:border-white">
        <p class="text-sm text-black dark:text-white">Another simple incoming message to show the scroll.</p>
      </div>
    </div>

      <!-- Outgoing Message -->
    <div class="flex justify-end mb-4">
      <div class="bg-black dark:bg-white text-white dark:text-black p-3 rounded-lg max-w-xs border border-black dark:border-white">
        <p class="text-sm max-w-xs">And a longer outgoing message to test wrapping and responsiveness. It should wrap when the screen is smaller.</p>
      </div>
    </div>

  </div>

  <!-- Chat Footer -->
  <div class="flex p-4 bg-gray-200 dark:bg-gray-800 border-t border-black dark:border-white">
    <input type="text" placeholder="Type a message..." class="flex-1 p-2 rounded-lg border border-black dark:border-white bg-white dark:bg-black text-black dark:text-white placeholder-gray-500 dark:placeholder-gray-400">
    <button class="ml-2 px-4 py-2 bg-black dark:bg-white text-white dark:text-black font-bold rounded-lg border border-black dark:border-white">Send</button>
  </div>
</div>

Product Gallery Component

A responsive Product Gallery component designed with Glassmorphism, featuring frosted glass-like translucent elements with blur effects and a complementary color scheme. It includes multiple interactive elements suitable for e-commerce with support for dark mode.

Open Preview

                <div class="bg-gray-800 dark:bg-gray-900 min-h-screen p-6 flex flex-col items-center justify-center">
    <h1 class="text-2xl font-bold text-white mb-6">Product Gallery</h1>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        <!-- Product Card -->
        <div class="bg-white dark:bg-gray-800 backdrop-blur-md border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg p-4">
            <img src="https://picsum.photos/300/200" alt="Product" class="rounded-lg">
            <h2 class="text-lg font-semibold mt-4 dark:text-white">Product Name 1</h2>
            <p class="text-gray-600 dark:text-gray-300">$29.99</p>
            <button class="mt-2 bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded hover:bg-blue-600 dark:hover:bg-blue-800 transition duration-200">Add to Cart</button>
        </div>
        <!-- Product Card -->
        <div class="bg-white dark:bg-gray-800 backdrop-blur-md border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg p-4">
            <img src="https://picsum.photos/300/201" alt="Product" class="rounded-lg">
            <h2 class="text-lg font-semibold mt-4 dark:text-white">Product Name 2</h2>
            <p class="text-gray-600 dark:text-gray-300">$39.99</p>
            <button class="mt-2 bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded hover:bg-blue-600 dark:hover:bg-blue-800 transition duration-200">Add to Cart</button>
        </div>
        <!-- Product Card -->
        <div class="bg-white dark:bg-gray-800 backdrop-blur-md border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg p-4">
            <img src="https://picsum.photos/300/202" alt="Product" class="rounded-lg">
            <h2 class="text-lg font-semibold mt-4 dark:text-white">Product Name 3</h2>
            <p class="text-gray-600 dark:text-gray-300">$49.99</p>
            <button class="mt-2 bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded hover:bg-blue-600 dark:hover:bg-blue-800 transition duration-200">Add to Cart</button>
        </div>
        <!-- Product Card -->
        <div class="bg-white dark:bg-gray-800 backdrop-blur-md border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg p-4">
            <img src="https://picsum.photos/300/203" alt="Product" class="rounded-lg">
            <h2 class="text-lg font-semibold mt-4 dark:text-white">Product Name 4</h2>
            <p class="text-gray-600 dark:text-gray-300">$59.99</p>
            <button class="mt-2 bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded hover:bg-blue-600 dark:hover:bg-blue-800 transition duration-200">Add to Cart</button>
        </div>
    </div>
    <div class="mt-10 flex space-x-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white dark:border-gray-800">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white dark:border-gray-800">
    </div>
</div>

Activity Feed Component

A Retro/Vintage styled activity feed component for showcasing work or products. The design features an analogous color scheme with support for dark theme. The component is interactive and responsive, suitable for portfolio use.

Open Preview

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-lg mx-auto">
    <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">Activity Feed</h2>
    <div class="space-y-4">
        <div class="bg-white dark:bg-gray-700 rounded-lg p-4 flex items-start shadow">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4">
            <div class="flex-1">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h3>
                <p class="text-gray-600 dark:text-gray-300">Published a new project: <a href="#" class="text-blue-500 dark:text-blue-300 underline">Retro Aesthetic App</a>.</p>
                <span class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</span>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg p-4 flex items-start shadow">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4">
            <div class="flex-1">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h3>
                <p class="text-gray-600 dark:text-gray-300">Shared a new blog post: <a href="#" class="text-blue-500 dark:text-blue-300 underline">Top 10 Vintage Designs</a>.</p>
                <span class="text-sm text-gray-500 dark:text-gray-400">3 hours ago</span>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg p-4 flex items-start shadow">
            <img src="https://randomuser.me/api/portraits/men/55.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4">
            <div class="flex-1">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Mark Johnson</h3>
                <p class="text-gray-600 dark:text-gray-300">Created a new collection: <a href="#" class="text-blue-500 dark:text-blue-300 underline">90s Nostalgia Gallery</a>.</p>
                <span class="text-sm text-gray-500 dark:text-gray-400">5 hours ago</span>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg p-4 flex items-start shadow">
            <img src="https://randomuser.me/api/portraits/women/34.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4">
            <div class="flex-1">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Emily Davis</h3>
                <p class="text-gray-600 dark:text-gray-300">Updated her portfolio: <a href="#" class="text-blue-500 dark:text-blue-300 underline">My Retro Journey</a>.</p>
                <span class="text-sm text-gray-500 dark:text-gray-400">8 hours ago</span>
            </div>
        </div>
    </div>
</div>

Like/Reaction Buttons Component

A Neumorphism styled Like/Reaction buttons component for blogs with a complex design and dark mode support.

Open Preview

                <div class="flex flex-col items-center justify-center p-6 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">React to this Post</h2>
    <div class="grid grid-cols-3 gap-4">
        <button class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md hover:shadow-lg transition-all duration-300">
            <img src="https://picsum.photos/50" alt="Like" class="w-12 h-12 mb-2 rounded-full">
            <span class="text-gray-800 dark:text-gray-200">Like</span>
        </button>
        <button class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md hover:shadow-lg transition-all duration-300">
            <img src="https://picsum.photos/50?random=1" alt="Love" class="w-12 h-12 mb-2 rounded-full">
            <span class="text-gray-800 dark:text-gray-200">Love</span>
        </button>
        <button class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md hover:shadow-lg transition-all duration-300">
            <img src="https://picsum.photos/50?random=2" alt="Haha" class="w-12 h-12 mb-2 rounded-full">
            <span class="text-gray-800 dark:text-gray-200">Haha</span>
        </button>
        <button class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md hover:shadow-lg transition-all duration-300">
            <img src="https://picsum.photos/50?random=3" alt="Wow" class="w-12 h-12 mb-2 rounded-full">
            <span class="text-gray-800 dark:text-gray-200">Wow</span>
        </button>
        <button class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md hover:shadow-lg transition-all duration-300">
            <img src="https://picsum.photos/50?random=4" alt="Sad" class="w-12 h-12 mb-2 rounded-full">
            <span class="text-gray-800 dark:text-gray-200">Sad</span>
        </button>
        <button class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md hover:shadow-lg transition-all duration-300">
            <img src="https://picsum.photos/50?random=5" alt="Angry" class="w-12 h-12 mb-2 rounded-full">
            <span class="text-gray-800 dark:text-gray-200">Angry</span>
        </button>
    </div>
</div>

Material Design Social Login Component

Material Design Social Login Component with Complementary color scheme, moderate complexity, for Blog/Content purpose, responsive with dark mode support using Tailwind CSS.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center">
  <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md w-96">
    <h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-white mb-6">Login</h2>
    <div class="flex flex-col space-y-4">
      <button class="flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
        <img class="h-5 w-5 mr-2" src="https://fonts.gstatic.com/s/i/productlogos/google/v6/24px.svg" alt="Google logo">
        Sign in with Google
      </button>
      <button class="flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
        <svg class="h-5 w-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12 0C5.373 0 0 5.373 0 12c0 5.083 3.791 9.362 8.75 10l-.002-.002v-.001l.002.001V17h-3v-5h3V9c0-3.306 1.976-5.164 4.936-5.164C15.232 3.836 16.5 4 16.5 4v3h-2.473c-1.742 0-2.527.873-2.527 2.075V12h4.999l-.649 5h-4.35v5.999c5-.638 8.75-4.918 8.75-10C24 5.373 18.627 0 12 0z" />
        </svg>
        Sign in with Facebook
      </button>
    </div>
    <div class="mt-6 text-center text-gray-600 dark:text-gray-400 text-sm">
      Don't have an account? <a href="#" class="text-blue-500 hover:underline">Sign up</a>
    </div>
  </div>
</div>

3D Layout Component

A responsive 3D Design social media layout component featuring a grayscale color scheme. Suitable for social networking interfaces.

Open Preview

                <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 mb-6 transform hover:scale-105 transition-transform duration-300">
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md border-2 border-gray-300 dark:border-gray-700">
        <h2 class="text-gray-800 dark:text-white text-lg font-semibold ml-4">User Name</h2>
    </div>
    <div class="mb-4">
        <img src="https://picsum.photos/400/200" alt="Post Image" class="rounded-lg shadow-md">  
    </div>
    <div class="text-gray-600 dark:text-gray-300">
        <p class="mb-2">This is a simple social media post showcasing a 3D design layout. Engage with your network in style!</p>
    </div>
    <div class="mt-4 flex space-x-4">
        <button class="bg-gray-800 text-white rounded-md px-4 py-2 transition-colors duration-300 hover:bg-gray-600">Like</button>
        <button class="bg-gray-800 text-white rounded-md px-4 py-2 transition-colors duration-300 hover:bg-gray-600">Comment</button>
    </div>
</div>

1 ... 174 175 176 177 178 ... 335

Search Components

Categories

All Components