styled details quick links component

src/components/details.js

@@ -2,9 +2,9 @@ import React, { Component } from 'react';
 
 class Details extends Component {
     render() {
-        const { title, links } = this.props;
+        const { className, title, links } = this.props;
         return (
-            <div className='details'>
+            <div className={`${className} details`}>
                 <div className='details__title'>{title}</div>
                 <div className='details__links'>
                     {

src/style/auth/signin.scss

@@ -9,10 +9,14 @@
     &__form {
         display: grid;
         grid-template-rows: [email-s] 64px [email-e password-s] 64px [password-e] minmax(20px, 289px) [line-s] 2px [line-e login-s] 38px [login-e];
+        grid-template-columns: 1fr;
     }
 }
 
 .sign-in-form {
+    & > * {
+        grid-column: 1/-1;
+    }
     &__email {
         grid-row: email-s/email-e;
     }
@@ -23,10 +27,14 @@
     &__line {
         grid-row: line-s/line-e;
         border-top: 1px solid #ccc;
-
     }
     &__login {
         margin-top: 39px;
         grid-row: login-s/login-e;
     }
+    &__details {
+        grid-row: 1/-1;
+        justify-self: end;
+        align-self: start;
+    }
 }

src/style/details.scss

@@ -0,0 +1,20 @@
+.details {
+    display: grid;
+    grid-row-gap: 13px;
+
+    &__title {
+        padding-bottom: 7px;
+        border-bottom: 1px solid #CCC;
+        font-size: 14px;
+        font-weight: 600;
+    }
+
+    &__links {
+        font-size: 14px;
+        display: grid;
+        grid-row-gap: 10px;
+        & > * {
+            text-decoration-line: underline;
+        }
+    }
+}

src/style/main.scss

@@ -24,4 +24,5 @@ body {
 @import 'auth/signup';
 
 @import 'page-title';
-@import 'form-fields';
+@import 'form-fields';
+@import 'details';