Card by kennyotsu

1.card-id567 {
2  width: 190px;
3  height: 190px;
4  background: rgb(22, 22, 22);
5  color: white;
6  border-radius: 1rem;
7  padding: 1rem;
8  position: relative;
9  display: flex;
10  justify-content: center;
11  align-items: center;
12  transition: 300ms ease;
13  animation: 8s thumb-thumb infinite;
14}
15
16.card-id567 svg path {
17  transition: 300ms ease;
18  opacity: 0;
19}
20
21.bold-567 {
22  font-weight: bold;
23}
24
25.creator-points {
26  width: 3.25rem;
27  height: 3rem;
28  color: rgb(167 139 250);
29    /* w-5 h-5 mr-2 text-indigo-400 */
30}
31
32.blurry-splash {
33  position: absolute;
34  inset: 0;
35  width: 60px;
36  margin: 0 auto;
37  height: 60px;
38  border-radius: 1rem;
39  z-index: -1;
40  opacity: 70%;
41  filter: blur(15px);
42  background: linear-gradient(
43      120deg, rgba(167, 139, 250, 0.24)
44      , rgba(167, 139, 250, 0.384), rgba(167, 139, 250, 0.226));
45}
46
47.prompt-id567 {
48  position: absolute;
49  color: rgb(173, 173, 173);
50  text-align: center;
51}
52
53.really-small-text {
54  text-align: center;
55  width: 100%;
56  position: absolute;
57  font-size: 8px;
58  margin-top: 28px;
59  opacity: 0.5;
60}
61
62.card-id567:hover {
63  cursor: none;
64  background-color: white;
65}
66
67.card-id567:hover .prompt-id567 {
68  transition: 300ms ease;
69  opacity: 0;
70}
71
72.token-container {
73  animation: 2s spinny-token-yayyy infinite;
74  margin-bottom: 10px;
75}
76
77.prompt-id567 svg path {
78  stroke: none;
79  opacity: 1;
80}
81
82.card-id567:hover svg path {
83  opacity: 1;
84}
85
86@keyframes spinny-token-yayyy {
87  0% {
88    transform: perspective(200px) rotateY(0deg);
89  }
90
91  100% {
92    transform: perspective(200px) rotateY(360deg);
93  }
94}
95
96@keyframes thumb-thumb {
97  0%, 10%, 100% {
98    transform: scale(100%);
99  }
100
101  5% {
102    transform: scale(103%);
103  }
104
105  7% {
106    transform: scale(97%);
107  }
108}