app-index-and-css.tsx

app-index-and-css.tsx

/**
 * src/App.tsx
 */
import "./styles.css";
import React from "react";
import { Card } from "./Card";

interface IProps {}

export const App: React.FC<IProps> = (props) => {
  return (
    <div className="app">
      <ul className="hlist">
        <li>
          <Card />
        </li>
        <li>
          <Card />
        </li>
      </ul>
    </div>
  );
};

/**
 * index.tsx
 */
import { render } from "react-dom";
import { App } from "./App";

const rootElement = document.getElementById("root");
render(<App />, rootElement);
  
/**
 * styles.css
 */
.app {
  font-family: sans-serif;
  padding: 20px 0;
  text-align: center;
}

.card {
  border: 1px solid green;
}

.hlist {
  display: flex;
  justify-content: center;  
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.hlist > * + * {
  margin-left: 2rem;
}