Search Components

All Components

Browse all available Tailwind CSS components

Skip to Content Link

Skip to Content Link Component aligned to Material Design principles, featuring responsive design, dark mode support, and a simple monochromatic color scheme for social media applications.

Open Preview

                <a href="#content" class="skip-to-content block absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-full bg-blue-500 text-white p-3 transition-all duration-300 focus:translate-y-0 z-50 dark:bg-blue-700 dark:text-gray-200">Skip to content</a>

E-commerce Container Component

Glassmorphism E-commerce Container Component with Triadic Color Scheme and Complex Layout, including Dark Mode Support

Open Preview

                <div class="container mx-auto p-8 max-w-screen-lg dark:bg-gray-800 dark:text-white bg-gray-100 text-gray-800 rounded-xl shadow-lg backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 border border-gray-200 dark:border-gray-700">

  <!-- Header -->
  <header class="flex justify-between items-center mb-8">
    <h1 class="text-3xl font-bold text-blue-600 dark:text-blue-400">Featured Products</h1>
    <nav>
      <ul class="flex space-x-4">
        <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">Home</a></li>
        <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">Shop</a></li>
        <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">About</a></li>
        <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">Contact</a></li>
      </ul>
    </nav>
  </header>

  <!-- Product Grid -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

    <!-- Product Card 1 -->
    <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-6 border border-green-200 dark:border-green-700 backdrop-filter backdrop-blur-md bg-opacity-30 dark:bg-opacity-30 transform transition duration-500 hover:scale-105">
      <img src="https://picsum.photos/seed/product1/400/300" alt="Product Image" class="rounded-md mb-4">
      <h2 class="text-xl font-semibold text-purple-700 dark:text-purple-400 mb-2">Product Name 1</h2>
      <p class="text-gray-600 dark:text-gray-400 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <div class="flex justify-between items-center">
        <span class="text-2xl font-bold text-red-600 dark:text-red-400">$49.99</span>
        <button class="bg-red-500 dark:bg-red-700 text-white py-2 px-4 rounded-full hover:bg-red-600 dark:hover:bg-red-800 transition duration-300">Add to Cart</button>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-6 border border-purple-200 dark:border-purple-700 backdrop-filter backdrop-blur-md bg-opacity-30 dark:bg-opacity-30 transform transition duration-500 hover:scale-105">
        <img src="https://picsum.photos/seed/product2/400/300" alt="Product Image" class="rounded-md mb-4">
        <h2 class="text-xl font-semibold text-red-700 dark:text-red-400 mb-2">Product Name 2</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="flex justify-between items-center">
          <span class="text-2xl font-bold text-green-600 dark:text-green-400">$29.50</span>
          <button class="bg-green-500 dark:bg-green-700 text-white py-2 px-4 rounded-full hover:bg-green-600 dark:hover:bg-green-800 transition duration-300">Add to Cart</button>
        </div>
      </div>

    <!-- Product Card 3 -->
    <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-6 border border-red-200 dark:border-red-700 backdrop-filter backdrop-blur-md bg-opacity-30 dark:bg-opacity-30 transform transition duration-500 hover:scale-105">
        <img src="https://picsum.photos/seed/product3/400/300" alt="Product Image" class="rounded-md mb-4">
        <h2 class="text-xl font-semibold text-green-700 dark:text-green-400 mb-2">Product Name 3</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="flex justify-between items-center">
          <span class="text-2xl font-bold text-purple-600 dark:text-purple-400">$75.00</span>
          <button class="bg-purple-500 dark:bg-purple-700 text-white py-2 px-4 rounded-full hover:bg-purple-600 dark:hover:bg-purple-800 transition duration-300">Add to Cart</button>
        </div>
      </div>

  </div>

  <!-- Footer -->
  <footer class="mt-8 text-center text-gray-600 dark:text-gray-400">
    &copy; 2023 Your E-commerce Store. All rights reserved.
  </footer>

</div>

Two-Factor Authentication Component

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-6">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-md p-8">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Two-Factor Authentication</h2>
    <p class="text-sm text-center text-gray-600 dark:text-gray-300 mb-6">Enter the 6-digit code from your authenticator app.</p>
    <div class="flex justify-center space-x-4 mb-6">
      <input type="text" class="w-12 h-12 text-center border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white" maxlength="1">
      <input type="text" class="w-12 h-12 text-center border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white" maxlength="1">
      <input type="text" class="w-12 h-12 text-center border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white" maxlength="1">
      <input type="text" class="w-12 h-12 text-center border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white" maxlength="1">
      <input type="text" class="w-12 h-12 text-center border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white" maxlength="1">
      <input type="text" class="w-12 h-12 text-center border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white" maxlength="1">
    </div>
    <button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-600">Verify Code</button>
    <p class="text-sm text-center mt-4 text-gray-600 dark:text-gray-300">Can't find your code? <a href="#" class="text-blue-500 hover:underline dark:text-blue-400">Resend Code</a></p>
  </div>
</div>

A retro/vintage grayscale dashboard component for business/corporate websites, with moderate complexity and responsive design. Supports dark theme using Tailwind CSS dark: prefix for styling. Images sourced from picsum.photos and avatars from randomuser.me.

Open Preview

                <div class="bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 font-sans min-h-screen p-8">
    <div class="container mx-auto">
        <header class="flex justify-between items-center mb-8">
            <h1 class="text-3xl font-bold">Dashboard</h1>
            <div class="flex items-center space-x-4">
                <input type="text" placeholder="Search..." class="p-2 rounded bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200">
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            </div>
        </header>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            
            <div class="bg-white dark:bg-gray-700 shadow-md rounded-lg p-6">
                <h2 class="text-xl font-semibold mb-4">Sales Overview</h2>
                <div class="h-40 bg-gray-300 dark:bg-gray-600 rounded"></div>
            </div>

            
            <div class="bg-white dark:bg-gray-700 shadow-md rounded-lg p-6">
                <h2 class="text-xl font-semibold mb-4">Recent Activity</h2>
                <ul class="space-y-2">
                    <li class="flex justify-between"><span>New Order</span><span>$250</span></li>
                    <li class="flex justify-between"><span>Product View</span><span>Widget X</span></li>
                    <li class="flex justify-between"><span>User Login</span><span>Admin</span></li>
                </ul>
            </div>

            
            <div class="bg-white dark:bg-gray-700 shadow-md rounded-lg p-6">
                <h2 class="text-xl font-semibold mb-4">Traffic Sources</h2>
                <div class="h-40 bg-gray-300 dark:bg-gray-600 rounded"></div>
            </div>

            
            <div class="bg-white dark:bg-gray-700 shadow-md rounded-lg p-6 md:col-span-2 lg:col-span-3">
                <h2 class="text-xl font-semibold mb-4">Performance Metrics</h2>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                    <div>
                        <h3 class="text-lg">Revenue</h3>
                        <p class="text-2xl font-bold">$12,345</p>
                    </div>
                    <div>
                        <h3 class="text-lg">Visitors</h3>
                        <p class="text-2xl font-bold">5,678</p>
                    </div>
                    <div>
                        <h3 class="text-lg">Orders</h3>
                        <p class="text-2xl font-bold">901</p>
                    </div>
                    <div>
                        <h3 class="text-lg">Conversion</h3>
                        <p class="text-2xl font-bold">10.5%</p>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

Neumorphism Progress Bar

A Neumorphism-styled progress bar for portfolios, featuring a pastel color scheme, moderate complexity, responsiveness, and dark theme support. No JavaScript is included; the component is built with HTML and Tailwind CSS.

Open Preview

                <div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-800 p-4">
  <div class="w-full max-w-md bg-gray-200 dark:bg-gray-700 rounded-full shadow-inner dark:shadow-inner-dark overflow-hidden">
    <div class="bg-purple-400 text-xs leading-none py-1 text-center text-white rounded-full shadow-neumo-progress dark:shadow-neumo-progress-dark" style="width: 75%"> 75% </div>
  </div>
  <div class="mt-8 text-gray-700 dark:text-gray-300">
    Skill Progress
  </div>
</div>

<style>
.shadow-inner {
  box-shadow: inset 5px 5px 10px #b0b0b0,
              inset -5px -5px 10px #f0f0f0;
}

.dark .shadow-inner-dark {
  box-shadow: inset 5px 5px 10px #4a4a4a,
              inset -5px -5px 10px #363636;
}

.shadow-neumo-progress {
  box-shadow: 5px 5px 10px #a78bfa,
              -5px -5px 10px #c084fc;
}

.dark .shadow-neumo-progress-dark {
  box-shadow: 5px 5px 10px #6d28d9,
              -5px -5px 10px #7c3aed;
}
</style>

Search Box Component

A responsive search box component with a brutalist design, using a complementary color scheme suitable for business websites.

Open Preview

                <div class="flex flex-col items-center justify-center min-h-screen p-4 bg-gray-800 dark:bg-gray-900">
    <h1 class="text-4xl font-bold text-white mb-4">Find What You Need</h1>
    <div class="flex items-center border-b-2 border-yellow-400 dark:border-blue-400">
        <input type="text" placeholder="Search..." class="p-2 bg-gray-700 dark:bg-gray-800 text-yellow-400 dark:text-blue-400 placeholder-yellow-300 placeholder-opacity-50 dark:placeholder-blue-300 dark:placeholder-opacity-50 outline-none w-full" />
        <button class="bg-yellow-400 dark:bg-blue-400 text-gray-900 dark:text-white font-bold p-2 ml-2 hover:bg-yellow-500 dark:hover:bg-blue-500 transition duration-200">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Search" class="w-4 h-4 inline-block" />
        </button>
    </div>
    <div class="mt-4">
        <img src="https://picsum.photos/300/200" alt="Random Image" class="w-full max-w-md rounded-lg shadow-lg" />
    </div>
</div>

Dashboards Component

A retro-inspired dashboard component designed for business or corporate websites that combines 80s/90s aesthetics with a modern layout and color scheme. It is responsive and supports dark theme, featuring interactive elements such as cards for stats, user profiles, and more.

Open Preview

                <div class="flex flex-col min-h-screen bg-gray-50 dark:bg-gray-900">
    <header class="flex justify-between items-center p-4 bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-700 dark:to-pink-800 shadow-lg">
        <h1 class="text-2xl font-bold text-white">Dashboard</h1>
        <button class="bg-white text-purple-500 py-2 px-4 rounded-lg dark:bg-gray-800 dark:text-purple-400 transition-all">Edit</button>
    </header>
    <main class="flex-grow p-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md">
            <h2 class="font-semibold text-lg">Total Sales</h2>
            <p class="text-2xl text-purple-500 dark:text-purple-300">$45,000</p>
            <img src="https://picsum.photos/200" alt="Sales Chart" class="mt-4 rounded-lg">
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md">
            <h2 class="font-semibold text-lg">Users</h2>
            <p class="text-2xl text-purple-500 dark:text-purple-300">1200</p>
            <img src="https://picsum.photos/200" alt="User Statistics" class="mt-4 rounded-lg">
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md">
            <h2 class="font-semibold text-lg">Feedback</h2>
            <p class="text-2xl text-purple-500 dark:text-purple-300">300</p>
            <img src="https://picsum.photos/200" alt="Feedback Chart" class="mt-4 rounded-lg">
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md">
            <h2 class="font-semibold text-lg">Team Members</h2>
            <div class="flex space-x-2 mt-4">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="w-10 h-10 rounded-full">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User 2" class="w-10 h-10 rounded-full">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 3" class="w-10 h-10 rounded-full">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User 4" class="w-10 h-10 rounded-full">
            </div>
        </div>
    </main>
    <footer class="bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-700 dark:to-pink-800 text-white text-center p-4">
        <p>© 2023 Company Name. All rights reserved.</p>
    </footer>
</div>

360 Viewer Component

Resposnive 360 degree viewer component with dark mode support.

Open Preview

                <div class="flex justify-center items-center h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative w-64 h-64">
    <div class="absolute inset-0 transform rotate-45 bg-gray-300 dark:bg-gray-700"></div>
    <div class="absolute inset-0 transform -rotate-45 bg-gray-400 dark:bg-gray-600"></div>
    <div class="absolute inset-4 flex justify-center items-center bg-white dark:bg-gray-800">
      <div class="w-32 h-32 bg-gray-200 dark:bg-gray-700 rounded-full flex items-center justify-center">
        <svg class="w-16 h-16 text-gray-500 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="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14m-7 0l-4.553 2.276A1 1 0 013 15.382v-6.764a1 1 0 011.447-.894L7 10m0 4v6a1 1 0 001 1h3v-60H8a1 1 0 00-1 1v6zmz"></path></svg>
      </div>
    </div>
  </div>
</div>

Neumorphic Footer Component

A Neumorphic styled footer component for social media interfaces with vibrant colors and a complex layout, supporting dark mode.

Open Preview

                <footer class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg dark:shadow-2xl">
    <div class="flex flex-col items-center">
        <div class="flex space-x-6 mb-4">
            <a href="#" class="bg-blue-500 dark:bg-blue-700 text-white p-2 rounded-full shadow-md hover:shadow-lg transition transform hover:scale-105">
                <img src="https://picsum.photos/50?random=1" alt="Facebook" class="h-8 w-8 rounded-full">
            </a>
            <a href="#" class="bg-blue-400 dark:bg-blue-600 text-white p-2 rounded-full shadow-md hover:shadow-lg transition transform hover:scale-105">
                <img src="https://picsum.photos/50?random=2" alt="Twitter" class="h-8 w-8 rounded-full">
            </a>
            <a href="#" class="bg-red-500 dark:bg-red-700 text-white p-2 rounded-full shadow-md hover:shadow-lg transition transform hover:scale-105">
                <img src="https://picsum.photos/50?random=3" alt="Instagram" class="h-8 w-8 rounded-full">
            </a>
            <a href="#" class="bg-purple-500 dark:bg-purple-700 text-white p-2 rounded-full shadow-md hover:shadow-lg transition transform hover:scale-105">
                <img src="https://picsum.photos/50?random=4" alt="LinkedIn" class="h-8 w-8 rounded-full">
            </a>
        </div>
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-2">© 2023 Your Company</p>
        <p class="text-gray-500 dark:text-gray-400 text-xs">Follow us on social media!</p>
    </div>
</footer>

Minimalist Tooltip

A minimalist and flat design tooltip component for blog/content websites, with monochromatic color scheme and simple layout. It is responsive and supports dark mode using Tailwind CSS.

Open Preview

                <div class="relative flex items-center group">
  <button class="text-gray-600 dark:text-gray-300 px-4 py-2 rounded-md border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500">Hover Me</button>
  <div class="absolute bottom-full mb-2 hidden group-hover:block w-48 p-2 text-sm text-white bg-gray-800 dark:bg-gray-200 rounded-md shadow-lg">
    <span class="text-gray-200 dark:text-gray-800">This is a minimalist tooltip.</span>
    <svg class="absolute top-full left-1/2 transform -translate-x-1/2 w-3 h-3 text-gray-800 dark:text-gray-200 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 255 255"><polygon points="0,0 127.5,127.5 255,0"/></svg>
  </div>
</div>

1 ... 160 161 162 163 164 ... 335

Search Components

Categories

All Components

Skip to Content Link

E-commerce Container Component

Two-Factor Authentication Component

Retro Business Dashboard

Neumorphism Progress Bar

Search Box Component

Dashboards Component

360 Viewer Component

Neumorphic Footer Component

Minimalist Tooltip