feat: add Auto Review article

src/App.js

@@ -1,4 +1,5 @@
 import './App.css';
+import AutoReview from './components/autoReview'
 
 function App() {
   return (
@@ -9,6 +10,7 @@ function App() {
           My really cool blog site
         </p>
       </header>
+      <AutoReview/>
     </div>
   );
 }

src/App.test.js

@@ -6,3 +6,9 @@ test('renders My really cool blog site logo', () => {
   const linkElement = screen.getByText(/My really cool blog site/i);
   expect(linkElement).toBeInTheDocument();
 });
+
+test('renders Auto Review Article', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/Auto Review:/i);
+  expect(linkElement).toBeInTheDocument();
+});

src/components/autoReview/autoReview.css

@@ -0,0 +1,24 @@
+.autoReview {
+  border: black 7px solid;
+  border-radius: 10px;
+  margin: 5px 0px;
+  padding: 0px 10px;
+  display: inherit;
+  width: 25%;
+  flex-direction: inherit;
+  align-items: inherit;
+}
+
+.articleHeader{
+  margin: 15px 0px;
+  display: flex;
+  background: #272c35;
+  padding: 0px 10px;
+  font-size: calc(5px + 2vmin);
+  color: white;
+  text-shadow: 0 0 black;
+}
+
+.articleParagraph {
+  margin: 3% 0%;
+}

src/components/autoReview/index.js

@@ -0,0 +1,16 @@
+import './autoReview.css';
+
+function AutoReview() {
+  return (
+    <div className="autoReview">
+      <header className="articleHeader">
+        <p>
+          Auto Review: 415 RSX W18
+        </p>
+      </header>
+      <p className="articleParagraph">One technological model for both semi- and fully-autonomous cars is vehicle-to-vehicle communication.</p>
+    </div>
+  );
+}
+
+export default AutoReview;