Login/Signup Component

<div class="min-h-screen flex items-center justify-center p-4 bg-pink-50 dark:bg-gray-900 transition-colors duration-300">
  <div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden md:max-w-lg lg:max-w-xl transition-all duration-300 transform hover:scale-[1.01] hover:shadow-2xl">
    <div class="md:flex">
      <div class="w-full p-8 px-6 md:px-8">
        <div class="text-center mb-8">
          <h2 class="text-3xl font-extrabold text-pink-600 dark:text-pink-400 leading-tight tracking-tighter mb-2 transition-colors duration-300">
            Welcome
          </h2>
          <p class="text-gray-600 dark:text-gray-400 text-lg transition-colors duration-300">
            Join or sign in to continue
          </p>
        </div>

        <div class="relative flex flex-col items-center justify-center mb-6">
          <div class="absolute inset-x-0 top-1/2 h-px bg-gray-200 dark:bg-gray-700 w-full transform -translate-y-1/2"></div>
          <button class="relative px-4 py-2 bg-pink-100 dark:bg-gray-700 text-pink-700 dark:text-gray-300 rounded-full text-sm font-semibold transition-colors duration-300 z-10">
            Log In
          </button>
          <button class="relative px-4 py-2 ml-4 bg-mint-green-100 dark:bg-gray-700 text-mint-green-700 dark:text-gray-300 rounded-full text-sm font-semibold transition-colors duration-300 z-10">
            Sign Up
          </button>
        </div>

        <form>
          <div class="mb-6">
            <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 transition-colors duration-300">Email Address</label>
            <input type="email" id="email" name="email" placeholder="[email protected]" class="mt-1 block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-mint-green-500 focus:border-mint-green-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 transition-colors duration-300 outline-none focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
          </div>

          <div class="mb-6">
            <div class="flex justify-between items-center">
              <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 transition-colors duration-300">Password</label>
              <a href="#" class="text-sm text-pink-600 dark:text-pink-400 hover:underline transition-colors duration-300">Forgot Password?</a>
            </div>
            <input type="password" id="password" name="password" placeholder="••••••••" class="mt-1 block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-mint-green-500 focus:border-mint-green-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 transition-colors duration-300 outline-none focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
          </div>

          <button type="submit" class="w-full py-3 px-6 bg-mint-green-500 text-white font-semibold rounded-md shadow-lg hover:bg-mint-green-600 focus:outline-none focus:ring-2 focus:ring-mint-green-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-all duration-300 transform hover:-translate-y-0.5">
            Login
          </button>

          <p class="mt-6 text-center text-sm text-gray-600 dark:text-gray-400 transition-colors duration-300">
            Don't have an account? <a href="#" class="font-medium text-pink-600 dark:text-pink-400 hover:underline transition-colors duration-300">Sign up now</a>
          </p>
        </form>
      </div>
    </div>
  </div>
</div>

<style>
  /* Custom colors for 'candy/sweet' palette if not directly in Tailwind config */
  /* Add to your tailwind.config.js for full integration: */
  /*
  module.exports = {
    theme: {
      extend: {
        colors: {
          'pink-50': '#FFF0F5',   // Lavender Blush
          'pink-100': '#FFE4E1',  // Misty Rose
          'pink-600': '#FF69B4',  // Hot Pink
          'pink-700': '#C71585',  // Medium Violet Red
          'mint-green-100': '#F0FFF4', // Mint Cream
          'mint-green-500': '#98FB98', // Pale Green
          'mint-green-600': '#3CB371'  // Medium Sea Green
        }
      }
    },
    // ... other config
  }
  */
</style>