Added a sample static Pokemon card

src/App.tsx

@@ -2,12 +2,14 @@ import React from 'react';
 import './App.css';
 import { Header } from './Header';
 import { Filters } from './Filters';
+import { Pokemon } from './Pokemon';
 
 function App() {
   return (
     <div className="App app_container">
       <Header />
       <Filters />
+      <Pokemon />
     </div>
   );
 }

src/Pokemon.css

@@ -0,0 +1,92 @@
+:root {
+    --grass: #5FBD58;
+    --bug: #92BC2C;
+    --dark: #595761;
+    --dragon: #0C69C8;
+    --electric: #F2D94E;
+    --fairy: #EE90E6;
+    --fighting: #D3425F;
+    --fire: #dc872f;
+    --flying: #A1BBEC;
+    --ghost: #5F6DBC;
+    --ground: #DA7C4D;
+    --ice: #75D0C1;
+    --normal: #A0A29F;
+    --poison: #B763CF;
+    --psychic: #ff2ca8;
+    --rock: #a38c21;
+    --steel: #5695A3;
+    --water: #539DDF;
+}
+
+.thumbnail__container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1.5rem 0;
+    margin: 2rem;
+    /* border: 15px solid var(--cardborder); */
+    border-radius: 1rem;
+    min-width: 220px;
+    height: 285px;
+    text-align: center;
+    /* box-shadow: 0 5px 25px 1px rgb(0 0 0 / 50%); */
+    box-shadow:
+            0 1.6px 1.6px rgba(0, 0, 0, 0.023),
+            0 3.8px 3.8px rgba(0, 0, 0, 0.034),
+            0 6.9px 6.9px rgba(0, 0, 0, 0.041),
+            0 11.4px 11.4px rgba(0, 0, 0, 0.049),
+            0 18.8px 18.8px rgba(0, 0, 0, 0.056),
+            0 32.8px 32.8px rgba(0, 0, 0, 0.067),
+            0 71px 71px rgba(0, 0, 0, 0.09)
+;
+    transition: all 0.2s ease-in-out;
+}
+
+.thumbnail__container:hover {
+    transform: scale(1.2);
+}
+
+.info__icon:hover {
+    opacity: 1;
+}
+
+.info__icon {
+    margin-right: 15px;
+    margin-top: -4px;
+    font-size: 25px;
+    opacity: 0.5;
+}
+
+h3 {
+    font-family: 'Press Start 2P', cursive;
+    margin-bottom: 0.2rem;
+}
+
+.thumbnail__container .poke__number {
+    border-radius: 1rem;
+    padding: 0.2rem 0.4rem;
+    font-weight: 400;
+    font-size: 35px;
+    font-family: 'Teko', sans-serif;
+}
+
+.thumbnail__container img {
+    width: 120px;
+    height: 120px;
+}
+
+.thumbnail__container small {
+    text-transform: capitalize;
+}
+
+.card__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.poke__name h3 {
+    margin-top: 0px;
+}

src/Pokemon.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import './Pokemon.css';
+import testimage from './assets/cardimg.svg';
+
+export function Pokemon() {
+  return (
+    <div className="thumbnail__container">
+      <div className="card__header">
+        <div className="poke__number">#006</div>
+        <div className="info__icon">
+          <svg
+            stroke="currentColor"
+            fill="currentColor"
+            strokeWidth="0"
+            viewBox="0 0 512 512"
+            height="1em"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"></path>
+          </svg>
+        </div>
+      </div>
+      <div className="image__container">
+        <img src={testimage} alt="test image" height={150} />
+      </div>
+      <div className="poke__name">
+        <h3>Charizard</h3>
+      </div>
+    </div>
+  );
+}