Search Components

All Components

Browse all available Tailwind CSS components

Container Component

A simple, responsive dashboard container with engaging microinteractions and a dark theme, focusing on analogous colors.

Open Preview

                <div class="bg-gray-100 dark:bg-gray-900 p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
    <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Dashboard</h1>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="bg-blue-200 dark:bg-blue-800 p-4 rounded-lg hover:scale-105 transition-transform duration-300">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="text-lg font-medium text-blue-700 dark:text-blue-300">User Profile</span>
            </div>
            <img src="https://picsum.photos/300/200?random=1" alt="Sample Image" class="w-full h-auto rounded-lg">
        </div>
        <div class="bg-green-200 dark:bg-green-800 p-4 rounded-lg hover:scale-105 transition-transform duration-300">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="text-lg font-medium text-green-700 dark:text-green-300">Analytics</span>
            </div>
            <img src="https://picsum.photos/300/200?random=2" alt="Sample Image" class="w-full h-auto rounded-lg">
        </div>
        <div class="bg-red-200 dark:bg-red-800 p-4 rounded-lg hover:scale-105 transition-transform duration-300">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="text-lg font-medium text-red-700 dark:text-red-300">Notifications</span>
            </div>
            <img src="https://picsum.photos/300/200?random=3" alt="Sample Image" class="w-full h-auto rounded-lg">
        </div>
        <div class="bg-yellow-200 dark:bg-yellow-800 p-4 rounded-lg hover:scale-105 transition-transform duration-300">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="text-lg font-medium text-yellow-700 dark:text-yellow-300">Settings</span>
            </div>
            <img src="https://picsum.photos/300/200?random=4" alt="Sample Image" class="w-full h-auto rounded-lg">
        </div>
    </div>
</div>

Rating System Component

A responsive web component for rating items with a skeuomorphic design that mimics real-world counterparts. Suitable for showcasing work or products in a portfolio.

Open Preview

                <div class="max-w-lg mx-auto p-4 bg-gray-800 text-white rounded-lg shadow-lg dark:bg-gray-900">
    <h2 class="text-xl font-bold mb-4">Rating System</h2>
    <div class="flex items-center mb-6">
        <img src="https://picsum.photos/100/100" alt="Product Image" class="w-24 h-24 rounded-lg shadow-md mr-4" />
        <div>
            <h3 class="text-lg font-semibold">Product Name</h3>
            <p class="text-gray-400">Product description goes here.</p>
            <div class="flex items-center mt-2">
                <span class="text-yellow-400 mr-1"><i class="fas fa-star"></i></span>
                <span class="text-yellow-400 mr-1"><i class="fas fa-star"></i></span>
                <span class="text-yellow-400 mr-1"><i class="fas fa-star"></i></span>
                <span class="text-gray-400 mr-1"><i class="fas fa-star"></i></span>
                <span class="text-gray-400 mr-1"><i class="fas fa-star"></i></span>
                <span class="text-gray-500">(3/5)</span>
            </div>
        </div>
    </div>
    <h4 class="text-md font-semibold mb-3">User Reviews</h4>
    <div class="bg-gray-700 p-3 rounded-lg mb-4 shadow-lg">
        <div class="flex items-center mb-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2" />
            <span class="font-bold">John Doe</span>
            <span class="text-gray-400 ml-2">5 hours ago</span>
        </div>
        <p class="text-gray-300">This product is amazing! Highly recommend it to everyone.</p>
    </div>
    <div class="bg-gray-700 p-3 rounded-lg mb-4 shadow-lg">
        <div class="flex items-center mb-2">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2" />
            <span class="font-bold">Jane Smith</span>
            <span class="text-gray-400 ml-2">3 hours ago</span>
        </div>
        <p class="text-gray-300">Not what I expected, but decent quality overall.</p>
    </div>
    <div class="flex items-center justify-between mt-4">
        <button class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded shadow">Rate Product</button>
        <button class="bg-red-600 hover:bg-red-700 text-white font-semibold py-2 px-4 rounded shadow">Report</button>
    </div>
</div>

Video Player Component

Minimalist/Flat Design Video Player Component for E-commerce, responsive with dark theme support

Open Preview

                <div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
  <div class="relative">
    <video controls class="w-full">
      <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>
  </div>
  <div class="p-4">
    <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title</h3>
    <p class="text-gray-600 dark:text-gray-300 text-sm mt-1">Brief product description goes here.</p>
    <div class="flex justify-between items-center mt-4">
      <span class="text-lg font-bold text-gray-900 dark:text-white">$99.99</span>
      <button class="px-3 py-1 bg-blue-500 text-white text-xs font-bold uppercase rounded dark:bg-blue-700">Add to Cart</button>
    </div>
  </div>
</div>

Glassmorphism Progress Bar

Glassmorphism-style progress bar designed for social media interfaces, featuring vibrant colors and dark mode support. Simple layout with no JavaScript.

Open Preview

                <div class="w-full bg-gray-200 bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-full h-4 dark:bg-gray-700 dark:bg-opacity-20 dark:backdrop-filter dark:backdrop-blur-lg">
  <div class="bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 h-4 rounded-full" style="width: 75%;"></div>
</div>

Toast Notifications Component

A Glassmorphism styled Toast Notifications component with pastel colors, designed for blogs and content consumption. It supports dark mode and features a rich interface with interactive elements.

Open Preview

                <div class="fixed bottom-5 right-5 z-50 space-y-4">
  <div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-4 max-w-xs transition-all duration-300 transform hover:scale-105">
    <div class="flex items-center space-x-3">
      <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
      <div>
        <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Notification Title</h4>
        <p class="text-gray-600 dark:text-gray-400">This is a brief message for a toast notification.</p>
      </div>
    </div>
    <div class="mt-2 flex justify-between items-center">
      <span class="text-sm text-gray-500 dark:text-gray-300">5 mins ago</span>
      <button class="text-red-500 hover:text-red-600">Dismiss</button>
    </div>
  </div>

  <div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-4 max-w-xs transition-all duration-300 transform hover:scale-105">
    <div class="flex items-center space-x-3">
      <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" />
      <div>
        <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Another Notification</h4>
        <p class="text-gray-600 dark:text-gray-400">Here is another message for your consideration.</p>
      </div>
    </div>
    <div class="mt-2 flex justify-between items-center">
      <span class="text-sm text-gray-500 dark:text-gray-300">10 mins ago</span>
      <button class="text-red-500 hover:text-red-600">Dismiss</button>
    </div>
  </div>

  <div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-4 max-w-xs transition-all duration-300 transform hover:scale-105">
    <div class="flex items-center space-x-3">
      <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" />
      <div>
        <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Important Alert</h4>
        <p class="text-gray-600 dark:text-gray-400">This is an important alert that requires your attention.</p>
      </div>
    </div>
    <div class="mt-2 flex justify-between items-center">
      <span class="text-sm text-gray-500 dark:text-gray-300">15 mins ago</span>
      <button class="text-red-500 hover:text-red-600">Dismiss</button>
    </div>
  </div>
</div>

Skeuomorphic Social Media Nav Bar

Skeuomorphic social media navigation bar with triadic color scheme and moderate complexity.

Open Preview

                <nav class="bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 shadow-lg dark:shadow-[0_20px_50px_rgba(0,_0,_0,_0.6)] p-4 rounded-b-xl">
  <div class="container mx-auto flex items-center justify-between">
    <div class="flex items-center space-x-4">
      <a href="#" class="flex items-center space-x-2 text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">
        <svg class="h-8 w-8" 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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7m-2.343 2.343a1 1 0 01-1.414 0L11.5 11.5m-4 4L7 10m3.75 3.75V17m-5 0h5"></path></svg>
        <span class="font-bold text-xl">SocialApp</span>
      </a>
    </div>
    <div class="flex items-center space-x-6">
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-green-600 dark:hover:text-green-400 transition duration-300 relative">
        <svg class="h-6 w-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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 01-6 0v-1m6 0H9"></path></svg>
        <span class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 transform translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full">3</span>
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition duration-300">
        <svg class="h-6 w-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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.004 9.004 0 01-7.504-4.588M3.05 5.84C3.05 5.84 6.893 19 12 19s8.95-13.16 8.95-13.16"></path></svg>
      </a>
      <div class="relative">
        <button class="relative z-10 block h-10 w-10 rounded-full overflow-hidden border-2 border-gray-400 dark:border-gray-600 focus:outline-none focus:border-white">
          <img class="h-full w-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Your avatar">
        </button>
      </div>
    </div>
  </div>
</nav>

360° Viewer Component

A simple 360° viewer component utilizing Glassmorphism style and responsive design with dark mode support.

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="relative w-full max-w-2xl bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg backdrop-filter backdrop-blur-md bg-opacity-30 dark:bg-opacity-30">
        <div class="p-6">
            <h2 class="text-2xl font-semibold text-gray-800 dark:text-white">360° Viewer</h2>
            <p class="mt-2 text-gray-600 dark:text-gray-300">Explore the item from all angles with our 360° viewer. Use your mouse or finger to rotate.</p>
        </div>
        <div class="flex justify-center">
            <img src="https://picsum.photos/600/400?random=1" alt="360° View" class="w-full h-auto rounded-b-lg">
        </div>
        <div class="flex items-center justify-around p-4">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white dark:border-gray-800">
            <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white dark:border-gray-800">
        </div>
    </div>
</div>

A responsive Media Embed Component with dark theme support for blog/content sites, styled with Material Design principles, a triadic color scheme, and moderate complexity. Includes an embedded video placeholder and related article links.

Open Preview

                <div class="container mx-auto p-4 max-w-3xl">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
    <div class="relative" style="padding-top: 56.25%;">
      <!-- 16:9 Aspect Ratio -->
      <iframe class="absolute inset-0 w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    <div class="p-4">
      <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-2">Embedded Media Title</h2>
      <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Published on October 27, 2023</p>
      <p class="text-gray-700 dark:text-gray-200 mb-4">This is a description of the embedded media content. It provides context and information about the video.</p>
      <div class="border-t border-gray-200 dark:border-gray-700 pt-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-3">Related Articles</h3>
        <ul>
          <li class="mb-2">
            <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Related Article Title 1</a>
          </li>
          <li class="mb-2">
            <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Related Article Title 2</a>
          </li>
          <li>
            <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Related Article Title 3</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

Skeuomorphism Social Media Mega Menu

Mega Menu Component with Skeuomorphism design, Triadic color scheme, and Simple complexity for Social Media purpose. Responsive with dark theme support.

Open Preview

                <nav class="bg-gray-200 dark:bg-gray-800 shadow-lg">
  <div class="container mx-auto px-4">
    <div class="flex justify-between items-center py-4">
      <div class="text-gray-800 dark:text-white text-xl font-bold">SocialHub</div>
      <div class="hidden md:flex space-x-6">
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">Feed</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-400 transition duration-300">Profile</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-green-600 dark:hover:text-green-400 transition duration-300">Messages</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-yellow-600 dark:hover:text-yellow-400 transition duration-300">Notifications</a>
      </div>
      <div class="md:hidden">
        <button class="text-gray-700 dark:text-gray-300 focus:outline-none">
          <svg class="h-6 w-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>
  </div>
</nav>

Heat Maps Component

A simple responsive heat map component designed with a Retro/Vintage aesthetic using a Pastel color scheme, suitable for dashboards. It features dark theme support with Tailwind CSS.

Open Preview

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-center text-pink-600 dark:text-pink-300">Heat Map</h2>

    <div class="mt-4 grid grid-cols-3 gap-2">
        <div class="bg-blue-300 dark:bg-blue-700 h-24 rounded-lg flex items-center justify-center">
            <img src="https://picsum.photos/100/100" alt="Sample Image" class="rounded-full border-4 border-white">
        </div>
        <div class="bg-green-300 dark:bg-green-700 h-24 rounded-lg flex items-center justify-center">
            <img src="https://picsum.photos/101/100" alt="Sample Image" class="rounded-full border-4 border-white">
        </div>
        <div class="bg-yellow-300 dark:bg-yellow-700 h-24 rounded-lg flex items-center justify-center">
            <img src="https://picsum.photos/102/100" alt="Sample Image" class="rounded-full border-4 border-white">
        </div>
        <div class="bg-pink-300 dark:bg-pink-700 h-24 rounded-lg flex items-center justify-center">
            <img src="https://picsum.photos/103/100" alt="Sample Image" class="rounded-full border-4 border-white">
        </div>
        <div class="bg-purple-300 dark:bg-purple-700 h-24 rounded-lg flex items-center justify-center">
            <img src="https://picsum.photos/104/100" alt="Sample Image" class="rounded-full border-4 border-white">
        </div>
        <div class="bg-red-300 dark:bg-red-700 h-24 rounded-lg flex items-center justify-center">
            <img src="https://picsum.photos/105/100" alt="Sample Image" class="rounded-full border-4 border-white">
        </div>
    </div>

    <div class="mt-4 flex justify-between items-center">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-4 border-white">
            <span class="ml-2 text-gray-700 dark:text-gray-300">User: John Doe</span>
        </div>
        <button class="bg-pink-500 dark:bg-pink-600 text-white font-semibold py-2 px-4 rounded">Action</button>
    </div>
</div>

1 ... 239 240 241 242 243 ... 335

Search Components

Categories

All Components