Redo with React

src/App.css

@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

src/app.js

@@ -1,3 +1,6 @@
+import React from 'react';
+import './App.css';
+
 function Card(data) {
     return (
       <div className="card">
@@ -14,9 +17,6 @@ class Verification extends React.Component {
     state = {
         verifications: []
     }
-    constructor(props) {
-        super(props);
-    }
     componentDidMount() {
         const apiUrl = 'https://thanos.nightmare.haus/api/verifications';
         fetch(apiUrl)
@@ -36,7 +36,5 @@ class Verification extends React.Component {
     }
 }
 
-ReactDOM.render(
-    <Verification />,
-	document.getElementById('react_app')
-);
+
+export default Verification;

src/index.css

@@ -0,0 +1,55 @@
+body {
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+      'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+      sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  
+  code {
+    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+      monospace;
+  }
+  .card {
+    /* Add shadows to create the "card" effect */
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.137);
+    border-radius: 3%;
+    transition: 0.3s;
+    position: relative;
+    width: 300px;
+    height: 450px;
+    padding: 10px;
+    background-color: #a05236a6;
+    color: #FFFFFF;
+  }
+  
+  /* On mouse-over, add a deeper shadow */
+  .card:hover {
+    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.795);
+  }
+  
+  /* Add some padding inside the card container */
+  .container {
+    padding: 6px 16px;
+  }
+  
+  ul {
+    list-style-type: none;
+    margin: 4;
+    padding: 20px;
+    overflow: hidden;
+      display: table;
+      width: 100%;
+      list-style: none;
+  }
+  
+  li {
+    float: left;
+    display: table-cell;
+    text-align: center;
+    margin: 5px;
+  }
+  ul li div {
+    display: block;
+  }

src/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('react_app')
+);