<script src="https://cdn.tailwindcss.com"></script>
<div class="min-h-screen grid place-items-center">
  <div class="w-full px-8 max-w-md mx-auto">
    <form class="space-y-4">
      <div>
        <label for="email" class="block ml-4 text-slate-900 text-sm font-medium leading-6">Email</label>
        <input 
               type="email"
               id="email"
               name="email"
               class="mt-1 px-4 py-2 w-full bg-slate-100 rounded-full focus:outline-violet-500 text-sm leading-6 text-slate-900 border border-gray-300" >
               
      </div>
      <div>
        <label for="password" class="block ml-4 text-slate-900 text-sm font-medium leading-6">Password</label>
        <input 
               type="password"
               id="password"
               name="password"
               class="mt-1 px-4 py-2 w-full bg-slate-100 rounded-full focus:outline-violet-500 text-sm leading-6 text-slate-900 border border-gray-300" />
               
      </div>
      <div class="flex items-center">
        <img src="https://images.pexels.com/photos/1081685/pexels-photo-1081685.jpeg"
             alt="Avatar"
             class="w-16 h-16 rounded-full">
        <input type="file" 
               class="ml-4 p-1 w-full text-slate-500 text-sm rounded-full leading-6 file:bg-violet-200 file:text-violet-700 file:font-semibold file:border-none file:px-4 file:py-1 file:mr-6 file:rounded-full hover:file:bg-violet-100 border border-gray-300">
      </div>
      <div>
        <input type="submit" value="Login" class="mt-1 px-4 py-2 w-full bg-slate-100 rounded-full focus:outline-violet-500 text-sm leading-6 bg-violet-600 text-white cursor-pointer"/>
      </div>
    </form>
  </div>
</div>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.