Role Selection Component

<div class="w-full bg-gray-100">
  <style>@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');</style>
  <div class="bg-gray-100 rounded-lg p-5 mb-7" style="font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;">
    <div class="text-lg font-medium mb-4">Select Your Role</div>
    <div class="flex gap-4">
      <div class="flex-1 bg-white rounded-lg p-4 border-2 border-blue-500
        cursor-pointer hover:shadow-md transition-shadow">
        <div class="font-medium mb-2.5 text-center">Parent</div>
        <div class="text-sm text-gray-600 leading-relaxed">I want my kid to learn and manage responsible use of screen time with guardrails</div>
      </div>
      <div class="flex-1 bg-white rounded-lg p-4 border-2 border-transparent
        cursor-pointer hover:border-blue-500 hover:shadow-md
        transition-all">
        <div class="font-medium mb-2.5 text-center">Educator</div>
        <div class="text-sm text-gray-600 leading-relaxed">I want my kids learning to be reinforced based on knowledge I share - no child profile will be created</div>
      </div>
      <div class="flex-1 bg-white rounded-lg p-4 border-2 border-transparent
        cursor-pointer hover:border-blue-500 hover:shadow-md
        transition-all">
        <div class="font-medium mb-2.5 text-center">Parent + Educator</div>
        <div class="text-sm text-gray-600 leading-relaxed">I will share content to reinforce kids in my circle and also have a child who will manage his/her responsible screen time</div>
      </div>
    </div>
  </div>
  <script>const roleOptions = document.querySelectorAll('[data-role-option]'); roleOptions.forEach(option => { option.addEventListener('click', function() { roleOptions.forEach(opt => opt.classList.remove('border-blue-500')); roleOptions.forEach(opt => opt.classList.add('border-transparent')); this.classList.add('border-blue-500'); this.classList.remove('border-transparent'); }); });</script>
</div>