Tailwind CSS Top / Right / Bottom / Left

export default function PositionedImage() {
  return (
    <div className="relative h-screen w-screen bg-gray-100">
      {/* Parent Container */}
      <img
        src="https://images.unsplash.com/photo-1508873699372-7aeab60b44ab"
        alt="Landscape"
        className="absolute top-10 left-20 h-40 w-60 object-cover"
      />
      {/* Tailwind: top: 2.5rem; left: 5rem; height: 10rem; width: 15rem */}
    </div>
  );
}

export default function NegativeOffsetCard() {
  return (
    <div className="relative h-screen w-screen bg-gray-200">
      {/* Parent Container */}
      <div className="absolute -top-8 -left-12 h-28 w-60 bg-blue-500 text-white flex items-center justify-center">
        Negative Offset
      </div>
      {/* Tailwind: top: -32px; left: -48px */}
    </div>
  );
}

export default function LogicalPositioning() {
  return (
    <div className="relative h-screen w-screen bg-gray-50">
      <div dir="rtl" className="relative start-2 end-12 h-20 w-60 pt-4 top-10 bg-indigo-600 text-white pe-8">
        This text is written from right to left.
      </div>
      {/* Tailwind: adjusts positioning for RTL automatically */}
    </div>
  );
}

export default function StateBasedButton() {
  return (
    <div className="relative h-screen w-screen flex items-center justify-center bg-gray-50">
      {/* Button shifts upward on hover */}
      <button className="relative bg-teal-500 text-white px-4 py-2 rounded hover:top-[-10px] transition-all duration-200">
        Hover Me
      </button>
      {/* Tailwind on hover: top: -10px */}
    </div>
  );
}

export default function ResponsivePlacement() {
  return (
    <div className="relative h-screen w-screen bg-gray-100">
      <div className="absolute top-5 left-10 md:top-20 md:left-40 lg:top-40 lg:left-80 h-20 w-40 bg-purple-500 text-white flex items-center justify-center">
        Responsive Block
      </div>
      {/* Tailwind:
          Small screens: top: 5rem, left: 10rem
          Medium screens: top: 20rem, left: 40rem
          Large screens: top: 40rem, left: 80rem */}
    </div>
  );
}

import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

export default function CustomThemeOffset() {
  return (
    <div className="relative h-screen w-screen bg-gray-300">
      <div className="absolute top-1/7 left-58 h-24 w-48 bg-green-700 text-white flex items-center justify-center">
        Custom Offset
      </div>
    </div>
  );
}

export default function ArbitraryPlacement() {
  return (
    <div className="relative h-screen w-screen bg-gray-100">
      <div className="absolute top-[3.4375rem] left-[2.81rem] h-20 w-40 bg-orange-500 text-white flex items-center justify-center">
        Arbitrary Offset
      </div>
      {/* Tailwind: top: 55px; left: 45px */}
    </div>
  );
}

export default function ChatInterface() {
  const messages = [
    {
      id: 1,
      text: "Hey, how are you?",
      sender: "user",
      time: "09:30"
    },
    {
      id: 2,
      text: "I'm good, thanks! How about you?",
      sender: "other",
      time: "09:31"
    },
    {
      id: 3,
      text: "Working on a new project. It's quite exciting!",
      sender: "user",
      time: "09:32"
    },
    {
      id: 4,
      text: "That sounds interesting! Tell me more about it.",
      sender: "other",
      time: "09:33"
    },
    {
      id: 5,
      text: "It's a web application using Tailwind CSS.",
      sender: "user",
      time: "09:34"
    },
    {
      id: 6,
      text: "Nice choice! I love working with Tailwind.",
      sender: "other",
      time: "09:35"
    }
  ];

  return (
    <div className="max-w-2xl mx-auto p-4 space-y-4">
      {messages.map((message) => (
        <div
          key={message.id}
          className={`relative max-w-[80%] ${
            message.sender === "user" ? "ml-auto" : "mr-auto"
          }`}
        >
          <div
            className={`p-3 rounded-lg ${
              message.sender === "user"
                ? "bg-blue-500 text-white rounded-br-none"
                : "bg-gray-200 rounded-bl-none"
            }`}
          >
            {message.text}
          </div>
          <span
            className={`absolute bottom-0 ${
              message.sender === "user" ? "right-0" : "left-0"
            } text-xs text-gray-500 -mb-5`}
          >
            {message.time}
          </span>
        </div>
      ))}
    </div>
  );
}

export default function Modal() {
  const modalContent = {
    title: "Subscribe to Newsletter",
    description: "Get the latest updates directly in your inbox!",
    features: [
      {
        id: 1,
        title: "Weekly Updates",
        description: "Stay informed with our weekly newsletter"
      },
      {
        id: 2,
        title: "Exclusive Content",
        description: "Access to subscriber-only articles"
      },
      {
        id: 3,
        title: "Early Access",
        description: "Be the first to know about new features"
      },
      {
        id: 4,
        title: "Special Offers",
        description: "Receive exclusive discounts and deals"
      },
      {
        id: 5,
        title: "Community Access",
        description: "Join our private community"
      },
      {
        id: 6,
        title: "Priority Support",
        description: "Get faster responses to your queries"
      }
    ]
  };

  return (
    <div className="bg-black bg-opacity-50 flex items-center justify-center">
      <div className="relative bg-white rounded-xl w-full max-w-md p-6">
        <button className="absolute top-7 right-4 text-gray-400 hover:text-gray-600">
          <svg
            className="w-6 h-6"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M6 18L18 6M6 6l12 12"
            />
          </svg>
        </button>
        <h2 className="text-2xl font-bold mb-4">{modalContent.title}</h2>
        <p className="text-gray-600 mb-6">{modalContent.description}</p>
        <div className="space-y-4">
          {modalContent.features.map((feature) => (
            <div key={feature.id} className="flex items-start gap-3">
              <svg
                className="w-5 h-5 text-green-500 mt-1"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M5 13l4 4L19 7"
                />
              </svg>
              <div>
                <h3 className="font-medium">{feature.title}</h3>
                <p className="text-sm text-gray-500">{feature.description}</p>
              </div>
            </div>
          ))}
        </div>
        <button className="mt-6 w-full bg-blue-500 text-white py-2 rounded-lg hover:bg-blue-600">
          Subscribe Now
        </button>
      </div>
    </div>
  );
}

export default function CookieConsent() {
  const cookieTypes = [
    {
      id: 1,
      name: "Essential",
      description: "Required for basic site functionality",
      required: true
    },
    {
      id: 2,
      name: "Analytics",
      description: "Help us improve our website",
      required: false
    },
    {
      id: 3,
      name: "Marketing",
      description: "Personalized advertisements",
      required: false
    },
    {
      id: 4,
      name: "Social Media",
      description: "Enable social sharing features",
      required: false
    },
  ];

  return (
    <div className="fixed bottom-0 left-0 right-0 bg-gray-900 text-white p-6">
      <div className="max-w-4xl mx-auto">
        <h3 className="text-xl font-bold mb-4">Cookie Preferences</h3>
        <p className="mb-4">
          We use cookies to enhance your browsing experience and analyze our traffic.
        </p>
        <div className="grid grid-cols-2 gap-4 mb-6">
          {cookieTypes.map((cookie) => (
            <div key={cookie.id} className="flex items-center">
              <input
                type="checkbox"
                defaultChecked={cookie.required}
                disabled={cookie.required}
                className="mr-2"
              />
              <div>
                <p className="font-medium">{cookie.name}</p>
                <p className="text-sm text-gray-300">{cookie.description}</p>
              </div>
            </div>
          ))}
        </div>
        <div className="flex justify-end space-x-4">
          <button className="px-6 py-2 bg-gray-600 rounded">Reject All</button>
          <button className="px-6 py-2 bg-blue-600 rounded">Accept All</button>
        </div>
      </div>
    </div>
  );
}

export default function SocialSharePanel() {
  const socialLinks = [
    {
      name: "Facebook",
      icon: "https://images.unsplash.com/photo-1634942537034-2531766767d1",
      alt: "Facebook sharing icon",
      color: "bg-blue-600"
    },
    {
      name: "Twitter",
      icon: "https://images.unsplash.com/photo-1611605698335-8b1569810432",
      alt: "Twitter sharing icon",
      color: "bg-sky-400"
    },
    {
      name: "LinkedIn",
      icon: "https://images.unsplash.com/photo-1611944212129-29977ae1398c",
      alt: "LinkedIn sharing icon",
      color: "bg-blue-800"
    },
    {
      name: "Pinterest",
      icon: "https://images.unsplash.com/photo-1611162617474-5b21e879e113",
      alt: "Pinterest sharing icon",
      color: "bg-red-600"
    },
    {
      name: "WhatsApp",
      icon: "https://images.unsplash.com/photo-1633355444132-695d5876cd00",
      alt: "WhatsApp sharing icon",
      color: "bg-green-500"
    },
    {
      name: "Email",
      icon: "https://images.unsplash.com/photo-1557200134-90327ee9fafa",
      alt: "Email sharing icon",
      color: "bg-gray-600"
    }
  ];

  return (
    <div className="fixed right-4 top-1/2 -translate-y-1/2 flex flex-col gap-3">
      {socialLinks.map((social) => (
        <button
          key={social.name}
          className={`${social.color} p-3 rounded-full hover:scale-110 transition-transform`}
        >
          <img src={social.icon} alt={social.alt} className="w-6 h-6" />
        </button>
      ))}
    </div>
  );
}

export default function BottomNavigation() {
  const navItems = [
    {
      name: "Home",
      icon: "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe",
      alt: "Home icon"
    },
    {
      name: "Search",
      icon: "https://images.unsplash.com/photo-1612178537253-bccd437b730e",
      alt: "Search icon"
    },
    {
      name: "Cart",
      icon: "https://images.unsplash.com/photo-1557899563-1940fc95709c",
      alt: "Cart icon"
    },
  ];

  return (
    <nav className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 px-4 py-2">
      <div className="flex justify-between items-center max-w-lg mx-auto">
        {navItems.map((item) => (
          <button
            key={item.name}
            className="flex flex-col items-center p-2 hover:bg-gray-50 rounded-lg"
          >
            <img src={item.icon} alt={item.alt} className="w-6 h-6 mb-1" />
            <span className="text-xs text-gray-600">{item.name}</span>
          </button>
        ))}
      </div>
    </nav>
  );
}

// App.js
  import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

export default function NotificationBadge() {
  return (
    <div className="relative inline-block mx-20 mt-10">
      <img
        src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e"
        alt="Profile"
        className="w-12 h-12 rounded-full"
      />
      <div className="absolute top-notification right-badge-right">
        <span className="flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-[10px] text-white">
          3
        </span>
      </div>
    </div>
  )
}

// App.js
  import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

export default function FloatingActionMenu() {
  return (
    <div className="fixed bottom-8 right-8">
      <button className="absolute bottom-0 right-0 w-14 h-14 bg-blue-600 rounded-full shadow-lg flex items-center justify-center">
        <img
          src="https://images.unsplash.com/photo-1589156191108-c762ff4b96ab"
          alt="Menu"
          className="w-6 h-6"
        />
      </button>
      
      <button className="absolute bottom-action-1 right-0 w-12 h-12 bg-green-500 rounded-full shadow-lg flex items-center justify-center">
        <img
          src="https://images.unsplash.com/photo-1589156191108-c762ff4b96ab"
          alt="Add"
          className="w-5 h-5"
        />
      </button>
      
      <button className="absolute bottom-action-2 right-0 w-12 h-12 bg-yellow-500 rounded-full shadow-lg flex items-center justify-center">
        <img
          src="https://images.unsplash.com/photo-1589156191108-c762ff4b96ab"
          alt="Edit"
          className="w-5 h-5"
        />
      </button>
      
      <button className="absolute bottom-action-3 right-0 w-12 h-12 bg-red-500 rounded-full shadow-lg flex items-center justify-center">
        <img
          src="https://images.unsplash.com/photo-1589156191108-c762ff4b96ab"
          alt="Delete"
          className="w-5 h-5"
        />
      </button>
    </div>
  )
}

// App.js
  import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

export default function SlidingTooltip() {
  return (
    <div className="relative group inline-block">
      <button className="px-4 py-2 bg-purple-600 text-white rounded-lg">
        Hover Me
      </button>
      
      <div className="absolute left-tooltip-start opacity-0 group-hover:opacity-100 group-hover:left-tooltip-end transition-all duration-300 bg-gray-900 text-white px-3 py-2 rounded w-48">
        <span className="block text-sm">
          This is a custom positioned tooltip that slides in from the left
        </span>        
      </div>
    </div>
  )
}

export default function HighContrastBadge() {
  return (
    <div className="relative inline-block">
      <img
        src="https://images.unsplash.com/photo-1677086813101-496781a0f327"
        alt="User Avatar"
        className="w-12 h-12 rounded-full"
      />
      <div
        role="status"
        className="absolute right-0 top-0 translate-x-1/2 bg-red-500 text-white rounded-full px-2 py-1 text-xs font-semibold"
      >
        99+
      </div>
    </div>
  );
}