Square with CSS stylesheet

Square.js

import React, { Component } from 'react';
import './Square2.css';

class Square extends Component {
  render () {
   return (
    <div className='sq2-container'>
      <h1 className='sq2-title'>Even better title</h1>
      <p className='sq-content'>Much improved content</p>
    </div>
   )
  }
}

Square2.css

html, body {
  height: 100%;
}

body {
  background: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Roboto sans-serif;
}

.sq2-container {
  height: 300px;
  width: 300px;
  border: 2px solid red;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: white;
}

.sq2-title {
  margin: 0;
  padding: 0;
  font-family: Roboto sans-serif;
}

.sq-content {
  font-family: Arial sans-serif;  
}