<script src="https://cdn.tailwindcss.com"></script>

<div class="flex w-screen h-screen place-items-center justify-center">
  <div class="max-w-lg">
    <form>
      <div class="flex items-center space-x-6">
        <div class="shrink-0">
          <img class="h-16 w-16 object-cover rounded-full" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1361&q=80" alt="Current profile photo" />
        </div>
        <label class="block">
          <input type="file" class="block w-full text-sm text-gray-500
        file:mr-4 file:py-2 file:px-4
        file:rounded-full file:border-0
        file:text-sm file:font-semibold
        file:bg-violet-50 file:text-violet-700
        hover:file:bg-violet-100
      " />
        </label>
      </div>
      <div class="flex justify-evenly">
        <label class="mt-6 flex items-center justify-center space-x-2 text-sm font-medium text-gray-600">
          <input type="radio" class="accent-violet-500" name="gender" checked />
          <span>Mujer</span>
        </label>
        <label class="mt-6 flex items-center justify-center space-x-2 text-sm font-medium text-gray-600">
          <input type="radio" class="accent-violet-500" name="gender" />
          <span>Hombre</span>
        </label>
        <label class="mt-6 flex items-center justify-center space-x-2 text-sm font-medium text-gray-600">
          <input type="radio" class="accent-violet-500" name="gender" />
          <span>Otro</span>
        </label>
      </div>
      <label class="mt-6 flex items-center justify-center space-x-2 text-sm font-medium text-gray-600">
        <input type="checkbox" class="accent-violet-500" checked />
        <span>Activar notificaciones</span>
      </label>
    </form>
  </div>
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.