Buy Seats Component

app.js

import React, { useState } from 'react';

const BuyNowButton = ({ remainingSeats }) => {
  const [isHovered, setIsHovered] = useState(false);

  const borderColor = 'rgb(229, 231, 235)'; // Tailwind's gray-200
  const buttonColor = 'rgb(243, 244, 246)'; // Tailwind's gray-50

  return (
    <div className="relative inline-block font-sans">
      <div
        className={`absolute bottom-full left-0 w-full mb-[-1px] px-3 py-1 bg-white text-gray-600 text-xs transition-all duration-200 ease-out ${
          isHovered ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-1 pointer-events-none'
        }`}
        style={{
          borderTop: `1px solid ${borderColor}`,
          borderLeft: `1px solid ${borderColor}`,
          borderRight: `1px solid ${borderColor}`,
          borderTopLeftRadius: '0.375rem',
          borderTopRightRadius: '0.375rem',
        }}
      >
        {remainingSeats} seats remaining
      </div>
      <button
        className={`w-full bg-${buttonColor} hover:bg-gray-50 text-gray-800 font-semibold py-2 px-4 rounded-md transition-all duration-200 ease-out ${
          isHovered ? 'border-b-0 border-l-0 border-r-0' : ''
        }`}
        style={{
          boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)',
          border: `1px solid ${borderColor}`,
          borderTopLeftRadius: isHovered ? 0 : '0.375rem',
          borderTopRightRadius: isHovered ? 0 : '0.375rem',
        }}
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
      >
        Buy now
      </button>
    </div>
  );
};

export default function App() {
  return (
    <div className="flex justify-center items-center h-screen bg-gray-100">
      <div className="w-32">
        <BuyNowButton remainingSeats={2} />
      </div>
    </div>
  );
}

This React component showcases a visually appealing and interactive "Buy Now" button with a tooltip.

Usage

1 Import:

import BuyNowButton from './BuyNowButton';

2. Usage in your React component:

   <BuyNowButton remainingSeats={2} />

Example

import React from 'react';
import BuyNowButton from './BuyNowButton';

function App() {
  return (
    <div className="flex justify-center items-center h-screen bg-gray-100">
      <div className="w-32">
        <BuyNowButton remainingSeats={5} />
      </div>
    </div>
  );
}

export default App;