Material-UI

JSX:

import React from "react";
import "../../styles/materialui.scss";
import "../../styles/global.scss";
import {
  Container,
  TextField,
  FormGroup,
  Checkbox,
  FormControlLabel,
  Button
} from "@material-ui/core";

import CodeData from "../CodeData";

function MaterialUI() {
  return (
    <div className="Main materialui-container">
      <h2>Material-UI</h2>

      <Container className="login-box">
        <h2 className="welcome-back">Welcome Back!</h2>

        <h4 className="login-message">Log in to ThisApp</h4>

        <FormGroup className="login-form">
          <div className="username-password">
            <TextField label="Username" type="text" variant="outlined" />
            <TextField label="Password" type="password" variant="outlined" />
          </div>
          <FormControlLabel
            label="Remember Me"
            control={<Checkbox color="primary" />}
          />
          <Button
            className="login-button"
            fullWidth
            size="large"
            color="primary"
            variant="contained"
          >
            Login
          </Button>
        </FormGroup>
      </Container>
      <CodeData
        url={
          "https://raw.githubusercontent.com/kmcknight1/basic-styling/master/client/src/components/styled-comps/MaterialUI.js"
        }
        styles={
          "https://raw.githubusercontent.com/kmcknight1/basic-styling/master/client/src/styles/materialui.scss"
        }
      />
    </div>
  );
}

export default MaterialUI;

SASS:

.materialui-container {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  text-align: center;

  .login-box {
    width: 18rem;
    height: 25rem;
    border: 1px solid black;
    padding: 0;
    display: flex;
    flex-direction: column;
    background: white;

    .welcome-back {
      margin: 0;
      background: #3f51b5;
      padding: 1.2rem;
      color: white;
      font-size: 1.6rem;
    }

    .login-message {
      font-size: 1.1rem;
      font-weight: 300;
      margin: 1rem;
    }

    .login-form {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;

      .username-password {
        height: 50%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
      }

      .login-button {
        height: 3rem;
        margin: 1rem 0;
      }
    }
  }
}