1
2<div class="card">
3  <img src="https://via.placeholder.com/300x200" alt="Card image" class="card-image">
4  <h2 class="card-title">Card Title</h2>
5  <p class="card-description">This is a sample card description. You can customize it to fit your needs.</p>
6  <button class="card-button">Learn More</button>
7</div>
8

1
2.card {
3  width: 300px;
4  height: 420px;
5  background-color: #ffffff;
6  border-radius: 8px;
7  border: 1px solid #e5e7eb;
8  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
9  padding: 16px;
10  overflow: hidden;
11  transition: all 0.3s ease-in-out;
12}
13
14
15.card:hover {
16  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
17}
18
19
20.card-image {
21  width: 100%;
22  height: 200px;
23  object-fit: cover;
24  border-radius: 8px 8px 0 0;
25  margin-bottom: 16px;
26}
27
28.card-title {
29  color: #111827;
30  font-size: 24px;
31  font-weight: 700;
32  margin-bottom: 8px;
33}
34
35.card-description {
36  color: #4b5563;
37  font-size: 16px;
38  margin-bottom: 16px;
39}
40
41.card-button {
42  background-color: #3b82f6;
43  color: #ffffff;
44  border: none;
45  border-radius: 4px;
46  padding: 8px 16px;
47  font-size: 16px;
48  cursor: pointer;
49  transition: background-color 0.3s ease;
50}
51
52.card-button:hover {
53  background-color: #3b82f6dd;
54}
55