5
5
< meta charset ="UTF-8 ">
6
6
< meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
7
7
< title > VOV.CSS - TailwindCSS</ title >
8
+ < meta property ="og:title " content ="TailwindCSS-VOV ">
9
+ < meta property ="og:site_name " content ="TailwindCSS-VOV ">
10
+ < meta property ="og:url " content ="https://vaibhav111tandon.github.io/tailwindcss-vov ">
11
+ < meta property ="og:description " content ="A TailwindCSS plugin for VOV.CSS animations ">
12
+ < meta property ="og:type " content ="product ">
13
+ < meta property ="og:image " content ="https://vaibhav111tandon.github.io/tailwindcss-vov/banner.png ">
14
+ < meta property ="og:url " content ="https://vaibhav111tandon.github.io/tailwindcss-vov ">
15
+
16
+ <!-- Twitter Meta Tags -->
17
+ < meta name ="twitter:card " content ="summary_large_image ">
18
+ < meta property ="twitter:domain " content ="vaibhav111tandon.github.io ">
19
+ < meta property ="twitter:url " content ="https://vaibhav111tandon.github.io/tailwindcss-vov ">
20
+ < meta name ="twitter:title " content ="TailwindCSS-VOV ">
21
+ < meta name ="twitter:description " content ="A TailwindCSS plugin for VOV.CSS animations ">
22
+ < meta name ="twitter:image " content ="https://vaibhav111tandon.github.io/tailwindcss-vov/banner.png ">
23
+
8
24
< link rel ="stylesheet " href ="./output.css ">
9
25
< style >
10
- .vov__container {
26
+ .vov__container {
11
27
display : flex;
12
28
justify-content : center;
13
29
align-items : center;
16
32
height : 100svh ;
17
33
overflow-x : hidden;
18
34
}
19
- # vov__target {
35
+
36
+ # vov__target {
20
37
font-family : sans-serif;
21
38
font-size : 64px ;
22
39
}
23
- # vov__display {
40
+
41
+ # vov__display {
24
42
border : transparent;
25
43
border-radius : 10px ;
26
44
width : fit-content;
29
47
display : block;
30
48
background-color : # f1f1f1 ;
31
49
}
50
+
32
51
@media screen and (max-width : 600px ) {
33
- # vov__target {
52
+ # vov__target {
34
53
font-family : sans-serif;
35
54
font-size : 32px ;
36
55
}
37
- # vov__display {
56
+
57
+ # vov__display {
38
58
font-size : 12px ;
39
59
}
40
60
}
43
63
44
64
< body >
45
65
< section class ="vov__container ">
46
- < a href ="https://github.com/vaibhav111tandon/tailwindcss-vov " class ="github-corner " aria-label ="View source on GitHub "> < svg width ="80 " height ="80 " viewBox ="0 0 250 250 " style ="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0; " aria-hidden ="true ">
47
- < path d ="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z "> </ path >
48
- < path d ="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2 " fill ="currentColor " style ="transform-origin: 130px 106px; " class ="octo-arm "> </ path >
49
- < path d ="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z " fill ="currentColor " class ="octo-body "> </ path >
50
- </ svg > </ a >
66
+ < a href ="https://github.com/vaibhav111tandon/tailwindcss-vov " class ="github-corner "
67
+ aria-label ="View source on GitHub "> < svg width ="80 " height ="80 " viewBox ="0 0 250 250 "
68
+ style ="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0; " aria-hidden ="true ">
69
+ < path d ="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z "> </ path >
70
+ < path
71
+ d ="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2 "
72
+ fill ="currentColor " style ="transform-origin: 130px 106px; " class ="octo-arm "> </ path >
73
+ < path
74
+ d ="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z "
75
+ fill ="currentColor " class ="octo-body "> </ path >
76
+ </ svg > </ a >
51
77
< div id ="vov__target " class ="vov fade-in-top-right ">
52
78
TailwindCSS-VOV
53
79
</ div >
134
160
135
161
136
162
</ script >
137
- < script > window . beak_io = "fH94FpB3J" </ script >
163
+ < script > window . beak_io = "fH94FpB3J" </ script >
138
164
< script src ="https://beak-widget.pages.dev/beak.min.js " async > </ script >
139
165
140
166
</ html >
0 commit comments