Custom (SASS)

JSX:

import React from "react";
import "../../styles/customsass.scss";
import "../../styles/global.scss";

import CodeData from "../CodeData";

function CustomSASS() {
  return (
    <div className="custom-sass-container Main">
      <h2>Custom (SASS)</h2>
      <div className="login-box">
        <h2 className="welcome-back">Welcome Back!</h2>

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

        <form className="login-form">
          <div className="username-password">
            <input placeholder="Username" type="text" />
            <input placeholder="Password" type="password" />
          </div>

          <label className="check">
            Remember Me
            <input type="checkbox" />
          </label>

          <button className="submit-button" type="submit">
            Login
          </button>
        </form>
      </div>
      <CodeData
        url={
          "https://raw.githubusercontent.com/kmcknight1/basic-styling/master/client/src/components/styled-comps/CustomSASS.js"
        }
        styles={
          "https://raw.githubusercontent.com/kmcknight1/basic-styling/master/client/src/styles/customsass.scss"
        }
      />
    </div>
  );
}

export default CustomSASS;

SASS:

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

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

    .welcome-back {
      margin: 0;
      display: block;
      background: darkslateblue;
      padding: 1.5rem;
      font-weight: 100;
      color: white;
    }

    .login-message {
      margin: 1.2rem;
      font-size: 1.3rem;
      font-weight: lighter;
    }

    .login-form {
      .username-password {
        height: 45%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        input {
          height: 3rem;
          margin: 0.5rem;
          border-radius: 5px;
          padding: 1rem;
          border: 0.5px solid rgb(172, 172, 172);
          outline: none;

          &:focus {
            border: 1px solid darkslateblue;
          }
        }
      }

      .check {
        display: block;
        margin: 2rem;

        input {
          cursor: pointer;
          margin: 0.4rem;
        }
      }

      .submit-button {
        background: darkslateblue;
        color: white;
        border-radius: 20px;
        font-size: 0.9rem;
        font-weight: 100;
        padding: 0.5rem 1.5rem;
        cursor: pointer;
        outline: none;

        &:hover {
          background: adjust-color(darkslateblue, $lightness: -10%);
        }

        &:active {
          box-shadow: 1px 1px 2px rgb(34, 106, 214),
            -1px -1px 2px rgb(34, 106, 214);
        }
      }
    }
  }
}