<div class="flex items-center justify-center h-screen">
    <div class="w-full max-w-md bg-white p-6 rounded-lg shadow-lg">
    <!-- Logo and Heading -->
    <div class="text-center">
      <h1 class="text-2xl font-semibold text-blue-600 flex items-center justify-center">
        <span class="mr-1 text-3xl font-bold">ES</span>
        BAZAR
      </h1>
      <p class="text-gray-500 text-sm mt-1">
        Best online ecommerce website for you
      </p>
    </div>

    <!-- Divider -->
    <div class="my-6 border-t border-gray-300 relative">
      <span class="absolute top-[-10px] bg-white left-1/2 transform -translate-x-1/2 px-3 text-gray-500">
        Sign up
      </span>
    </div>

    <!-- Form -->
    <form class="space-y-4">
      <!-- Full Name -->
      <div>
        <input
          type="text"
          placeholder="Full Name"
          class="w-full px-4 py-2 border border-gray-300 rounded-lg text-gray-700 focus:outline-none focus:ring focus:ring-blue-100"
        />
      </div>

      <!-- Mobile Number -->
      <div>
        <input
          type="text"
          placeholder="Mobile Number"
          class="w-full px-4 py-2 border border-gray-300 rounded-lg text-gray-700 focus:outline-none focus:ring focus:ring-blue-100"
        />
      </div>

      <!-- Email -->
      <div>
        <input
          type="email"
          placeholder="Email"
          class="w-full px-4 py-2 border border-gray-300 rounded-lg text-gray-700 focus:outline-none focus:ring focus:ring-blue-100"
        />
      </div>

      <!-- Password -->
      <div class="relative">
        <input
          type="password"
          placeholder="Password"
          class="w-full px-4 py-2 border border-gray-300 rounded-lg text-gray-700 focus:outline-none focus:ring focus:ring-blue-100"
        />
        <span class="absolute right-3 top-2.5 text-gray-400 cursor-pointer">
          👁️
        </span>
      </div>

      <!-- Confirm Password -->
      <div class="relative">
        <input
          type="password"
          placeholder="Confirm Password"
          class="w-full px-4 py-2 border border-gray-300 rounded-lg text-gray-700 focus:outline-none focus:ring focus:ring-blue-100"
        />
        <span class="absolute right-3 top-2.5 text-gray-400 cursor-pointer">
          👁️
        </span>
      </div>

      <!-- Submit Button -->
      <button
        type="submit"
        class="w-full bg-gradient-to-r from-blue-500 to-blue-600 text-white py-2 rounded-lg hover:from-blue-600 hover:to-blue-700 transition"
      >
        Sign Up
      </button>
    </form>

    <!-- Footer -->
    <div class="mt-4 text-center">
      <p class="text-gray-500 text-sm">
        Have your account? 
        <a class="text-blue-500 font-medium hover:underline">Login Now</a>
      </p>
    </div>
  </div>
</div>