1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <title>Very Good Components</title> 7 <meta name="description" content="Looking for inspiration? Browse our curated collection of HTML UI components ready to drop into your next project." /> 8 <link rel="icon" type="image/png" href="https://beehiiv-images-production.s3.amazonaws.com/uploads/asset/file/4c70eee1-c987-4dbf-a340-b6f10559ed44/logo.png?t=1767726376" /> 9 10 <!-- Open Graph / Facebook --> 11 <meta property="og:type" content="website" /> 12 <meta property="og:url" content="https://goodcomponents.io/" /> 13 <meta property="og:title" content="Very Good Components" /> 14 <meta property="og:description" content="Looking for inspiration? Browse our curated collection of HTML UI components ready to drop into your next project." /> 15 <meta property="og:image" content="https://media.beehiiv.com/cdn-cgi/image/format=auto,fit=scale-down,onerror=redirect/uploads/asset/file/ea7e1900-5b1b-4258-970a-fe5bf9b43af2/test.png" /> 16 <meta property="og:image:secure_url" content="https://media.beehiiv.com/cdn-cgi/image/format=auto,fit=scale-down,onerror=redirect/uploads/asset/file/ea7e1900-5b1b-4258-970a-fe5bf9b43af2/test.png" /> 17 <meta property="og:image:width" content="1200" /> 18 <meta property="og:image:height" content="630" /> 19 <meta property="og:image:type" content="image/png" /> 20 <meta property="og:logo" content="https://beehiiv-images-production.s3.amazonaws.com/uploads/asset/file/4c70eee1-c987-4dbf-a340-b6f10559ed44/logo.png?t=1767726376" /> 21 22 <!-- Twitter --> 23 <meta name="twitter:card" content="summary_large_image" /> 24 <meta name="twitter:url" content="https://goodcomponents.io/" /> 25 <meta name="twitter:title" content="Very Good Components" /> 26 <meta name="twitter:description" content="Looking for inspiration? Browse our curated collection of HTML UI components ready to drop into your next project." /> 27 <meta name="twitter:image" content="https://media.beehiiv.com/cdn-cgi/image/format=auto,fit=scale-down,onerror=redirect/uploads/asset/file/ea7e1900-5b1b-4258-970a-fe5bf9b43af2/test.png" /> 28 29
29<script src="https://cdn.tailwindcss.com"></script>
29 30 <link rel="preconnect" href="https://fonts.googleapis.com"> 31 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 32 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;900&display=swap" rel="stylesheet"> 33 <link href="https://api.fontshare.com/v2/css?f[]=clash-grotesk@700&f[]=satoshi@400,500,700,900&display=swap" rel="stylesheet"> 34
34<script> 35 tailwind.config = { 36 future: { 37 hoverOnlyWhenSupported: true, 38 }, 39 theme: { 40 extend: { 41 fontFamily: { 42 display: ['Clash Grotesk', 'sans-serif'], 43 body: ['Satoshi', 'sans-serif'], 44 sans: ['Satoshi', 'sans-serif'], 45 }, 46 colors: { 47 brand: { 48 ink: '#000000', // Changed to pure black 49 accent: '#ff72e3', // Pink Accent for text 50 button: '#2f39ba', // Blue Accent for buttons 51 blue: '#ff72e3', // Mapping old blue usage to new accent 52 purple: '#3843D0', // Keeping original blue as purple for gradients if needed 53 peach: '#FFC8EB', 54 flamingo: '#FF5EC4', 55 blush: '#F092DD', 56 lavender: '#D7D9F6', 57 ethereal: '#0a0a0a', // Darker ethereal 58 grey: '#9D9EAA', 59 dark: '#0a0a0a', // Changed from 0B0921 to match new dark theme 60 } 61 }, 62 backgroundImage: { 63 'gradient-brand': 'linear-gradient(to right, #ff72e3, #3843D0)', 64 }, 65 keyframes: { 66 'fade-slide-right': { 67 '0%': { opacity: '0', transform: 'translateY(10px)' }, 68 '100%': { opacity: '1', transform: 'translateY(0)' }, 69 }, 70 'typing': { 71 'from': { width: '0' }, 72 'to': { width: '100%' } 73 }, 74 'fade-in-up': { 75 '0%': { opacity: '0', transform: 'translateY(10px)' }, 76 '100%': { opacity: '1', transform: 'translateY(0)' } 77 } 78 }, 79 animation: { 80 'fade-slide-right': 'fade-slide-right 0.5s ease-out forwards', 81 'typing': 'typing 2s steps(40, end) forwards', 82 'fade-in-up': 'fade-in-up 0.6s ease-out forwards', 83 } 84 }, 85 }, 86 } 87 </script>
87 88 <style> 89 /* Hide scrollbar for clean horizontal scrolling if needed */ 90 .no-scrollbar::-webkit-scrollbar { 91 display: none; 92 } 93 .no-scrollbar { 94 -ms-overflow-style: none; 95 scrollbar-width: none; 96 } 97 98 /* Button Stack Hover Effect */ 99 .btn-stack { 100 position: relative; 101 /* Smoother easing (Expo Out ish) for premium feel, slightly faster (0.3s) */ 102 /* Include color properties in transition so they animate with the stack movement */ 103 transition: 104 transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), 105 box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), 106 background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), 107 color 0.3s cubic-bezier(0.16, 1, 0.3, 1), 108 border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1); 109 110 /* Explicit default states for smooth 'out' animation */ 111 transform: translate(0, 0); 112 /* Using same colors as hover but with 0 offset/spread for slide-out effect */ 113 box-shadow: 114 0 0 0 0 #000000, 115 0 0 0 0 #ff72e3, 116 0 0 0 0 #000000, 117 0 0 0 0 #FFC8EB, 118 0 0 0 0 #000000; 119 } 120 121 /* Expand hit area to prevent glitching when element moves */ 122 .btn-stack::after { 123 content: ''; 124 position: absolute; 125 top: 0; 126 left: 0; 127 /* Start with a small buffer so you don't trigger it from way outside */ 128 right: -5px; 129 bottom: -5px; 130 z-index: -1; 131 /* Animate the hit area expansion to match the button movement */ 132 transition: right 0.3s cubic-bezier(0.16, 1, 0.3, 1), bottom 0.3s cubic-bezier(0.16, 1, 0.3, 1); 133 } 134 135 @media (hover: hover) { 136 .btn-stack:hover::after { 137 /* Expand the hit area to compensate for the 12px movement + buffer */ 138 /* This ensures the mouse stays 'inside' even as the button pulls away */ 139 right: -20px; 140 bottom: -20px; 141 } 142 143 .btn-stack:hover { 144 /* Move the main element up and left by 12px */ 145 transform: translate(-12px, -12px); 146 z-index: 20; 147 box-shadow: 148 /* Layer 1: Main Button Border */ 149 0 0 0 2px #000000, 150 /* Layer 2: Middle Card Fill (6px offset from new pos) */ 151 6px 6px 0 0 #ff72e3, 152 /* Layer 2: Middle Card Border */ 153 6px 6px 0 2px #000000, 154 /* Layer 3: Bottom Card Fill (12px offset from new pos - lands at original 0,0) */ 155 12px 12px 0 0 #FFC8EB, 156 /* Layer 3: Bottom Card Border */ 157 12px 12px 0 2px #000000; 158 } 159 } 160 161 /* Mobile tap effect for buttons */ 162 .btn-stack.active { 163 transform: translate(-12px, -12px); 164 z-index: 20; 165 box-shadow: 166 0 0 0 2px #000000, 167 6px 6px 0 0 #ff72e3, 168 6px 6px 0 2px #000000, 169 12px 12px 0 0 #FFC8EB, 170 12px 12px 0 2px #000000; 171 } 172 173 body { 174 font-family: 'Satoshi', sans-serif; 175 color: #ffffff; 176 background-color: #000000; /* Pure Black Background */ 177 -webkit-font-smoothing: antialiased; 178 -moz-osx-font-smoothing: grayscale; 179 } 180 181 h1, h2, h3, h4, h5, h6 { 182 font-family: 'Clash Grotesk', sans-serif; 183 } 184 185 /* Line clamp utilities */ 186 .line-clamp-3 { 187 display: -webkit-box !important; 188 -webkit-line-clamp: 3 !important; 189 -webkit-box-orient: vertical !important; 190 overflow: hidden !important; 191 text-overflow: ellipsis !important; 192 } 193 .line-clamp-4 { 194 display: -webkit-box !important; 195 -webkit-line-clamp: 4 !important; 196 -webkit-box-orient: vertical !important; 197 overflow: hidden !important; 198 text-overflow: ellipsis !important; 199 } 200 </style> 201 202
202<script type="importmap"> 203{ 204 "imports": { 205 "react/": "https://aistudiocdn.com/react@^19.2.1/", 206 "react": "https://aistudiocdn.com/react@^19.2.1", 207 "react-router-dom": "https://aistudiocdn.com/react-router-dom@^7.10.1", 208 "lucide-react": "https://aistudiocdn.com/lucide-react@^0.556.0", 209 "react-dom/": "https://aistudiocdn.com/react-dom@^19.2.1/" 210 } 211} 212</script>
212 213
213<script type="module" crossorigin src="/assets/index-DeSb0ONE.js"></script>
213 214</head> 215 <body> 216 <div id="root"></div> 217 </body> 218</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.