Tailwind CSS Popover Components

Components

Tailwind CSS Popover Components - Madhuranjan UI

Explore a collection of stylish and functional popover components built with Tailwind CSS. These popovers enhance UI interactivity, provide contextual information, and improve user experience with smooth hover and click interactions. Fully responsive and supports both light and dark themes.

A simple and clean popover with default styling. It appears on hover or click and provides additional context or information. Fully responsive and supports both light and dark themes.

This is a simple default popover.

1<div class="flex h-40 items-end justify-center bg-gray-100 p-6 dark:bg-gray-900">
2  <div class="group relative inline-block">
3    <!-- Popover Trigger (Button) -->
4    <button class="rounded-lg bg-blue-600 px-4 py-2 text-white">Hover me</button>
5
6    <!-- Popover Content -->
7    <div class="invisible absolute bottom-full left-1/2 mb-3 w-56 -translate-x-1/2 scale-95 transform rounded-lg bg-white p-3 text-gray-900 opacity-0 shadow-lg transition-all duration-300 group-hover:visible group-hover:scale-100 group-hover:opacity-100 dark:bg-gray-800 dark:text-white">
8      <p class="text-sm">This is a simple default popover.</p>
9    </div>
10  </div>

A popover that displays social media profile previews, including profile pictures, usernames, and links. Ideal for interactive user profiles in social apps and networking platforms.

Madhuranjan UI

@MadhuranjanUI

Crafting high-quality Tailwind CSS components for modern Websites 🌊.

1,250 Followers320 Components

1  <div class="flex items-end justify-center h-72 dark:bg-gray-900 p-6">
2      <div class="relative inline-block group">
3        <button class="px-4 py-2 bg-blue-600 text-white rounded-lg">
4          View Profile
5        </button>
6
7        <div class="absolute left-1/2 bottom-full transform -translate-x-1/2 mb-3 w-64 bg-white dark:bg-gray-800 text-gray-900 dark:text-white shadow-lg rounded-lg opacity-0 scale-95 transition-all duration-300 invisible group-hover:visible group-hover:opacity-100 group-hover:scale-100">
8          <div class="absolute bottom-[-6px] left-1/2 transform -translate-x-1/2 w-3 h-3 bg-white dark:bg-gray-800 rotate-45"></div>
9
10          <div class="p-4">

This popover showcases star ratings and user reviews in a compact and interactive format. Great for product ratings, feedback sections, and e-commerce platforms.

5.0

⭐⭐⭐⭐⭐

See all (4)

5 star

78%

4 star

20%

3 star

2 star

1 star

1<div class="flex h-96 items-end justify-center bg-gray-100 p-6 dark:bg-gray-900">
2  <div class="relative group inline-block">
3    <!-- Popover Trigger (Button) -->
4    <button class="rounded-lg bg-blue-600 px-4 py-2 text-white">Hover me</button>
5
6    <!-- Popover Content -->
7    <div class="absolute bottom-full left-1/2 mb-3 w-80 -translate-x-1/2 scale-95 transform rounded-lg bg-white p-3 text-gray-900 opacity-0 shadow-lg transition-all duration-300 group-hover:opacity-100 group-hover:scale-100 dark:bg-gray-800 dark:text-white pointer-events-none group-hover:pointer-events-auto">
8      <div class="relative w-full p-4 bg-gray-900 text-white rounded-lg shadow-lg">
9        <div class="flex items-center justify-between">
10          <span class="text-lg font-semibold">5.0</span>

An informational popover that provides additional details when hovering over specific text. Perfect for glossary terms, tooltips, and quick explanations.

Machine learning is a subset ofArtificial Intelligence

Artificial Intelligence

AI enables machines to simulate human intelligence, learn from data, and make decisions. It powers applications like speech recognition, automation, and recommendation systems.

that allows systems to learn and improve from experience without being explicitly programmed.

1 <div class="relative flex justify-center items-end h-72 bg-gray-100 dark:bg-gray-900 p-6">
2      <p class="text-gray-800 dark:text-gray-200 text-lg">
3        Machine learning is a subset of
4        <span class="relative group font-semibold text-blue-600 dark:text-blue-400 cursor-pointer mx-1">
5          Artificial Intelligence
6          {/* Popover Content */}
7          <div class="absolute left-1/2 bottom-full mb-3 w-72 -translate-x-1/2 scale-95 transform opacity-0 shadow-lg rounded-lg bg-white p-4 text-gray-900 transition-all duration-300 group-hover:opacity-100 group-hover:scale-100 dark:bg-gray-800 dark:text-white pointer-events-none group-hover:pointer-events-auto">
8            <div class="flex flex-col">
9              {/* Title */}
10              <h3 class="text-lg font-semibold">Artificial Intelligence</h3>

A visually engaging popover that contains images along with content. Great for product previews, location highlights, or visual tooltips.

Visual Preview

This engaging popover is perfect for showcasing products, highlighting locations, or providing visual tooltips. Fully responsive with smooth transitions.

1<div class="h-96 flex justify-center items-start">
2  <div class="group relative inline-block">
3    <!-- Trigger Button -->
4    <button type="button" class="rounded-lg bg-violet-600 px-4 py-2 text-white shadow-md transition duration-300 hover:bg-violet-700 focus:outline-none dark:bg-blue-600 dark:hover:bg-blue-700">Hover Me</button>
5
6    <!-- Popover -->
7    <div class="absolute top-full left-1/2 z-20 mt-3 w-80 -translate-x-1/2 scale-95 transform opacity-0 transition-all duration-300 group-hover:scale-100 group-hover:opacity-100">
8      <div class="rounded-xl border border-gray-200 bg-white p-4 shadow-xl dark:border-gray-700 dark:bg-gray-800">
9        <!-- Image -->
10        <img class="h-40 w-full rounded-lg object-cover" src="https://via.placeholder.com/320x160" alt="Visual Preview" />

List Group Progress Bar