JSFiddle - React, Tailwind, and code Playground

by CHRIS ROBBINS

HTML

<div class="container">
  <h2><img src="//axiscaresales.com/wp-content/uploads/2017/06/PrimaryLogo_AxisCare_Color-e1497030770752.png" width="240" height="60" alt="AxisCare Logo" class="fusion-logo-1x fusion-standard-logo"></h2>

  <div class="login-box">
    <input placeholder="Username">
    <input class="password" type="password" placeholder="Password">

    <button class="top-btn">sign in</button>
    <button class="pass-btn">I forgot my password</button>
  </div>

  <small>Copyright 2017 AxisCare</small>
</div>

CSS

body {
  text-align: center;
  background: #fff;
  font-family: "Helvetica";
}

h2 {
  text-align: center;
  margin-top: 25px;
  margin-right: 10px;
}

.container {
  max-width: 375px;
  margin: 0 auto;
}

button {
  background: #00A4E0;
  color: white;
  border: 0;
  height: 44px;
  margin-top: 12px;
  margin-bottom: 5px;
  border-radius: 2px;
  width: 80%;
  font-size: 16px;
  text-transform: uppercase;
}

.pass-btn {
  background: transparent;
  color: #00A4E0;
  text-transform: lowercase;
  margin-top: 5px;
  margin-bottom: 20px;
}

.pass-btn::first-letter {
  text-transform: uppercase;
}

.top-btn {
  margin-top: 25px;
}

small {
  margin-top: 20px;
  color: #000;
  opacity: .3;
}

.login-box {
  display: inline-block;
  max-width: 375px;
  margin: 0 auto;
}

.login-box input {
  width: 80%;
  margin-top: 8px;
  margin-bottom: 8px;
  background: transparent;
  height: 44px;
  padding-left: 0;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, .2);
  outline: none;
  font-size: 18px;
  leter-spacing: 1px;
}

::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  font-size: 16px;
  text-align: left;
}

.password {
  font: small-caption;
  font-size: 16px;
}

JavaScript

// This is a login page that is in desperate need of some UX work.
// Using principles of modern design, rewrite this login page.
// Be sure to consider user experience on both desktop and mobile devices.

// You may change any HTML, CSS, or JS that you choose, but you MAY NOT import a CSS
// library. We want to test your own styling ability! You may take influence from
// a CSS library, but no copy pasting!

// You may import a font if you think it will benefit the page, but no other
// external resources are allowed.

// Your solution will be judged using the following criteria:
// - appearance
// - design
// - user experience (is your solution easy to use or hard?)
// - code quality