Card by aadium

1.post-card {
2  width: 260px;
3  height: 340px;
4  background: #1f1f1f;
5  box-shadow: 10px 10px 20px #0c0c0c, 
6              -10px -10px 20px #333333;
7  padding: 10px;
8  border-radius: 15px;
9  display: flex;
10  flex-direction: column;
11  justify-content: center;
12  align-items: center;
13}
14
15.post-card textarea {
16  resize: none;
17  width: 100%;
18  height: 40%;
19  padding: 5px;
20  font-family: Sans-serif;
21  font-size: 16px;
22  background-color: transparent;
23  border: none;
24  color: #fff;
25}
26
27hr {
28  border: 1px solid #464646;
29  width: 100%;
30  border-radius: 10em;
31}
32
33.button-row {
34  margin-top: 7px;
35  margin-bottom: 3px;
36}
37
38.button-row button {
39  border-radius: 10px;
40  border: none;
41  width: 77px;
42  height: 58px;
43  font-family: Sans-serif;
44  color: #fff;
45  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
46  transition: all 0.3s ease-in-out;
47}
48
49.button-row button:hover {
50  transform: translateY(-5px);
51  box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.25);
52}
53
54.upload {
55  font-size: 14px;
56  background: linear-gradient(180deg, #cecb00 0%, #ef4949 100%);
57}
58
59.feeling {
60  font-size: 14px;
61  background: linear-gradient(180deg, #31c300 0%, #ab7811 100%);
62}
63
64.life-event {
65  font-size: 13.7px;
66  background: linear-gradient(180deg, #ff1024 0%, #ffb34a 100%);
67}
68
69.people {
70  font-size: 13.5px;
71  background: linear-gradient(180deg, #0095b7 0%, #5012ba 100%);
72}
73
74.location {
75  font-size: 14px;
76  background: linear-gradient(180deg, #c329c9 0%, #2b5dff 100%);
77}
78
79.live-video {
80  font-size: 13.8px;
81  background: linear-gradient(180deg, #c800ff 0%, #ff076a 51%, #ff6c6c 100%);
82}
83
84.post {
85  width: 100%;
86  padding: 10px;
87  margin-top: 7px;
88  border: none;
89  border-radius: 11px;
90  font-size: 18px;
91  font-family: Sans-serif;
92  color: #fff;
93  background-size: 200% 100%;
94  background-image: linear-gradient(145deg, #ff00e1, #0000ff, #00d9ff);
95  transition: 0.3s ease-out;
96}
97
98.post:hover {
99  background-position: 99%;
100}