JSX:

import React from "react";
import "../../styles/semanticui.scss";
import "../../styles/global.scss";
import { Button, Form, Header, Segment } from "semantic-ui-react";

import CodeData from "../CodeData";

function SemanticUI() {
  return (
    <div className="Main semanticui-container">
      <div className="grid-column">
        <Header as="h1" textAlign="center">
          Semantic-UI
        </Header>
        <div className="login-box">
          <Header className="welcome-back" as="h2" textAlign="center">
            Welcome back!
          </Header>
          <Header className="login-message" as="h3" textAlign="center">
            Login to ThisApp
          </Header>
          <Form>
            <Segment className="form">
              <Form.Input
                icon="user"
                iconPosition="left"
                placeholder="Username"
              />
              <Form.Input
                icon="lock"
                iconPosition="left"
                placeholder="Password"
                type="password"
              />
              <label className="remember-me">
                Remember Me
                <Form.Input className="check" type="checkbox" />
              </label>
              <Button
                className="login-button"
                color="orange"
                fluid
                size="large"
              >
                Login
              </Button>
            </Segment>
          </Form>
        </div>
      </div>
      <CodeData
        url={
          "https://raw.githubusercontent.com/kmcknight1/basic-styling/master/client/src/components/styled-comps/SemanticUI.js"
        }
        styles={
          "https://raw.githubusercontent.com/kmcknight1/basic-styling/master/client/src/styles/semanticui.scss"
        }
      />
    </div>
  );
}

export default SemanticUI;

SASS:

.semanticui-container {
  .grid-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;

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

      .welcome-back {
        background: #f2711c;
        color: white;
        padding: 1rem;
      }

      .login-message {
        margin: 0.5rem 0 1rem 0;
        font-weight: 100;
      }

      .form {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
      }

      .remember-me {
        display: flex;

        .check {
          margin: 0.3rem;
        }
      }

      .login-button {
        margin: 1rem;
      }
    }
  }
}