Search Components

All Components

Browse all available Tailwind CSS components

Error Messages Component

Error Messages Component for social media with microinteractions, grayscale color scheme, complex interface, responsive design, and dark theme support.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative w-full max-w-md p-6 bg-white rounded-lg shadow-xl dark:bg-gray-800 transform transition-all duration-300 hover:scale-105">
    <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-gray-400 to-gray-600 rounded-t-lg animate-pulse"></div>
    
    <div class="flex items-center justify-between mb-4 border-b pb-4 border-gray-200 dark:border-gray-700">
      <div class="flex items-center space-x-3">
        <svg class="w-8 h-8 text-gray-600 dark:text-gray-400" 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>
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">System Error</h3>
      </div>
      <button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 focus:outline-none transform transition-transform duration-200 hover:rotate-90">
        <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"></path></svg>
      </button>
    </div>

    <div class="mb-6">
      <p class="text-gray-600 dark:text-gray-400 leading-relaxed mb-4">An unexpected error occurred. Please try again later or contact support if the issue persists.</p>
      
      <div class="p-3 bg-gray-50 dark:bg-gray-700 rounded-md text-sm text-gray-500 dark:text-gray-300 font-mono overflow-auto max-h-24">
        Error Code: 500 <br>
        Timestamp: 2023-10-27 10:30:45 <br>
        Request ID: abcd-1234-efgh-5678
      </div>
    </div>

    <div class="flex justify-end space-x-3">
      <button class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 dark:bg-gray-600 dark:text-gray-200 dark:hover:bg-gray-500 transform scale-100 hover:scale-105 transition-transform duration-200">
        Dismiss
      </button>
      <button class="px-4 py-2 text-sm font-medium text-white bg-gray-700 rounded-md hover:bg-gray-800 dark:bg-gray-500 dark:hover:bg-gray-400 transform scale-100 hover:scale-105 transition-transform duration-200">
        Report Issue
      </button>
    </div>

    <div class="absolute bottom-0 left-0 w-full h-1 bg-gradient-to-r from-gray-600 to-gray-400 rounded-b-lg animate-pulse-slow"></div>

  </div>
</div>

<style>
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .5; }
  }
  .animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
  .animate-pulse-slow { animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
</style>

Glassmorphism Skip to Content Link

Glassmorphism Skip to Content Link Component with Earth Tones for Dashboard.

Open Preview

                <a href="#main-content" class="skip-to-content-link sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:p-3 focus:rounded-lg focus:bg-white focus:bg-opacity-30 focus:backdrop-filter focus:backdrop-blur-lg focus:shadow-lg focus:text-stone-800 dark:focus:bg-stone-800 dark:focus:bg-opacity-30 dark:focus:text-stone-200">Skip to main content</a>

Glassmorphism Alert Message

Responsive Glassmorphism Alert Message component for an e-commerce site, with dark mode support and an analogous color scheme, built with Tailwind CSS.

Open Preview

                <div class="relative min-h-screen flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900">
  <!-- Analogous Colors: Using shades of blue-green and green for a soothing feel -->
  <div class="relative w-full max-w-md bg-white dark:bg-gray-800 backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 rounded-lg shadow-xl overflow-hidden border border-opacity-30 border-white dark:border-opacity-30 dark:border-gray-700">
    <div class="absolute inset-0 bg-gradient-to-br from-green-300 to-blue-400 opacity-20 dark:from-green-700 dark:to-blue-700 dark:opacity-30 rounded-lg pointer-events-none"></div>
    
    <div class="relative p-6 md:p-8 flex items-start space-x-4">
      <!-- Icon -->
      <div class="flex-shrink-0">
        <svg class="h-8 w-8 text-green-700 dark:text-green-300" 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>
      
      <!-- Content -->
      <div class="flex-grow">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Order Confirmed!</h3>
        <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed mb-4">
          Your order #12345 has been successfully placed and will be shipped within 24 hours. You will receive an email confirmation shortly.
        </p>
        <div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-3">
          <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition duration-150 ease-in-out dark:bg-green-500 dark:hover:bg-green-600 dark:focus:ring-green-400">
            View Order
          </a>
          <a href="#" class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-150 ease-in-out dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600">
            Continue Shopping
          </a>
        </div>
      </div>

      <!-- Close Button (optional, but common for alerts) -->
      <button type="button" class="absolute top-4 right-4 text-gray-400 hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400">
        <span class="sr-only">Dismiss</span>
        <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
        </svg>
      </button>
    </div>
  </div>
</div>

Login Form Component

A 3D-designed login form component with a triadic color scheme, suitable for e-commerce, with dark theme support and responsiveness, built with Tailwind CSS.

Open Preview

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
  <div class="relative w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 transform transition-all duration-300 hover:scale-105">
    <div class="absolute inset-0 bg-gradient-to-br from-purple-400 via-pink-500 to-red-500 opacity-20 dark:opacity-40 rounded-lg transform -rotate-3 translate-x-2 translate-y-2 blur-sm"></div>
    <div class="relative z-10">
      <h2 class="text-3xl font-bold text-center text-gray-800 dark:text-gray-100 mb-6">Welcome Back!</h2>
      <p class="text-center text-gray-600 dark:text-gray-300 mb-8">Sign in to your e-commerce account</p>

      <form class="space-y-6">
        <div>
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Email Address</label>
          <input type="email" id="email" name="email" placeholder="[email protected]" class="w-full px-4 py-3 rounded-lg bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-purple-500 dark:focus:ring-purple-400 focus:border-transparent transition duration-200 ease-in-out text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 shadow-sm transform translate-z-0.5">
        </div>

        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Password</label>
          <input type="password" id="password" name="password" placeholder="••••••••" class="w-full px-4 py-3 rounded-lg bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-pink-500 dark:focus:ring-pink-400 focus:border-transparent transition duration-200 ease-in-out text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 shadow-sm transform translate-z-0.5">
        </div>

        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <input id="remember_me" name="remember_me" type="checkbox" class="h-4 w-4 text-purple-600 dark:text-purple-500 focus:ring-purple-500 dark:focus:ring-purple-400 border-gray-300 rounded transform translate-z-0.5">
            <label for="remember_me" class="ml-2 block text-sm text-gray-900 dark:text-gray-200">Remember me</label>
          </div>
          <a href="#" class="text-sm font-medium text-pink-600 dark:text-pink-400 hover:text-pink-500 dark:hover:text-pink-300 transition duration-200 ease-in-out">Forgot your password?</a>
        </div>

        <button type="submit" class="w-full py-3 px-4 rounded-lg bg-red-600 dark:bg-red-500 text-white font-semibold text-lg shadow-lg hover:bg-red-700 dark:hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transform translate-z-0.5 transition duration-300 ease-in-out hover:-translate-y-0.5">
          Sign In
        </button>
      </form>

      <div class="mt-8 text-center">
        <p class="text-sm text-gray-600 dark:text-gray-400">Don't have an account? 
          <a href="#" class="font-medium text-purple-600 dark:text-purple-400 hover:text-purple-500 dark:hover:text-purple-300 transition duration-200 ease-in-out">Sign Up</a>
        </p>
      </div>
    </div>
  </div>
</div>

Glassmorphism Like/Reaction Buttons Component

Glassmorphism Like/Reaction Buttons Component for Portfolio - Simple, Responsive, Dark Theme

Open Preview

                <div
  class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900"
>
  <div
    class="flex space-x-4 p-4 bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-30 rounded-xl shadow-lg backdrop-filter backdrop-blur-lg border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-20"
  >
    <!-- Like Button -->
    <button
      class="flex items-center space-x-2 px-4 py-2 bg-blue-500 bg-opacity-70 dark:bg-blue-700 dark:bg-opacity-70 text-white rounded-full transition-transform transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-5 w-5"
        viewBox="0 0 20 20"
        fill="currentColor"
      >
        <path
          fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 9a1 1 0 100-2 1 1 0 000 2zm3-1a1 1 0 100-2 1 1 0 000 2zm3 1a1 1 0 100-2 1 1 0 000 2zm-3 4a1 1 0 100-2 1 1 0 000 2z"
          clip-rule="evenodd"
        />
      </svg>
      <span class="font-semibold">Like</span>
    </button>

    <!-- Heart Reaction Button -->
    <button
      class="flex items-center space-x-2 px-4 py-2 bg-red-500 bg-opacity-70 dark:bg-red-700 dark:bg-opacity-70 text-white rounded-full transition-transform transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-opacity-75"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-5 w-5"
        viewBox="0 0 20 20"
        fill="currentColor"
      >
        <path
          fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
          clip-rule="evenodd"
        />
      </svg>
      <span class="font-semibold">Love</span>
    </button>

    <!-- Laugh Reaction Button -->
    <button
      class="flex items-center space-x-2 px-4 py-2 bg-yellow-500 bg-opacity-70 dark:bg-yellow-700 dark:bg-opacity-70 text-white rounded-full transition-transform transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-opacity-75"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-5 w-5"
        viewBox="0 0 20 20"
        fill="currentColor"
      >
        <path
          fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 9a1 1 0 100-2 1 1 0 000 2zm3-1a1 1 0 100-2 1 1 0 000 2zm3 1a1 1 0 100-2 1 1 0 000 2zm-3 4a1 1 0 100-2 1 1 0 000 2z"
          clip-rule="evenodd"
        />
      </svg>
      <span class="font-semibold">Haha</span>
    </button>
  </div>
</div>

RetroLoginFormComponent

Responsive, dark-theme supported, retro/vintage login form with earth tones, suitable for business/corporate websites. Uses minimal elements.

Open Preview

                <div class="min-h-screen flex items-center justify-center bg-stone-100 dark:bg-stone-900">
  <div class="max-w-md w-full p-8 bg-amber-100 dark:bg-amber-900 rounded-lg shadow-lg">
    <h2 class="text-center text-3xl font-extrabold text-stone-800 dark:text-stone-200 mb-6">Welcome Back</h2>
    <form class="space-y-6">
      <div>
        <label for="email" class="sr-only">Email address</label>
        <input id="email" name="email" type="email" autocomplete="email" required class="apperance-none relative block w-full px-3 py-2 border border-stone-300 dark:border-stone-700 placeholder-stone-500 dark:placeholder-stone-300 text-stone-900 dark:text-stone-100 rounded-md focus:outline-none focus:ring-amber-500 focus:border-amber-500 focus:z-10 sm:text-sm bg-stone-50 dark:bg-stone-800" placeholder="Email address">
      </div>
      <div>
        <label for="password" class="sr-only">Password</label>
        <input id="password" name="password" type="password" autocomplete="current-password" required class="apperance-none relative block w-full px-3 py-2 border border-stone-300 dark:border-stone-700 placeholder-stone-500 dark:placeholder-stone-300 text-stone-900 dark:text-stone-100 rounded-md focus:outline-none focus:ring-amber-500 focus:border-amber-500 focus:z-10 sm:text-sm bg-stone-50 dark:bg-stone-800" placeholder="Password">
      </div>
      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-amber-600 focus:ring-amber-500 border-stone-300 dark:border-stone-700 rounded">
          <label for="remember-me" class="ml-2 block text-sm text-stone-900 dark:text-stone-100">Remember me</label>
        </div>
        <div class="text-sm">
          <a href="#" class="font-medium text-amber-600 hover:text-amber-500">Forgot your password?</a>
        </div>
      </div>
      <div>
        <button type="submit" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-amber-700 hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:bg-amber-800 dark:hover:bg-amber-700">
          Sign in
        </button>
      </div>
    </form>
  </div>
</div>

Search Box Component

Search Box Component with Dark Mode UI, Monochromatic color scheme, and Moderate complexity for Social Media using Tailwind CSS. Responsive design with dark theme support.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-md w-full space-y-8">
    <div>
      <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
        Search Your Friends
      </h2>
    </div>
    <div class="mt-8 relative">
      <input type="text" placeholder="Search..." class="block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md leading-5 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm">
      <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
        <svg class="h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
        </svg>
      </div>
    </div>

    <div class="bg-white dark:bg-gray-800 shadow overflow-hidden sm:rounded-md mt-4">
      <ul class="divide-y divide-gray-200 dark:divide-gray-700">
        <li class="px-4 py-4 sm:px-6 flex items-center space-x-3">
          <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
          <div class="flex-1 min-w-0">
            <p class="text-sm font-medium text-gray-900 dark:text-white truncate">John Doe</p>
            <p class="text-sm text-gray-500 dark:text-gray-400 truncate">@johndoe</p>
          </div>
        </li>
        <li class="px-4 py-4 sm:px-6 flex items-center space-x-3">
          <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
          <div class="flex-1 min-w-0">
            <p class="text-sm font-medium text-gray-900 dark:text-white truncate">Jane Smith</p>
            <p class="text-sm text-gray-500 dark:text-gray-400 truncate">@janesmith</p>
          </div>
        </li>
         <li class="px-4 py-4 sm:px-6 flex items-center space-x-3">
          <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
          <div class="flex-1 min-w-0">
            <p class="text-sm font-medium text-gray-900 dark:text-white truncate">Peter Jones</p>
            <p class="text-sm text-gray-500 dark:text-gray-400 truncate">@peterj</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

Product Cards Component for social media with a dark triadic color scheme and moderate complexity. It uses Tailwind CSS for a responsive design with dark mode support, and includes placeholders for images and avatars.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col items-center justify-center p-4">
  <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-8">Social Media Product Cards</h1>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <!-- Product Card 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product1/600/400" alt="Product Image">
      <div class="p-6">
        <div class="flex justify-between items-center mb-4">
          <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Cool Gadget Pro</h3>
          <span class="text-lg font-bold text-teal-500 dark:text-teal-400">$299</span>
        </div>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Elevate your digital experience with this cutting-edge gadget, featuring advanced capabilities.</p>
        <div class="flex items-center mb-4">
          <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <span class="text-gray-700 dark:text-gray-300 text-sm">By John Doe</span>
        </div>
        <div class="flex justify-between items-center text-gray-500 dark:text-gray-400 text-sm">
          <span>❤️ 1.2K Likes</span>
          <span>💬 245 Comments</span>
        </div>
        <button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-md transition duration-300">View Details</button>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product2/600/400" alt="Product Image">
      <div class="p-6">
        <div class="flex justify-between items-center mb-4">
          <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Smartwatch Elegance</h3>
          <span class="text-lg font-bold text-rose-500 dark:text-rose-400">$179</span>
        </div>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Stay connected and stylish with this elegant smartwatch, designed for modern living.</p>
        <div class="flex items-center mb-4">
          <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
          <span class="text-gray-700 dark:text-gray-300 text-sm">By Jane Smith</span>
        </div>
        <div class="flex justify-between items-center text-gray-500 dark:text-gray-400 text-sm">
          <span>❤️ 980 Likes</span>
          <span>💬 180 Comments</span>
        </div>
        <button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-md transition duration-300">View Details</button>
      </div>
    </div>

    <!-- Product Card 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product3/600/400" alt="Product Image">
      <div class="p-6">
        <div class="flex justify-between items-center mb-4">
          <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Wireless Headphones</h3>
          <span class="text-lg font-bold text-amber-500 dark:text-amber-400">$120</span>
        </div>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Immerse yourself in rich audio with these comfortable and high-fidelity wireless headphones.</p>
        <div class="flex items-center mb-4">
          <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar">
          <span class="text-gray-700 dark:text-gray-300 text-sm">By Peter Jones</span>
        </div>
        <div class="flex justify-between items-center text-gray-500 dark:text-gray-400 text-sm">
          <span>❤️ 1.5K Likes</span>
          <span>💬 300 Comments</span>
        </div>
        <button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-md transition duration-300">View Details</button>
      </div>
    </div>
  </div>
</div>

Dashboards Component

A simple, monochromatic dark mode dashboard component for portfolios, built with Tailwind CSS. It features a responsive design and uses different shades of a single color for a sleek, minimalist look.

Open Preview

                <div class="min-h-screen bg-gray-900 text-gray-100 p-8">
    <div class="max-w-7xl mx-auto">
        <h1 class="text-4xl font-bold mb-8 text-gray-500">Dashboard</h1>

        <!-- Stats Section -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
            <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
                <h2 class="text-xl font-semibold text-gray-400">Projects Completed</h2>
                <p class="text-5xl font-bold text-gray-300 mt-2">42</p>
            </div>
            <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
                <h2 class="text-xl font-semibold text-gray-400">Clients</h2>
                <p class="text-5xl font-bold text-gray-300 mt-2">15</p>
            </div>
            <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
                <h2 class="text-xl font-semibold text-gray-400">Awards</h2>
                <p class="text-5xl font-bold text-gray-300 mt-2">3</p>
            </div>
        </div>

        <!-- Recent Work Section -->
        <div class="bg-gray-800 p-8 rounded-lg shadow-lg mb-12">
            <h2 class="text-3xl font-semibold text-gray-400 mb-6">Recent Work</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <div class="bg-gray-700 rounded-lg overflow-hidden shadow-md">
                    <img src="https://picsum.photos/seed/project1/400/250" alt="Project 1" class="w-full h-48 object-cover">
                    <div class="p-4">
                        <h3 class="text-xl font-semibold text-gray-300">Project Alpha</h3>
                        <p class="text-gray-400 mt-2">A sleek web design for a tech startup.</p>
                    </div>
                </div>
                <div class="bg-gray-700 rounded-lg overflow-hidden shadow-md">
                    <img src="https://picsum.photos/seed/project2/400/250" alt="Project 2" class="w-full h-48 object-cover">
                    <div class="p-4">
                        <h3 class="text-xl font-semibold text-gray-300">Project Beta</h3>
                        <p class="text-gray-400 mt-2">Mobile app development for an e-commerce brand.</p>
                    </div>
                </div>
                <div class="bg-gray-700 rounded-lg overflow-hidden shadow-md">
                    <img src="https://picsum.photos/seed/project3/400/250" alt="Project 3" class="w-full h-48 object-cover">
                    <div class="p-4">
                        <h3 class="text-xl font-semibold text-gray-300">Project Gamma</h3>
                        <p class="text-gray-400 mt-2">Branding and logo design for a local business.</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Testimonials Section -->
        <div class="bg-gray-800 p-8 rounded-lg shadow-lg">
            <h2 class="text-3xl font-semibold text-gray-400 mb-6">Testimonials</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="bg-gray-700 p-6 rounded-lg shadow-md">
                    <div class="flex items-center mb-4">
                        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client 1" class="w-12 h-12 rounded-full mr-4">
                        <div>
                            <p class="font-semibold text-gray-300">John Doe</p>
                            <p class="text-sm text-gray-400">CEO, Tech Solutions</p>
                        </div>
                    </div>
                    <p class="text-gray-400 italic">"The work delivered was exceptional and exceeded our expectations. Highly recommend!"</p>
                </div>
                <div class="bg-gray-700 p-6 rounded-lg shadow-md">
                    <div class="flex items-center mb-4">
                        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Client 2" class="w-12 h-12 rounded-full mr-4">
                        <div>
                            <p class="font-semibold text-gray-300">Jane Smith</p>
                            <p class="text-sm text-gray-400">Marketing Director, Global Corp</p>
                        </div>
                    </div>
                    <p class="text-gray-400 italic">"Professional, timely, and truly understood our vision. A pleasure to work with."</p>
                </div>
            </div>
        </div>
    </div>
</div>

RetroSidebarNavigation

A responsive, simple retro/vintage pastel sidebar navigation component for business/corporate websites, with dark mode support.

Open Preview

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900">
  <!-- Sidebar -->
  <div class="w-64 bg-pink-200 dark:bg-purple-800 shadow-md p-4 flex flex-col justify-between">
    <div>
      <div class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-6 font-mono">ByteCorp</div>
      <nav>
        <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-pink-300 dark:hover:bg-purple-700 rounded-md transition duration-300 ease-in-out font-semibold text-lg">
          Dashboard
        </a>
        <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-pink-300 dark:hover:bg-purple-700 rounded-md transition duration-300 ease-in-out font-semibold text-lg mt-2">
          Analytics
        </a>
        <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-pink-300 dark:hover:bg-purple-700 rounded-md transition duration-300 ease-in-out font-semibold text-lg mt-2">
          Reports
        </a>
        <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-pink-300 dark:hover:bg-purple-700 rounded-md transition duration-300 ease-in-out font-semibold text-lg mt-2">
          Settings
        </a>
      </nav>
    </div>
    <div class="flex items-center">
      <img src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
      <div class="text-gray-800 dark:text-gray-100 font-semibold">John Doe</div>
    </div>
  </div>

  <!-- Content Area (for demonstration purposes) -->
  <div class="flex-1 p-8">
    <h1 class="text-4xl font-bold text-gray-800 dark:text-gray-100 mb-6 font-mono">Welcome to ByteCorp Dashboard</h1>
    <p class="text-gray-700 dark:text-gray-300 text-lg">This is a simple content area. The sidebar is on the left.</p>
  </div>
</div>

1 ... 122 123 124 125 126 ... 335

Search Components

Categories

All Components