Financial Services UI Components

<label class="block text-slate-700 font-medium mb-2">
  Full Name
</label>

<input type="text" class="w-full px-4 py-3 rounded-lg border-2 border-slate-200 focus:border-primary focus:ring-2 focus:ring-primary/20" placeholder="John Doe">

<label class="block text-slate-700 font-medium mb-2">
  Email Address
</label>

<input type="email" class="w-full px-4 py-3 rounded-lg border-2 border-slate-200 focus:border-primary focus:ring-2 focus:ring-primary/20" placeholder="john@example.com">

<label class="block text-slate-700 font-medium mb-2">
  Password
</label>

<div class="relative">
  <input type="password" class="w-full px-4 py-3 rounded-lg border-2 border-slate-200 focus:border-primary focus:ring-2 focus:ring-primary/20 pr-10" placeholder="••••••••">
  <i class="fas fa-eye absolute right-3 top-3.5 text-slate-400 cursor-pointer"></i>
</div>

<label class="block text-slate-700 font-medium mb-2">
  Account Type
</label>

<select class="w-full px-4 py-3 rounded-lg border-2 border-slate-200 focus:border-primary focus:ring-2 focus:ring-primary/20">
  <option>Checking Account</option>
  <option>Savings Account</option>
  <option>Investment Account</option>
  <option>Retirement Account</option>
</select>

<label class="block text-slate-700 font-medium mb-2">
  Transaction Date
</label>

<div class="relative">
  <input type="text" class="w-full px-4 py-3 rounded-lg border-2 border-slate-200 focus:border-primary focus:ring-2 focus:ring-primary/20 pr-10" placeholder="Select date">
  <i class="far fa-calendar absolute right-3 top-3.5 text-slate-400 cursor-pointer"></i>
</div>

<form class="space-y-6">
  <div>
    <label class="block text-slate-700 font-medium mb-2">Full Name</label>
    <input type="text" class="w-full px-4 py-3 rounded-lg border-2 border-slate-200 focus:border-primary focus:ring-2 focus:ring-primary/20" placeholder="John Doe">
  </div>
  <div>
    <label class="block text-slate-700 font-medium mb-2">Email Address</label>
    <input type="email" class="w-full px-4 py-3 rounded-lg border-2 border-slate-200 focus:border-primary focus:ring-2 focus:ring-primary/20" placeholder="john@example.com">
  </div>
  <div>
    <label class="block text-slate-700 font-medium mb-2">Account Type</label>
    <select class="w-full px-4 py-3 rounded-lg border-2 border-slate-200 focus:border-primary focus:ring-2 focus:ring-primary/20">
      <option>Checking Account</option>
      <option>Savings Account</option>
      <option>Investment Account</option>
      <option>Retirement Account</option>
    </select>
  </div>
  <div class="flex items-center">
    <input type="checkbox" id="terms" class="w-4 h-4 text-primary rounded">
    <label for="terms" class="ml-2 text-slate-700">I agree to the terms and conditions</label>
  </div>
  <button class="bg-primary text-white px-6 py-3 rounded-lg font-medium w-full">
    Create Account
  </button>
</form>