Search Components

All Components

Browse all available Tailwind CSS components

Maps Component

Maps Component with Skeuomorphism design, Triadic color scheme, Moderate complexity, and Social Media purpose. Responsive design with dark theme support using Tailwind CSS.

Open Preview

                <div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-xl">
  <div class="relative rounded-lg overflow-hidden shadow-inner-lg">
    <img src="https://picsum.photos/800/400?random=1" alt="Map" class="w-full h-full object-cover filter grayscale contrast-125">
    <div class="absolute inset-0 bg-gradient-to-br from-blue-500 via-green-500 to-red-500 opacity-50"></div>
    <div class="absolute inset-0 flex items-center justify-center">
      <div class="bg-white dark:bg-gray-900 p-4 rounded-full shadow-lg transform scale-110">
        <svg class="h-8 w-8 text-gray-700 dark:text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0l-4.243-4.243a8 8 0 1111.314 0z"/>
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
        </svg>
      </div>
    </div>
  </div>
  <div class="mt-4 flex items-center justify-between">
    <div class="flex items-center space-x-2">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white shadow">
      <div>
        <p class="font-bold text-gray-800 dark:text-white">John Doe</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">Exploring New York</p>
      </div>
    </div>
    <div class="flex space-x-2">
      <button class="flex items-center space-x-1 px-3 py-1 bg-blue-500 text-white text-sm rounded-full shadow-lg hover:bg-blue-600 transition duration-300">
        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21c-.64-.149-1.285-.451-1.8-.9a1.998 1.998 0 00-.682-.715l-3.5-3.5a2 2 0 00-2.828 0c-.5.5-.766 1.12-.766 1.727v0l-1.5.5a2 2 0 01-2 2.457v0A2 2 0 015 21H3v-3.5z"/>
        </svg>
        <span>Like</span>
      </button>
      <button class="flex items-center space-x-1 px-3 py-1 bg-green-500 text-white text-sm rounded-full shadow-lg hover:bg-green-600 transition duration-300">
        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <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.986 9.986 0 01-4.196-1.183c-.348-.252-.698-.48-.997-.716l-.006-.007C3.529 16.418 2 13.938 2 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
        </svg>
        <span>Comment</span>
      </button>
      <button class="flex items-center space-x-1 px-3 py-1 bg-red-500 text-white text-sm rounded-full shadow-lg hover:bg-red-600 transition duration-300">
        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.865 13.586 9 13.93 9 14.292V16H4.091C5.524 17.18 7.208 18 9 18h.083A6.001 6.001 0 0017 12c0-2.879-1.647-5.334-4-6.632V7c0 .456-.213.875-.568 1.1L9 10H6v2l4.515-.324c.142.3.335.591.576.865z"/>
        </svg>
        <span>Share</span>
      </button>
    </div>
  </div>
</div>

User Profiles Component

Glassmorphism User Profile Component with Monochromatic color scheme and Simple complexity.

Open Preview

                
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="w-full max-w-sm bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20">
    <div class="px-6 py-8">
      <div class="flex justify-center">
        <img class="h-24 w-24 rounded-full border-4 border-gray-300 dark:border-gray-700" src="https://randomuser.me/api/portraits/men/88.jpg" alt="User Avatar">
      </div>
      <div class="mt-4 text-center">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white">John Doe</h2>
        <p class="text-gray-600 dark:text-gray-300">Web Developer</p>
      </div>
      <div class="mt-6 flex justify-center space-x-4">
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.917 3.187 9.165 7.62 10.692.55.1 1.05-.25 1.05-.56V20.23c-3.03.65-3.676-1.44-3.676-1.44-.59-.15-1.21-.45-1.44-.66-.42-.36-.33-.04-.05-.03.33.03.53.27.53.27.2 1.52 1.25 1.05 1.55.8.04-.63.23-1.05.42-1.29-2-.23-4.1-.1-4.1-4.42 0-.98.35-1.86 1.02-2.5.1-.21-.45-1.25.1-2.62 0 0 .84-.27 2.75 1.02.8-.23 1.65-.34 2.5-.35.85.01 1.7.12 2.5.35 1.9-.29 2.75-1.02 2.75-1.02.56 1.37.1 2.41.1 2.62.67.64 1.02 1.52 1.02 2.5 0 4.33-2.07 4.71-4.11 4.42-.29.25-.58.48-.9.69-.23.16-.5.2-.82.1-.48-.15-1.05.5-1.05.5V22.11c0 .31.5.66 1.05.5C19.818 21.182 23 16.934 23 12.017 23 6.484 18.522 2 13 2h-1z" clip-rule="evenodd"></path>
          </svg>
        </a>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
             <path d="M8.29 20.251c7.5 0 11.675-6.253 11.675-11.675 0-.178 0-.35-.012-.523A8.134 8.134 0 0022 5.92a8.171 8.171 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.222 8.222 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path>
          </svg>
        </a>
      </div>
    </div>
  </div>
</div>

Login Form Component

A minimalist login form component designed with a triadic color scheme suitable for portfolio showcasing with dark mode support.

Open Preview

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 w-full max-w-sm">
        <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200 text-center">Login</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-600 dark:text-gray-400 mb-2" for="email">Email</label>
                <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 dark:bg-gray-700 mb-3 leading-tight focus:outline-none focus:ring focus:ring-indigo-300 dark:focus:ring-indigo-600" type="email" id="email" required placeholder="[email protected]">
            </div>
            <div class="mb-6">
                <label class="block text-gray-600 dark:text-gray-400 mb-2" for="password">Password</label>
                <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 dark:bg-gray-700 mb-3 leading-tight focus:outline-none focus:ring focus:ring-indigo-300 dark:focus:ring-indigo-600" type="password" id="password" required placeholder="********">
            </div>
            <div class="flex items-center justify-between">
                <label class="inline-flex items-center">
                    <input type="checkbox" class="form-checkbox h-4 w-4 text-indigo-600 dark:bg-gray-600 rounded">
                    <span class="ml-2 text-gray-700 dark:text-gray-200">Remember Me</span>
                </label>
                <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-400 dark:hover:text-indigo-300 text-sm">Forgot Password?</a>
            </div>
            <div class="mt-8">
                <button class="bg-indigo-600 hover:bg-indigo-500 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">Login</button>
            </div>
        </form>
        <div class="mt-6 text-center">
            <p class="text-gray-700 dark:text-gray-400 text-sm">Don't have an account? <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-500">Sign Up</a></p>
        </div>
    </div>
</div>

Error Messages Component

A glassmorphism style error messages component with a dark theme for business use. It utilizes Tailwind CSS for styling with responsive design and interactive elements.

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="bg-white dark:bg-gray-800 rounded-lg shadow-lg backdrop-blur-sm bg-opacity-30 p-6 max-w-md w-full">
        <h2 class="text-xl font-bold text-gray-800 dark:text-white">Error Message</h2>
        <p class="text-gray-600 dark:text-gray-300">An error has occurred while processing your request. Please try again later.</p>
        <div class="flex justify-center mt-4">
            <img src="https://picsum.photos/100/100" alt="Error Image" class="rounded-full border-4 border-gray-200 dark:border-gray-700" />
        </div>
        <div class="flex flex-col items-center mt-4">
            <button class="bg-green-500 hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-800 text-white font-semibold py-2 px-4 rounded mb-2">Retry</button>
            <button class="bg-red-500 hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-800 text-white font-semibold py-2 px-4 rounded">Cancel</button>
        </div>
        <div class="mt-4">
            <div class="flex items-center space-x-2">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="h-10 w-10 rounded-full" />
                <span class="text-gray-700 dark:text-gray-300">Support Team</span>
            </div>
        </div>
    </div>
</div>

A simple 360° viewer component styled in Material Design with Earth tones for an e-commerce context. It includes a responsive design with support for dark mode, showcasing images from picsum.photos and avatars from randomuser.me.

Open Preview

                <div class="container mx-auto p-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white">360° Product Viewer</h2>
        <div class="mt-4 flex justify-center items-center">
            <img src="https://picsum.photos/500/300?random=1" alt="360° View" class="rounded-lg shadow-md transition-transform duration-300 hover:scale-105">
        </div>
        <div class="mt-4 text-center">
            <p class="text-gray-600 dark:text-gray-300">Explore our product from all angles. Rotate to view details and features.</p>
        </div>
        <div class="mt-6 flex justify-center">
            <button class="bg-green-600 dark:bg-green-800 text-white font-semibold py-2 px-4 rounded shadow-md hover:bg-green-500 dark:hover:bg-green-700 transition duration-200">Buy Now</button>
        </div>
        <div class="mt-6 text-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-12 h-12 shadow-lg">
            <p class="mt-2 text-gray-600 dark:text-gray-300">John Doe - E-commerce Specialist</p>
        </div>
    </div>
</div>

Product Cards Component

Product Card Component with Brutalism style, Monochromatic color scheme, Complex complexity level for E-commerce purpose.

Open Preview

                <div class="dark:bg-stone-900 bg-stone-100 p-6">
  <div class="container mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

    <!-- Product Card 1 -->
    <div class="dark:bg-stone-800 bg-white border-4 dark:border-stone-700 border-stone-300 dark:text-stone-200 text-stone-800 flex flex-col">
      <img src="https://picsum.photos/seed/product1/400/300" alt="Product Image 1" class="w-full h-48 object-cover border-b-4 dark:border-stone-700 border-stone-300">
      <div class="p-6 flex-grow flex flex-col justify-between tracking-wide">
        <div>
          <h3 class="text-2xl font-bold mb-2 uppercase">Product Title 1</h3>
          <p class="text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <div class="flex items-center mb-4">
            <span class="text-xl font-bold mr-2">$49.99</span>
            <span class="text-sm line-through dark:text-stone-400 text-stone-500">$59.99</span>
          </div>
        </div>
        <div class="mt-4 dark:border-stone-700 border-stone-300 border-t pt-4 grid grid-cols-2 gap-4 text-center">
          <button class="dark:bg-stone-700 bg-stone-300 dark:hover:bg-stone-600 hover:bg-stone-400 text-stone-900 dark:text-stone-100 font-bold py-2 px-4 border-4 dark:border-stone-600 border-stone-400 uppercase">Add to Cart</button>
          <button class="dark:bg-stone-700 bg-stone-300 dark:hover:bg-stone-600 hover:bg-stone-400 text-stone-900 dark:text-stone-100 font-bold py-2 px-4 border-4 dark:border-stone-600 border-stone-400 uppercase">Wishlist</button>
        </div>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="dark:bg-stone-800 bg-white border-4 dark:border-stone-700 border-stone-300 dark:text-stone-200 text-stone-800 flex flex-col">
      <img src="https://picsum.photos/seed/product2/400/300" alt="Product Image 2" class="w-full h-48 object-cover border-b-4 dark:border-stone-700 border-stone-300">
      <div class="p-6 flex-grow flex flex-col justify-between tracking-wide">
        <div>
          <h3 class="text-2xl font-bold mb-2 uppercase">Product Title 2</h3>
          <p class="text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <div class="flex items-center mb-4">
            <span class="text-xl font-bold mr-2">$75.00</span>
            <span class="text-sm line-through dark:text-stone-400 text-stone-500">$90.00</span>
          </div>
        </div>
        <div class="mt-4 dark:border-stone-700 border-stone-300 border-t pt-4 grid grid-cols-2 gap-4 text-center">
          <button class="dark:bg-stone-700 bg-stone-300 dark:hover:bg-stone-600 hover:bg-stone-400 text-stone-900 dark:text-stone-100 font-bold py-2 px-4 border-4 dark:border-stone-600 border-stone-400 uppercase">Add to Cart</button>
          <button class="dark:bg-stone-700 bg-stone-300 dark:hover:bg-stone-600 hover:bg-stone-400 text-stone-900 dark:text-stone-100 font-bold py-2 px-4 border-4 dark:border-stone-600 border-stone-400 uppercase">Wishlist</button>
        </div>
      </div>
    </div>

    <!-- Product Card 3 -->
    <div class="dark:bg-stone-800 bg-white border-4 dark:border-stone-700 border-stone-300 dark:text-stone-200 text-stone-800 flex flex-col">
      <img src="https://picsum.photos/seed/product3/400/300" alt="Product Image 3" class="w-full h-48 object-cover border-b-4 dark:border-stone-700 border-stone-300">
      <div class="p-6 flex-grow flex flex-col justify-between tracking-wide">
        <div>
          <h3 class="text-2xl font-bold mb-2 uppercase">Product Title 3</h3>
          <p class="text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <div class="flex items-center mb-4">
            <span class="text-xl font-bold mr-2">$120.00</span>
            <span class="text-sm line-through dark:text-stone-400 text-stone-500">$150.00</span>
          </div>
        </div>
        <div class="mt-4 dark:border-stone-700 border-stone-300 border-t pt-4 grid grid-cols-2 gap-4 text-center">
          <button class="dark:bg-stone-700 bg-stone-300 dark:hover:bg-stone-600 hover:bg-stone-400 text-stone-900 dark:text-stone-100 font-bold py-2 px-4 border-4 dark:border-stone-600 border-stone-400 uppercase">Add to Cart</button>
          <button class="dark:bg-stone-700 bg-stone-300 dark:hover:bg-stone-600 hover:bg-stone-400 text-stone-900 dark:text-stone-100 font-bold py-2 px-4 border-4 dark:border-stone-600 border-stone-400 uppercase">Wishlist</button>
        </div>
      </div>
    </div>

  </div>
</div>

Content Display Component

A responsive content display component featuring a minimalist and flat design style, ideal for blogs and content consumption. It has a grayscale color scheme and is equipped with interactive elements while supporting dark mode.

Open Preview

                <div class="max-w-xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
    <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar">
        <div class="ml-4">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">John Doe</h2>
            <p class="text-gray-600 dark:text-gray-400">January 1, 2023</p>
        </div>
    </div>
    <h3 class="text-lg font-bold text-gray-800 dark:text-gray-200">Understanding Minimalism in Design</h3>
    <img class="w-full h-48 object-cover rounded-md my-4" src="https://picsum.photos/640/360?random=1" alt="Content Image">
    <p class="text-gray-700 dark:text-gray-300 mb-4">Minimalism in design is all about simplicity and the use of space. By focusing on fewer elements, designers can create engaging experiences that are not only functional but also aesthetically pleasing. In this blog post, we will explore the principles of minimalism and how they can be applied.</p>
    <a href="#" class="inline-block bg-gray-800 text-white rounded-md px-4 py-2 hover:bg-gray-700 dark:bg-gray-300 dark:text-gray-800 dark:hover:bg-gray-400">Read More</a>
</div>

Infographics Component

A simple infographics component designed with Neumorphism style and a Pastel color scheme. It displays a profile card and basic statistics in a visually appealing layout suitable for business or corporate websites.

Open Preview

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md flex flex-col items-center">
    <div class="bg-white dark:bg-gray-700 p-4 rounded-full shadow-lg mb-4">
        <img src="https://picsum.photos/80/80" alt="Infographic Image" class="rounded-full">
    </div>
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">John Doe</h2>
    <p class="text-gray-600 dark:text-gray-400">CEO, Company XYZ</p>
    <div class="mt-4 flex justify-between w-full">
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg text-center">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Projects</h3>
            <p class="text-2xl font-bold text-gray-800 dark:text-gray-200">120</p>
        </div>
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg text-center">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Clients</h3>
            <p class="text-2xl font-bold text-gray-800 dark:text-gray-200">80</p>
        </div>
    </div>
    <div class="mt-4 bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg w-full text-center">
        <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Satisfaction Rate</h3>
        <p class="text-2xl font-bold text-gray-800 dark:text-gray-200">95%</p>
    </div>
</div>

Media Embed Component

A responsive Media Embed Component with Glassmorphism design, earth tone colors, and dark mode support, built with Tailwind CSS for social media use cases. Includes a frosted glass effect and uses placeholder images/avatars.

Open Preview

                <div class="relative overflow-hidden rounded-lg shadow-lg group bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg dark:bg-gray-800 dark:bg-opacity-10 dark:backdrop-filter dark:backdrop-blur-lg"> <div class="relative w-full overflow-hidden bg-gray-200 rounded-t-lg aspect-w-16 aspect-h-9 group-hover:opacity-75"> <img src="https://picsum.photos/id/237/1000/600" alt="Placeholder image" class="object-cover object-center w-full h-full"> </div> <div class="flex items-center px-5 py-4"> <div class="flex-shrink-0"> <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar"> </div> <div class="ml-3"> <p class="text-sm font-medium text-gray-900 dark:text-white"> <a href="#" class="hover:underline"> Username </a> </p> <p class="text-xs text-gray-700 dark:text-gray-300"> Posted on March 15, 2023 </p> </div> </div> <div class="p-5"> <h3 class="text-lg font-medium text-gray-900 dark:text-white"> <a href="#"> Title of the Embedded Media </a> </h3> <p class="mt-2 text-sm text-gray-700 dark:text-gray-300"> This is a description of the embedded media, providing some context or details about the content. </p> </div> <div class="flex items-center justify-between px-5 py-3 bg-gray-100 dark:bg-gray-700 dark:bg-opacity-20"> <div class="flex space-x-4"> <span class="text-sm text-gray-700 dark:text-gray-300">Likes: 1.2k</span> <span class="text-sm text-gray-700 dark:text-gray-300">Comments: 350</span> </div> <a href="#" class="text-sm font-medium text-yellow-700 hover:text-yellow-600 dark:text-yellow-500 dark:hover:text-yellow-400"> View More </a> </div> </div>

Neumorphism Loader

A simple Neumorphism loader component with a Monochromatic color scheme for a portfolio, with responsive design and dark theme support.

Open Preview

                <div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-800">
  <div class="flex space-x-2 animate-pulse">
    <div class="w-4 h-4 bg-gray-400 rounded-full dark:bg-gray-600 shadow-inner dark:shadow-inner-dark"></div>
    <div class="w-4 h-4 bg-gray-400 rounded-full dark:bg-gray-600 shadow-inner dark:shadow-inner-dark"></div>
    <div class="w-4 h-4 bg-gray-400 rounded-full dark:bg-gray-600 shadow-inner dark:shadow-inner-dark"></div>
  </div>
</div>

1 ... 232 233 234 235 236 ... 335

Search Components

Categories

All Components

Maps Component

User Profiles Component

Login Form Component

Error Messages Component

360° Viewer Component

Product Cards Component

Content Display Component

Infographics Component

Media Embed Component

Neumorphism Loader