I want to make a tag for a card on my website for a new product. My idea is to have something like this

https://i.postimg.cc/RCYnmF3z/616-BB1-CA-5126-4381-A916-1-BBCFB5135-B4.png

(Won’t let me add markdown images)

in the top left corner of the card.

I am writing about this, because I need help making the css for it.

I tried making it just a square with rounded corners, but I didn’t like the look. Here is the example of the layout.

https://i.postimg.cc/NMJJn9WV/IMG-0057.jpg

Here is the html and css for the card:

CSS

#games div {     
  background-color: #3A7BCD; 
  border-radius: 7px; 
  cursor: pointer;
  overflow: clip;
  min-width: 100%;
  max-width: 400px;
  margin-bottom: 15px;
}
#games div *:not(img) {
  margin: 10px;
}
#games div img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

HTML

<div>
  <img src="https://i.postimg.cc/9FJYqQKg/Screen-Shot-2024-05-08-at-4-22-24-PM.png" alt="Banner image">
   <h2>
     Title
   </h2>
   <p>
     Description
   </p>
</div>