all

<div className="flex flex-col gap-2 w-full">
  <label className="text-xs font-black uppercase tracking-widest text-muted-foreground ml-1">Email</label>
  <input 
    type="email" 
    placeholder="john@example.com"
    className="w-full px-4 py-3 rounded-xl bg-card border border-border text-sm font-medium focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all"
  />
</div>

<label className="flex items-center gap-3 cursor-pointer group">
  <div className="w-5 h-5 rounded-md border-2 border-primary bg-primary flex items-center justify-center transition-colors">
    <Check className="w-3.5 h-3.5 text-primary-foreground stroke-[3px]" />
  </div>
  <span className="text-sm font-medium text-foreground group-hover:text-primary transition-colors">Subscribe to newsletter</span>
</label>

<div className="space-y-3">
  <label className="flex items-center gap-3 cursor-pointer group">
    <div className="relative flex items-center justify-center">
      <div className="w-5 h-5 rounded-full border-2 border-primary transition-all" />
      <div className="absolute w-2.5 h-2.5 rounded-full bg-primary" />
    </div>
    <span className="text-sm font-medium text-foreground">Option One</span>
  </label>
  <label className="flex items-center gap-3 cursor-pointer group">
    <div className="relative flex items-center justify-center">
      <div className="w-5 h-5 rounded-full border-2 border-border/50 group-hover:border-primary/50 transition-all" />
    </div>
    <span className="text-sm font-medium text-muted-foreground group-hover:text-primary transition-colors">Option Two</span>
  </label>
</div>

<div className="flex flex-col gap-2 w-full">
  <label className="text-xs font-black uppercase tracking-widest text-muted-foreground ml-1">Category</label>
  <div className="relative">
    <select className="w-full appearance-none px-4 py-3 rounded-xl bg-card border border-border text-sm font-medium focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all pr-10">
      <option value="1">Electronics</option>
      <option value="2">Fashion</option>
      <option value="3">Home</option>
    </select>
    <div className="absolute right-4 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground">
      <ChevronDown className="w-4 h-4" />
    </div>
  </div>
</div>