Tooltip by SmookyDev

1<div class="flex flex-col items-center group cursor-pointer font-mono">
2  <div
3    class="relative px-6 py-2 after:absolute after:inset-0 z-50 w-full h-full after:bg-gradient-to-b after:from-rose-500 after:to-rose-500 after:hover:transition-all after:hover:translate-y-0 after:-z-10 after:-translate-y-[95%] after:hover:duration-[3s] text-center text-rose-300 overflow-hidden transition-all text-2xl"
4  >
5    Blink 😀
6  </div>
7
8  <div
9    class="absolute group-hover:mb-10 -translate-y-[150%] group-hover:-translate-y-full flex-col items-center duration-1000 group-hover:duration-700 group-hover:flex group-hover:opacity-100 transition-all group-hover:transition-all"
10  >
11    <div
12      class="transition-all h-10 duration-1000 grid grid-cols-12 grid-rows-4 group [&amp;_div]:w-full [&amp;_div]:text-transparent w-full [&amp;_div]:h-full [&amp;_div]:bg-rose-500 [&amp;_div]:text-center [&amp;_div]:flex [&amp;_div]:items-center [&amp;_div]:justify-center [&amp;_div]:text-[5px] [&amp;_div]:transition-all [&amp;_div]:duration-500 group-hover:[&amp;_div:nth-child(even)]:-skew-x-6 group-hover:[&amp;_div:nth-child(odd)]:bg-rose-700 group-hover:[&amp;_div:nth-child(even)]:bg-rose-700 group-hover:[&amp;_div:nth-child(odd)]:duration-500 group-hover:[&amp;_div:nth-child(even)]:duration-700 group-hover:[&amp;_div:nth-child(odd)]:animate-[pulse_1s_cubic-bezier(0.4,_0,_0.6,_1)_infinite] group-hover:[&amp;_div:nth-child(even)]:animate-[pulse_2s_cubic-bezier(0.4,_0,_0.6,_1)_infinite] group-hover:-translate-y-0 translate-y-[265%]"
13    >
14      <div class="group-hover:-mx-4 group-hover:scale-150 group-hover:rotate-6">
15        1
16      </div>
17      <div class="group-hover:-my-3 group-hover:scale-110 group-hover:rotate-6">
18        2
19      </div>
20      <div class="group-hover:-group-hover:rotate-6 group-hover:scale-75">
21        3
22      </div>
23      <div class="group-hover:-my-3 group-hover:scale-125 group-hover:rotate-6">
24        4
25      </div>
26      <div class="group-hover:-group-hover:rotate-45 group-hover:scale-90">
27        5
28      </div>
29      <div
30        class="group-hover:-my-3 group-hover:scale-110 group-hover:rotate-45"
31      >
32        6
33      </div>
34      <div class="group-hover:scale-125">7</div>
35      <div class="group-hover:-my-3 group-hover:scale-150 group-hover:rotate-3">
36        8
37      </div>
38      <div class="group-hover:-group-hover:rotate-45">9</div>
39      <div class="group-hover:-my-3 group-hover:scale-95 group-hover:rotate-12">
40        10
41      </div>
42      <div class="group-hover:scale-50">11</div>
43      <div class="group-hover:-my-2 group-hover:scale-150 group-hover:rotate-6">
44        12
45      </div>
46      <div
47        class="group-hover:-my-3 group-hover:scale-95 group-hover:rotate-180"
48      >
49        13
50      </div>
51      <div class="group-hover:-mx-2 group-hover:-my-px group-hover:rotate-6">
52        14
53      </div>
54      <div class="group-hover:opacity-0">15</div>
55      <div
56        class="group-hover:-my-1 group-hover:scale-95 group-hover:-group-hover:rotate-12"
57      >
58        16
59      </div>
60      <div class="group-hover:scale-50 group-hover:-group-hover:rotate-12">
61        17
62      </div>
63      <div class="group-hover:scale-75 group-hover:rotate-3">18</div>
64      <div class="group-hover:scale-75 group-hover:-group-hover:rotate-12">
65        19
66      </div>
67      <div class="">20</div>
68      <div class="group-hover:opacity-0">21</div>
69      <div class="group-hover:rotate-45 group-hover:-my-1">22</div>
70      <div
71        class="group-hover:-my-1 group-hover:scale-95 group-hover:-group-hover:rotate-12"
72      >
73        23
74      </div>
75      <div class="">24</div>
76      <div class="group-hover:-mx-5 group-hover:scale-150 group-hover:rotate-6">
77        25
78      </div>
79      <div
80        class="group-hover:-mx-2 group-hover:-group-hover:rotate-12 group-hover:scale-[0.5]"
81      >
82        26
83      </div>
84      <div class="group-hover:rotate-45 group-hover:-my-1">27</div>
85      <div class="group-hover:scale-50 group-hover:rotate-12">28</div>
86      <div class="group-hover:scale-x-110 group-hover:rotate-12">29</div>
87      <div class="group-hover:scale-75">30</div>
88      <div class="">31</div>
89      <div class="group-hover:opacity-0">32</div>
90      <div class="group-hover:-group-hover:rotate-45">33</div>
91      <div class="">34</div>
92      <div class="group-hover:scale-50 group-hover:rotate-12">35</div>
93      <div class="">36</div>
94      <div class="group-hover:-mx-1 group-hover:scale-125 group-hover:rotate-6">
95        37
96      </div>
97      <div
98        class="group-hover:-mx-y group-hover:scale-110 group-hover:rotate-45"
99      >
100        38
101      </div>
102      <div class="group-hover:scale-50 group-hover:rotate-12">39</div>
103      <div class="group-hover:-group-hover:rotate-45">40</div>
104      <div class="group-hover:opacity-0">41</div>
105      <div class="">42</div>
106      <div class="group-hover:scale-75 group-hover:rotate-12">43</div>
107      <div
108        class="group-hover:-mx-y group-hover:scale-110 group-hover:-group-hover:rotate-45"
109      >
110        44
111      </div>
112      <div class="group-hover:scale-50">45</div>
113      <div
114        class="group-hover:-mx-y group-hover:scale-110 group-hover:rotate-45"
115      >
116        46
117      </div>
118      <div class="group-hover:mx-1 group-hover:scale-150 group-hover:rotate-6">
119        47
120      </div>
121      <div class="group-hover:mx-1 group-hover:scale-125 group-hover:rotate-6">
122        48
123      </div>
124    </div>
125
126    <span
127      class="relative z-10 p-2 opacity-0 group-hover:opacity-100 leading-none whitespace-no-wrap bg-gradient-to-t from-rose-500 to-rose-700 text-sm shadow-lg transition-all text-rose-300 group-hover:text-lg"
128      >Hope You Like It 😉</span
129    >
130    <div
131      class="w-3 h-3 -z-20 -mt-2 opacity-0 group-hover:opacity-100 rotate-45 bg-rose-500 transition-all"
132    ></div>
133  </div>
134</div>
135