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

<main class="flex justify-center items-center h-screen bg-[#cbd5e1]">
  <div class="w-[390px] h-[844px] bg-white px-4">
    <div id="top" class="py-[18px] flex justify-between items-center">
      <span class="text-[#1E293B] text-[15px] font-semibold leading-[normal] tracking-[-0.165px]">9:41</span>
      <div class="flex space-x-4 items-center">
        <a href="#network">
          <svg width="18" height="12" viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.8788 0.90539C14.8421 1.05041 14.8421 1.2266 14.8421 1.57898V10.421C14.8421 10.7734 14.8421 10.9496 14.8788 11.0946C14.987 11.5217 15.3204 11.8551 15.7475 11.9633C15.8925 12 16.0687 12 16.4211 12C16.7735 12 16.9496 12 17.0947 11.9633C17.5217 11.8551 17.8552 11.5217 17.9633 11.0946C18.0001 10.9496 18.0001 10.7734 18.0001 10.421V1.57898C18.0001 1.2266 18.0001 1.05041 17.9633 0.90539C17.8552 0.478338 17.5217 0.144882 17.0947 0.0367266C16.9496 0 16.7735 0 16.4211 0C16.0687 0 15.8925 0 15.7475 0.0367266C15.3204 0.144882 14.987 0.478338 14.8788 0.90539ZM9.89561 4.27063C9.89561 3.91825 9.89561 3.74206 9.93233 3.59704C10.0405 3.16999 10.3739 2.83653 10.801 2.72838C10.946 2.69165 11.1222 2.69165 11.4746 2.69165C11.827 2.69165 12.0032 2.69165 12.1482 2.72838C12.5752 2.83653 12.9087 3.16999 13.0168 3.59704C13.0536 3.74206 13.0536 3.91825 13.0536 4.27063V10.4211C13.0536 10.7735 13.0536 10.9497 13.0168 11.0947C12.9087 11.5217 12.5752 11.8552 12.1482 11.9633C12.0032 12.0001 11.827 12.0001 11.4746 12.0001C11.1222 12.0001 10.946 12.0001 10.801 11.9633C10.3739 11.8552 10.0405 11.5217 9.93233 11.0947C9.89561 10.9497 9.89561 10.7735 9.89561 10.4211V4.27063ZM5.08956 6.17639C5.05283 6.3214 5.05283 6.49759 5.05283 6.84998V10.421C5.05283 10.7734 5.05283 10.9496 5.08956 11.0946C5.19771 11.5216 5.53117 11.8551 5.95822 11.9632C6.10324 12 6.27943 12 6.63182 12C6.9842 12 7.16039 12 7.30541 11.9632C7.73246 11.8551 8.06592 11.5216 8.17407 11.0946C8.2108 10.9496 8.2108 10.7734 8.2108 10.421V6.84998C8.2108 6.49759 8.2108 6.3214 8.17407 6.17639C8.06592 5.74933 7.73246 5.41588 7.30541 5.30772C7.16039 5.271 6.9842 5.271 6.63182 5.271C6.27943 5.271 6.10324 5.271 5.95822 5.30772C5.53117 5.41588 5.19771 5.74933 5.08956 6.17639ZM0.0367266 8.41935C0 8.56437 0 8.74056 0 9.09295V10.421C0 10.7733 0 10.9495 0.0367266 11.0946C0.144882 11.5216 0.478338 11.8551 0.90539 11.9632C1.05041 11.9999 1.2266 11.9999 1.57898 11.9999C1.93137 11.9999 2.10756 11.9999 2.25258 11.9632C2.67963 11.8551 3.01309 11.5216 3.12124 11.0946C3.15797 10.9495 3.15797 10.7733 3.15797 10.421V9.09294C3.15797 8.74056 3.15797 8.56437 3.12124 8.41935C3.01309 7.9923 2.67963 7.65884 2.25258 7.55069C2.10756 7.51396 1.93137 7.51396 1.57898 7.51396C1.2266 7.51396 1.05041 7.51396 0.90539 7.55069C0.478338 7.65884 0.144882 7.9923 0.0367266 8.41935Z" fill="#1E293B"/></svg>
        </a>
        <a href="#wifi">
          <svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.00044 2.49216C10.3219 2.49227 12.5546 3.42402 14.2371 5.09485C14.3638 5.22384 14.5663 5.22222 14.691 5.0912L15.9021 3.81448C15.9653 3.74803 16.0005 3.65802 16 3.56436C15.9995 3.47071 15.9632 3.38114 15.8993 3.31546C11.4834 -1.10515 4.51678 -1.10515 0.100854 3.31546C0.0368845 3.38109 0.000594162 3.47064 7.48213e-06 3.56429C-0.000589675 3.65794 0.0345797 3.74798 0.0977107 3.81448L1.30914 5.0912C1.43383 5.22241 1.6365 5.22404 1.76312 5.09485C3.44579 3.42391 5.67875 2.49215 8.00044 2.49216ZM8.00045 6.64591C9.27594 6.64583 10.5059 7.14105 11.4514 8.03535C11.5793 8.16227 11.7807 8.15952 11.9054 8.02915L13.115 6.75243C13.1787 6.68546 13.2141 6.59461 13.2132 6.50021C13.2123 6.40581 13.1751 6.31573 13.1102 6.25013C10.231 3.45259 5.77231 3.45259 2.89319 6.25013C2.82815 6.31573 2.79104 6.40585 2.79019 6.50029C2.78933 6.59472 2.82481 6.68556 2.88864 6.75243L4.09798 8.02915C4.22263 8.15952 4.42408 8.16227 4.55195 8.03535C5.49679 7.14165 6.72579 6.64647 8.00045 6.64591ZM10.3255 9.69298C10.3902 9.62666 10.4258 9.53539 10.424 9.44072C10.4221 9.34605 10.3829 9.25638 10.3157 9.19287C8.97936 8.01221 7.02216 8.01221 5.68582 9.19287C5.61854 9.25633 5.5793 9.34597 5.57739 9.44064C5.57547 9.53531 5.61104 9.62661 5.67569 9.69298L7.76853 11.8988C7.82987 11.9636 7.9135 12.0001 8.00076 12.0001C8.08802 12.0001 8.17165 11.9636 8.23298 11.8988L10.3255 9.69298Z" fill="#1E293B"/></svg>
        </a>
        <a href="#battery">
          <svg width="24" height="12" viewBox="0 0 24 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M3.51619 0H18.0348C19.2575 0 19.7009 0.135606 20.1478 0.390246C20.5948 0.644886 20.9456 1.01856 21.1847 1.49469C21.4237 1.97083 21.551 2.44311 21.551 3.7455V8.2545C21.551 9.55689 21.4237 10.0292 21.1847 10.5053C20.9456 10.9814 20.5948 11.3551 20.1478 11.6098C19.7009 11.8644 19.2575 12 18.0348 12H3.51619C2.29353 12 1.85017 11.8644 1.40318 11.6098C0.956199 11.3551 0.605403 10.9814 0.366353 10.5053C0.127304 10.0292 0 9.55689 0 8.2545V3.7455C0 2.44311 0.127304 1.97083 0.366353 1.49469C0.605403 1.01856 0.956199 0.644886 1.40318 0.390246C1.85017 0.135606 2.29353 0 3.51619 0ZM3.51609 1.04348C2.54925 1.04348 2.21172 1.11291 1.86506 1.3104C1.58879 1.46779 1.37782 1.69251 1.23007 1.9868C1.04467 2.35607 0.979492 2.71561 0.979492 3.7455V8.2545C0.979492 9.28439 1.04467 9.64393 1.23007 10.0132C1.37782 10.3075 1.58879 10.5322 1.86506 10.6896C2.21172 10.8871 2.54925 10.9565 3.51609 10.9565H18.0347C19.0016 10.9565 19.3391 10.8871 19.6858 10.6896C19.962 10.5322 20.173 10.3075 20.3208 10.0132C20.5062 9.64393 20.5713 9.28439 20.5713 8.2545V3.7455C20.5713 2.71561 20.5062 2.35607 20.3208 1.9868C20.173 1.69251 19.962 1.46779 19.6858 1.3104C19.3391 1.11291 19.0016 1.04348 18.0347 1.04348H3.51609ZM23.9997 5.93733C23.9997 7.22767 22.5303 8.02429 22.5303 8.02429V3.85037C22.5303 3.85037 23.9997 4.64699 23.9997 5.93733Z" fill="#1E293B"/><rect x="2" y="2" width="13" height="8" rx="1.6" fill="#1E293B"/></svg>
        </a>
      </div>
    </div>
    <div id="middle" class="mt-[66px] mb-[205px]">
      <h1 class="text-[#1E293B] text-center text-3xl font-bold leading-[34px] tracking-[-0.15px] mb-[43px]">Login</h1>
      <form>
        <div class="">
          <label for="email" class="text-[#1E293B] text-sm leading-[22px] tracking-[0.14px]">E-mail</label>
          <input type="email" class="border-[#E2E8F0] px-4 py-3 rounded-lg border-[1.5px] border-solid bg-white w-full outline-none placeholder:text-[#94A3B8] text-[#1E293B] text-sm leading-[22px] tracking-[0.14px] mt-[6px]" placeholder="Enter your email">
        </div>
        <div class="my-3">
          <label for="email" class="text-[#1E293B] text-sm leading-[22px] tracking-[0.14px]">Password</label>
          <input type="password" class="border-[#E2E8F0] px-4 py-3 rounded-lg border-[1.5px] border-solid bg-white w-full outline-none placeholder:text-[#94A3B8] text-[#1E293B] text-sm leading-[22px] tracking-[0.14px] mt-[6px]" placeholder="Enter your password">
        </div>
        <div class="flex flex-col space-y-[50px]">
          <a href="!#" class="text-right text-[#3C9AFB] text-sm font-medium leading-[22px] tracking-[0.175px] underline">Forgot Password?</a>
          <button class="rounded-full px-3.5 py-3 bg-[#2b8761] text-white text-sm font-medium leading-5 tracking-[0.21px]">Login</button>
        </div>
      </form>
    </div>
    <div id="bottom" class="flex flex-col space-y-[22px]">
      <span class="text-[#64748B] text-center text-sm leading-[22px] tracking-[0.14px]">or login with</span>
      <button class="flex items-center justify-center gap-4 border-[#E2E8F0] px-6 py-2 rounded-full border-2 border-solid h-[54px]">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M23.52 12.2727C23.52 11.4218 23.4436 10.6036 23.3018 9.81812H12V14.4599H18.4582C18.18 15.9599 17.3345 17.2308 16.0636 18.0818V21.0927H19.9418C22.2109 19.0036 23.52 15.9272 23.52 12.2727Z" fill="#4285F4"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12 24C15.24 24 17.9564 22.9255 19.9418 21.0928L16.0636 18.0818C14.9891 18.8018 13.6145 19.2273 12 19.2273C8.87455 19.2273 6.22909 17.1164 5.28546 14.28H1.27637V17.3891C3.25091 21.3109 7.30909 24 12 24Z" fill="#34A853"/><path fill-rule="evenodd" clip-rule="evenodd" d="M5.28545 14.2799C5.04545 13.5599 4.90909 12.7908 4.90909 11.9999C4.90909 11.209 5.04545 10.4399 5.28545 9.71993V6.61084H1.27636C0.463636 8.23084 0 10.0636 0 11.9999C0 13.9363 0.463636 15.769 1.27636 17.389L5.28545 14.2799Z" fill="#FBBC05"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12 4.77273C13.7618 4.77273 15.3436 5.37818 16.5873 6.56727L20.0291 3.12545C17.9509 1.18909 15.2345 0 12 0C7.30909 0 3.25091 2.68909 1.27637 6.61091L5.28546 9.72C6.22909 6.88364 8.87455 4.77273 12 4.77273Z" fill="#EA4335"/></svg>
        <span class="text-[#1E293B] text-sm font-medium leading-5 tracking-[0.21px]">Login with Google</span>
      </button>
    </div>
  </div>
</main>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

main {
  font-family: 'Inter', sans-serif;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.