mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
730 lines
No EOL
21 KiB
HTML
730 lines
No EOL
21 KiB
HTML
<div
|
|
class="max-w-sm w-full mx-auto p-8 rounded-xl border border-[rgba(255,255,255,0.10)] dark:bg-[rgba(40,40,40,0.70)] bg-gray-100 shadow-[2px_4px_16px_0px_rgba(248,248,248,0.06)_inset] group"
|
|
>
|
|
<div
|
|
class="h-[15rem] md:h-[20rem] rounded-xl z-40 bg-neutral-300 dark:bg-[rgba(40,40,40,0.70)] [mask-image:radial-gradient(50%_50%_at_50%_50%,white_0%,transparent_100%)]"
|
|
>
|
|
<div
|
|
class="p-8 overflow-hidden h-full relative flex items-center justify-center"
|
|
>
|
|
<div
|
|
class="flex flex-row flex-shrink-0 justify-center items-center gap-2"
|
|
>
|
|
<div
|
|
class="rounded-full flex items-center justify-center bg-[rgba(248,248,248,0.01)] shadow-[0px_0px_8px_0px_rgba(248,248,248,0.25)_inset,0px_32px_24px_-16px_rgba(0,0,0,0.40)] h-8 w-8 circle-1 style-ed6AE"
|
|
id="style-ed6AE"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
shape-rendering="geometricPrecision"
|
|
text-rendering="geometricPrecision"
|
|
image-rendering="optimizeQuality"
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
viewBox="0 0 512 512"
|
|
class="h-4 w-4"
|
|
>
|
|
<rect
|
|
fill="#CC9B7A"
|
|
width="512"
|
|
height="512"
|
|
rx="104.187"
|
|
ry="105.042"
|
|
></rect>
|
|
<path
|
|
fill="#1F1F1E"
|
|
fill-rule="nonzero"
|
|
d="M318.663 149.787h-43.368l78.952 212.423 43.368.004-78.952-212.427zm-125.326 0l-78.952 212.427h44.255l15.932-44.608 82.846-.004 16.107 44.612h44.255l-79.126-212.427h-45.317zm-4.251 128.341l26.91-74.701 27.083 74.701h-53.993z"
|
|
></path>
|
|
</svg>
|
|
</div>
|
|
<div
|
|
class="rounded-full flex items-center justify-center bg-[rgba(248,248,248,0.01)] shadow-[0px_0px_8px_0px_rgba(248,248,248,0.25)_inset,0px_32px_24px_-16px_rgba(0,0,0,0.40)] h-12 w-12 circle-2 style-pvfli"
|
|
id="style-pvfli"
|
|
>
|
|
<svg
|
|
stroke="currentColor"
|
|
fill="currentColor"
|
|
stroke-width="0"
|
|
viewBox="0 0 24 24"
|
|
class="h-6 w-6 dark:text-white"
|
|
height="1em"
|
|
width="1em"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M9.75 14a.75.75 0 0 1 .75.75v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 .75-.75Zm4.5 0a.75.75 0 0 1 .75.75v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 .75-.75Z"
|
|
></path>
|
|
<path
|
|
d="M12 2c2.214 0 4.248.657 5.747 1.756.136.099.268.204.397.312.584.235 1.077.546 1.474.952.85.869 1.132 2.037 1.132 3.368 0 .368-.014.733-.052 1.086l.633 1.478.043.022A4.75 4.75 0 0 1 24 15.222v1.028c0 .529-.309.987-.565 1.293-.28.336-.636.653-.966.918a13.84 13.84 0 0 1-1.299.911l-.024.015-.006.004-.039.025c-.223.135-.45.264-.68.386-.46.245-1.122.571-1.941.895C16.845 21.344 14.561 22 12 22c-2.561 0-4.845-.656-6.479-1.303a19.046 19.046 0 0 1-1.942-.894 14.081 14.081 0 0 1-.535-.3l-.144-.087-.04-.025-.006-.004-.024-.015a13.16 13.16 0 0 1-1.299-.911 6.913 6.913 0 0 1-.967-.918C.31 17.237 0 16.779 0 16.25v-1.028a4.75 4.75 0 0 1 2.626-4.248l.043-.022.633-1.478a10.195 10.195 0 0 1-.052-1.086c0-1.331.282-2.498 1.132-3.368.397-.406.89-.717 1.474-.952.129-.108.261-.213.397-.312C7.752 2.657 9.786 2 12 2Zm-8 9.654v6.669a17.59 17.59 0 0 0 2.073.98C7.595 19.906 9.686 20.5 12 20.5c2.314 0 4.405-.594 5.927-1.197a17.59 17.59 0 0 0 2.073-.98v-6.669l-.038-.09c-.046.061-.095.12-.145.177-.793.9-2.057 1.259-3.782 1.259-1.59 0-2.738-.544-3.508-1.492a4.323 4.323 0 0 1-.355-.508h-.344a4.323 4.323 0 0 1-.355.508C10.704 12.456 9.555 13 7.965 13c-1.725 0-2.989-.359-3.782-1.259a3.026 3.026 0 0 1-.145-.177Zm6.309-1.092c.445-.547.708-1.334.851-2.301.057-.357.087-.718.09-1.079v-.031c-.001-.762-.166-1.26-.43-1.568l-.008-.01c-.341-.391-1.046-.689-2.533-.529-1.505.163-2.347.537-2.824 1.024-.462.473-.705 1.18-.705 2.32 0 .605.044 1.087.135 1.472.092.384.231.672.423.89.365.413 1.084.75 2.657.75.91 0 1.527-.223 1.964-.564.14-.11.268-.235.38-.374Zm2.504-2.497c.136 1.057.403 1.913.878 2.497.442.545 1.134.938 2.344.938 1.573 0 2.292-.337 2.657-.751.384-.435.558-1.151.558-2.361 0-1.14-.243-1.847-.705-2.319-.477-.488-1.318-.862-2.824-1.025-1.487-.161-2.192.139-2.533.529-.268.308-.437.808-.438 1.578v.02c.002.299.023.598.063.894Z"
|
|
></path>
|
|
</svg>
|
|
</div>
|
|
<div
|
|
class="h-16 w-16 rounded-full flex items-center justify-center bg-[rgba(248,248,248,0.01)] shadow-[0px_0px_8px_0px_rgba(248,248,248,0.25)_inset,0px_32px_24px_-16px_rgba(0,0,0,0.40)] circle-3 style-co8vS"
|
|
id="style-co8vS"
|
|
>
|
|
<svg
|
|
class="h-8 w-8 dark:text-white"
|
|
width="28"
|
|
viewBox="0 0 28 28"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M26.153 11.46a6.888 6.888 0 0 0-.608-5.73 7.117 7.117 0 0 0-3.29-2.93 7.238 7.238 0 0 0-4.41-.454 7.065 7.065 0 0 0-2.41-1.742A7.15 7.15 0 0 0 12.514 0a7.216 7.216 0 0 0-4.217 1.346 7.061 7.061 0 0 0-2.603 3.539 7.12 7.12 0 0 0-2.734 1.188A7.012 7.012 0 0 0 .966 8.268a6.979 6.979 0 0 0 .88 8.273 6.89 6.89 0 0 0 .607 5.729 7.117 7.117 0 0 0 3.29 2.93 7.238 7.238 0 0 0 4.41.454 7.061 7.061 0 0 0 2.409 1.742c.92.404 1.916.61 2.923.604a7.215 7.215 0 0 0 4.22-1.345 7.06 7.06 0 0 0 2.605-3.543 7.116 7.116 0 0 0 2.734-1.187 7.01 7.01 0 0 0 1.993-2.196 6.978 6.978 0 0 0-.884-8.27Zm-10.61 14.71c-1.412 0-2.505-.428-3.46-1.215.043-.023.119-.064.168-.094l5.65-3.22a.911.911 0 0 0 .464-.793v-7.86l2.389 1.36a.087.087 0 0 1 .046.065v6.508c0 2.952-2.491 5.248-5.257 5.248ZM4.062 21.354a5.17 5.17 0 0 1-.635-3.516c.042.025.115.07.168.1l5.65 3.22a.928.928 0 0 0 .928 0l6.898-3.93v2.72a.083.083 0 0 1-.034.072l-5.711 3.255a5.386 5.386 0 0 1-4.035.522 5.315 5.315 0 0 1-3.23-2.443ZM2.573 9.184a5.283 5.283 0 0 1 2.768-2.301V13.515a.895.895 0 0 0 .464.793l6.897 3.93-2.388 1.36a.087.087 0 0 1-.08.008L4.52 16.349a5.262 5.262 0 0 1-2.475-3.185 5.192 5.192 0 0 1 .527-3.98Zm19.623 4.506-6.898-3.93 2.388-1.36a.087.087 0 0 1 .08-.008l5.713 3.255a5.28 5.28 0 0 1 2.054 2.118 5.19 5.19 0 0 1-.488 5.608 5.314 5.314 0 0 1-2.39 1.742v-6.633a.896.896 0 0 0-.459-.792Zm2.377-3.533a7.973 7.973 0 0 0-.168-.099l-5.65-3.22a.93.93 0 0 0-.928 0l-6.898 3.93V8.046a.083.083 0 0 1 .034-.072l5.712-3.251a5.375 5.375 0 0 1 5.698.241 5.262 5.262 0 0 1 1.865 2.28c.39.92.506 1.93.335 2.913ZM9.631 15.009l-2.39-1.36a.083.083 0 0 1-.046-.065V7.075c.001-.997.29-1.973.832-2.814a5.297 5.297 0 0 1 2.231-1.935 5.382 5.382 0 0 1 5.659.72 4.89 4.89 0 0 0-.168.093l-5.65 3.22a.913.913 0 0 0-.465.793l-.003 7.857Zm1.297-2.76L14 10.5l3.072 1.75v3.5L14 17.499l-3.072-1.75v-3.5Z"
|
|
fill="currentColor"
|
|
></path>
|
|
</svg>
|
|
</div>
|
|
<div
|
|
class="rounded-full flex items-center justify-center bg-[rgba(248,248,248,0.01)] shadow-[0px_0px_8px_0px_rgba(248,248,248,0.25)_inset,0px_32px_24px_-16px_rgba(0,0,0,0.40)] h-12 w-12 circle-4 style-ce5cf"
|
|
id="style-ce5cf"
|
|
>
|
|
<svg
|
|
id="Layer_1"
|
|
data-name="Layer 1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 287.56 191"
|
|
class="h-6 w-6"
|
|
>
|
|
<defs>
|
|
<linearGradient
|
|
id="linear-gradient"
|
|
x1="62.34"
|
|
y1="101.45"
|
|
x2="260.34"
|
|
y2="91.45"
|
|
gradientTransform="matrix(1, 0, 0, -1, 0, 192)"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop offset="0" stop-color="#0064e1"></stop>
|
|
<stop offset="0.4" stop-color="#0064e1"></stop>
|
|
<stop offset="0.83" stop-color="#0073ee"></stop>
|
|
<stop offset="1" stop-color="#0082fb"></stop>
|
|
</linearGradient>
|
|
<linearGradient
|
|
id="linear-gradient-2"
|
|
x1="41.42"
|
|
y1="53"
|
|
x2="41.42"
|
|
y2="126"
|
|
gradientTransform="matrix(1, 0, 0, -1, 0, 192)"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop offset="0" stop-color="#0082fb"></stop>
|
|
<stop offset="1" stop-color="#0064e0"></stop>
|
|
</linearGradient>
|
|
</defs>
|
|
<path
|
|
fill="#0081fb"
|
|
d="M31.06,126c0,11,2.41,19.41,5.56,24.51A19,19,0,0,0,53.19,160c8.1,0,15.51-2,29.79-21.76,11.44-15.83,24.92-38,34-52l15.36-23.6c10.67-16.39,23-34.61,37.18-47C181.07,5.6,193.54,0,206.09,0c21.07,0,41.14,12.21,56.5,35.11,16.81,25.08,25,56.67,25,89.27,0,19.38-3.82,33.62-10.32,44.87C271,180.13,258.72,191,238.13,191V160c17.63,0,22-16.2,22-34.74,0-26.42-6.16-55.74-19.73-76.69-9.63-14.86-22.11-23.94-35.84-23.94-14.85,0-26.8,11.2-40.23,31.17-7.14,10.61-14.47,23.54-22.7,38.13l-9.06,16c-18.2,32.27-22.81,39.62-31.91,51.75C84.74,183,71.12,191,53.19,191c-21.27,0-34.72-9.21-43-23.09C3.34,156.6,0,141.76,0,124.85Z"
|
|
></path>
|
|
<path
|
|
fill="url(#linear-gradient)"
|
|
d="M24.49,37.3C38.73,15.35,59.28,0,82.85,0c13.65,0,27.22,4,41.39,15.61,15.5,12.65,32,33.48,52.63,67.81l7.39,12.32c17.84,29.72,28,45,33.93,52.22,7.64,9.26,13,12,19.94,12,17.63,0,22-16.2,22-34.74l27.4-.86c0,19.38-3.82,33.62-10.32,44.87C271,180.13,258.72,191,238.13,191c-12.8,0-24.14-2.78-36.68-14.61-9.64-9.08-20.91-25.21-29.58-39.71L146.08,93.6c-12.94-21.62-24.81-37.74-31.68-45C107,40.71,97.51,31.23,82.35,31.23c-12.27,0-22.69,8.61-31.41,21.78Z"
|
|
></path>
|
|
<path
|
|
fill="url(#linear-gradient-2)"
|
|
d="M82.35,31.23c-12.27,0-22.69,8.61-31.41,21.78C38.61,71.62,31.06,99.34,31.06,126c0,11,2.41,19.41,5.56,24.51L10.14,167.91C3.34,156.6,0,141.76,0,124.85,0,94.1,8.44,62.05,24.49,37.3,38.73,15.35,59.28,0,82.85,0Z"
|
|
></path>
|
|
</svg>
|
|
</div>
|
|
<div
|
|
class="rounded-full flex items-center justify-center bg-[rgba(248,248,248,0.01)] shadow-[0px_0px_8px_0px_rgba(248,248,248,0.25)_inset,0px_32px_24px_-16px_rgba(0,0,0,0.40)] h-8 w-8 circle-5 style-cq179"
|
|
id="style-cq179"
|
|
>
|
|
<svg
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 16 16"
|
|
class="h-4 w-4"
|
|
>
|
|
<path
|
|
d="M16 8.016A8.522 8.522 0 008.016 16h-.032A8.521 8.521 0 000 8.016v-.032A8.521 8.521 0 007.984 0h.032A8.522 8.522 0 0016 7.984v.032z"
|
|
fill="url(#prefix__paint0_radial_980_20147)"
|
|
></path>
|
|
<defs>
|
|
<radialGradient
|
|
id="prefix__paint0_radial_980_20147"
|
|
cx="0"
|
|
cy="0"
|
|
r="1"
|
|
gradientUnits="userSpaceOnUse"
|
|
gradientTransform="matrix(16.1326 5.4553 -43.70045 129.2322 1.588 6.503)"
|
|
>
|
|
<stop offset=".067" stop-color="#9168C0"></stop>
|
|
<stop offset=".343" stop-color="#5684D1"></stop>
|
|
<stop offset=".672" stop-color="#1BA1E3"></stop>
|
|
</radialGradient>
|
|
</defs>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="h-40 w-px absolute top-20 m-auto z-40 bg-gradient-to-b from-transparent via-cyan-500 to-transparent animate-move"
|
|
>
|
|
<div class="w-10 h-32 top-1/2 -translate-y-1/2 absolute -left-10">
|
|
<div class="absolute inset-0">
|
|
<span
|
|
class="inline-block bg-black dark:bg-white style-85zWm"
|
|
id="style-85zWm"
|
|
></span
|
|
><span
|
|
class="inline-block bg-black dark:bg-white style-LbmUy"
|
|
id="style-LbmUy"
|
|
></span
|
|
><span
|
|
class="inline-block bg-black dark:bg-white style-OTex5"
|
|
id="style-OTex5"
|
|
></span
|
|
><span
|
|
class="inline-block bg-black dark:bg-white style-oUEf7"
|
|
id="style-oUEf7"
|
|
></span
|
|
><span
|
|
class="inline-block bg-black dark:bg-white style-9lwEF"
|
|
id="style-9lwEF"
|
|
></span
|
|
><span
|
|
class="inline-block bg-black dark:bg-white style-VSPhh"
|
|
id="style-VSPhh"
|
|
></span
|
|
><span
|
|
class="inline-block bg-black dark:bg-white style-YKMZp"
|
|
id="style-YKMZp"
|
|
></span
|
|
><span
|
|
class="inline-block bg-black dark:bg-white style-D4K7j"
|
|
id="style-D4K7j"
|
|
></span
|
|
><span
|
|
class="inline-block bg-black dark:bg-white style-61SdM"
|
|
id="style-61SdM"
|
|
></span
|
|
><span
|
|
class="inline-block bg-black dark:bg-white style-xcj7O"
|
|
id="style-xcj7O"
|
|
></span
|
|
><span
|
|
class="inline-block bg-black dark:bg-white style-P6qK5"
|
|
id="style-P6qK5"
|
|
></span
|
|
><span
|
|
class="inline-block bg-black dark:bg-white style-XRDvo"
|
|
id="style-XRDvo"
|
|
></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="text-lg font-semibold text-gray-800 dark:text-white py-2">
|
|
Damn good card
|
|
</p>
|
|
<p
|
|
class="text-sm font-normal text-neutral-600 dark:text-neutral-400 max-w-sm"
|
|
>
|
|
A card that showcases a set of tools that you use to create your product.
|
|
</p>
|
|
</div>
|
|
|
|
<style>
|
|
/* From Uiverse.io by VashonG - Tags: card */
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
|
|
.w-full {
|
|
width: 100%;
|
|
}
|
|
|
|
.items-center {
|
|
align-items: center;
|
|
}
|
|
|
|
.justify-center {
|
|
justify-content: center;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.sm\:p-10 {
|
|
padding: 2.5rem;
|
|
}
|
|
}
|
|
|
|
.relative {
|
|
position: relative;
|
|
}
|
|
|
|
.border {
|
|
border-width: 1px;
|
|
}
|
|
|
|
.overflow-hidden {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.mx-auto {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.md\:px-0 {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.md\:px-8 {
|
|
padding-left: 2rem;
|
|
padding-right: 2rem;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.lg\:gap-10 {
|
|
gap: 2.5rem;
|
|
}
|
|
|
|
.lg\:py-8 {
|
|
padding-top: 2rem;
|
|
padding-bottom: 2rem;
|
|
}
|
|
}
|
|
|
|
:is(.dark .dark\:bg-brand) {
|
|
--tw-bg-opacity: 1;
|
|
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--foreground-rgb: #000;
|
|
}
|
|
}
|
|
|
|
.max-w-sm {
|
|
max-width: 24rem;
|
|
}
|
|
|
|
.rounded-xl {
|
|
border-radius: 0.75rem;
|
|
}
|
|
|
|
.border-\[rgba\(255\,255\,255\,0\.10\)\] {
|
|
border-color: hsla(0, 0%, 100%, 0.1);
|
|
}
|
|
|
|
.bg-gray-100 {
|
|
--tw-bg-opacity: 1;
|
|
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
|
|
}
|
|
|
|
.p-8 {
|
|
padding: 2rem;
|
|
}
|
|
|
|
.shadow-\[2px_4px_16px_0px_rgba\(248\,248\,248\,0\.06\)_inset\] {
|
|
--tw-shadow: 2px 4px 16px 0px hsla(0, 0%, 97%, 0.06) inset;
|
|
--tw-shadow-colored: inset 2px 4px 16px 0px var(--tw-shadow-color);
|
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
|
|
var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
}
|
|
|
|
:is(.dark .dark\:bg-\[rgba\(40\,40\,40\,0\.70\)\]) {
|
|
background-color: rgba(40, 40, 40, 0.7);
|
|
}
|
|
|
|
.z-40 {
|
|
z-index: 40;
|
|
}
|
|
|
|
.bg-neutral-300 {
|
|
--tw-bg-opacity: 1;
|
|
background-color: rgb(212 212 212 / var(--tw-bg-opacity));
|
|
}
|
|
|
|
.\[mask-image\:radial-gradient\(50\%_50\%_at_50\%_50\%\,white_0\%\,transparent_100\%\)\] {
|
|
-webkit-mask-image: radial-gradient(
|
|
50% 50% at 50% 50%,
|
|
#000 0,
|
|
transparent 100%
|
|
);
|
|
mask-image: radial-gradient(50% 50% at 50% 50%, #000 0, transparent 100%);
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.md\:h-\[20rem\] {
|
|
height: 20rem;
|
|
}
|
|
}
|
|
|
|
.py-2 {
|
|
padding-top: 0.5rem;
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
|
|
.text-lg {
|
|
font-size: 1.125rem;
|
|
line-height: 1.75rem;
|
|
}
|
|
|
|
.font-semibold {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.text-gray-800 {
|
|
--tw-text-opacity: 1;
|
|
color: rgb(31 41 55 / var(--tw-text-opacity));
|
|
}
|
|
|
|
:is(.dark .dark\:text-white) {
|
|
--tw-text-opacity: 1;
|
|
color: rgb(255 255 255 / var(--tw-text-opacity));
|
|
}
|
|
|
|
.text-sm {
|
|
font-size: 0.875rem;
|
|
line-height: 1.25rem;
|
|
}
|
|
|
|
.font-normal {
|
|
font-weight: 400;
|
|
}
|
|
|
|
.text-neutral-600 {
|
|
--tw-text-opacity: 1;
|
|
color: rgb(82 82 82 / var(--tw-text-opacity));
|
|
}
|
|
|
|
:is(.dark .dark\:text-neutral-400) {
|
|
--tw-text-opacity: 1;
|
|
color: rgb(163 163 163 / var(--tw-text-opacity));
|
|
}
|
|
|
|
.h-full {
|
|
height: 100%;
|
|
}
|
|
|
|
.flex-shrink-0 {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.flex-row {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.gap-2 {
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.absolute {
|
|
position: absolute;
|
|
}
|
|
|
|
.top-20 {
|
|
top: 5rem;
|
|
}
|
|
|
|
.m-auto {
|
|
margin: auto;
|
|
}
|
|
|
|
.h-40 {
|
|
height: 10rem;
|
|
}
|
|
|
|
.w-px {
|
|
width: 1px;
|
|
}
|
|
|
|
.animate-move {
|
|
animation: move 5s linear infinite;
|
|
}
|
|
|
|
.bg-gradient-to-b {
|
|
background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
|
|
}
|
|
|
|
.from-transparent {
|
|
--tw-gradient-from: transparent var(--tw-gradient-from-position);
|
|
--tw-gradient-to: transparent var(--tw-gradient-to-position);
|
|
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
|
}
|
|
|
|
.via-cyan-500 {
|
|
--tw-gradient-to: rgba(6, 182, 212, 0) var(--tw-gradient-to-position);
|
|
--tw-gradient-stops: var(--tw-gradient-from),
|
|
#06b6d4 var(--tw-gradient-via-position), var(--tw-gradient-to);
|
|
}
|
|
|
|
.to-transparent {
|
|
--tw-gradient-to: transparent var(--tw-gradient-to-position);
|
|
}
|
|
|
|
.h-8 {
|
|
height: 2rem;
|
|
}
|
|
|
|
.w-8 {
|
|
width: 2rem;
|
|
}
|
|
|
|
.rounded-full {
|
|
border-radius: 9999px;
|
|
}
|
|
|
|
.h-12 {
|
|
height: 3rem;
|
|
}
|
|
|
|
.w-12 {
|
|
width: 3rem;
|
|
}
|
|
|
|
.h-16 {
|
|
height: 4rem;
|
|
}
|
|
|
|
.w-16 {
|
|
width: 4rem;
|
|
}
|
|
|
|
.-left-10 {
|
|
left: -2.5rem;
|
|
}
|
|
|
|
.top-1\/2 {
|
|
top: 50%;
|
|
}
|
|
|
|
.h-32 {
|
|
height: 8rem;
|
|
}
|
|
|
|
.w-10 {
|
|
width: 2.5rem;
|
|
}
|
|
|
|
.-translate-y-1\/2 {
|
|
--tw-translate-y: -50%;
|
|
}
|
|
|
|
.-translate-y-1\/2 {
|
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
|
|
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
|
|
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
}
|
|
|
|
.h-4 {
|
|
height: 1rem;
|
|
}
|
|
|
|
.w-4 {
|
|
width: 1rem;
|
|
}
|
|
|
|
.h-6 {
|
|
height: 1.5rem;
|
|
}
|
|
|
|
.w-6 {
|
|
width: 1.5rem;
|
|
}
|
|
|
|
.inset-0 {
|
|
inset: 0;
|
|
}
|
|
|
|
.inline-block {
|
|
display: inline-block;
|
|
}
|
|
|
|
.bg-black {
|
|
--tw-bg-opacity: 1;
|
|
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
|
|
}
|
|
|
|
:is(.dark .dark\:bg-white) {
|
|
--tw-bg-opacity: 1;
|
|
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
|
}
|
|
|
|
@keyframes move {
|
|
0% {
|
|
transform: translateX(-200px);
|
|
transform: translateX(-200px);
|
|
}
|
|
100% {
|
|
transform: translateX(200px);
|
|
transform: translateX(200px);
|
|
}
|
|
}
|
|
#style-ed6AE.style-ed6AE {
|
|
will-change: transform;
|
|
transform: translateY(-0.05094px);
|
|
}
|
|
#style-pvfli.style-pvfli {
|
|
will-change: transform;
|
|
transform: translateY(0px);
|
|
}
|
|
#style-co8vS.style-co8vS {
|
|
will-change: transform;
|
|
transform: translateY(0px);
|
|
}
|
|
#style-ce5cf.style-ce5cf {
|
|
will-change: transform;
|
|
transform: translateY(0px);
|
|
}
|
|
#style-cq179.style-cq179 {
|
|
will-change: transform;
|
|
transform: translateY(0px);
|
|
}
|
|
#style-85zWm.style-85zWm {
|
|
position: absolute;
|
|
top: 94.7378px;
|
|
left: 17.28px;
|
|
width: 2px;
|
|
height: 2px;
|
|
border-radius: 50%;
|
|
z-index: 1;
|
|
will-change: opacity, transform;
|
|
transform: scale(1.12334);
|
|
opacity: 1;
|
|
}
|
|
#style-LbmUy.style-LbmUy {
|
|
position: absolute;
|
|
top: 23.6802px;
|
|
left: 12.1047px;
|
|
width: 2px;
|
|
height: 2px;
|
|
border-radius: 50%;
|
|
z-index: 1;
|
|
will-change: opacity, transform;
|
|
transform: scale(0.395521);
|
|
opacity: 1;
|
|
}
|
|
#style-OTex5.style-OTex5 {
|
|
position: absolute;
|
|
top: 35.4375px;
|
|
left: 13.9731px;
|
|
width: 2px;
|
|
height: 2px;
|
|
border-radius: 50%;
|
|
z-index: 1;
|
|
will-change: opacity, transform;
|
|
transform: scale(1.13813);
|
|
opacity: 1;
|
|
}
|
|
#style-oUEf7.style-oUEf7 {
|
|
position: absolute;
|
|
top: 42.0762px;
|
|
left: 25.4587px;
|
|
width: 2px;
|
|
height: 2px;
|
|
border-radius: 50%;
|
|
z-index: 1;
|
|
will-change: opacity, transform;
|
|
transform: scale(0.225724);
|
|
opacity: 1;
|
|
}
|
|
#style-9lwEF.style-9lwEF {
|
|
position: absolute;
|
|
top: 104.982px;
|
|
left: 19.196px;
|
|
width: 2px;
|
|
height: 2px;
|
|
border-radius: 50%;
|
|
z-index: 1;
|
|
will-change: opacity, transform;
|
|
transform: scale(1.06254);
|
|
opacity: 1;
|
|
}
|
|
#style-VSPhh.style-VSPhh {
|
|
position: absolute;
|
|
top: 18.6269px;
|
|
left: 35.18px;
|
|
width: 2px;
|
|
height: 2px;
|
|
border-radius: 50%;
|
|
z-index: 1;
|
|
will-change: opacity, transform;
|
|
transform: scale(0.430767);
|
|
opacity: 1;
|
|
}
|
|
#style-YKMZp.style-YKMZp {
|
|
position: absolute;
|
|
top: 25.504px;
|
|
left: 19.6629px;
|
|
width: 2px;
|
|
height: 2px;
|
|
border-radius: 50%;
|
|
z-index: 1;
|
|
will-change: opacity, transform;
|
|
transform: scale(0.775868);
|
|
opacity: 1;
|
|
}
|
|
#style-D4K7j.style-D4K7j {
|
|
position: absolute;
|
|
top: 61.3206px;
|
|
left: 10.669px;
|
|
width: 2px;
|
|
height: 2px;
|
|
border-radius: 50%;
|
|
z-index: 1;
|
|
will-change: opacity, transform;
|
|
transform: scale(1.12492);
|
|
opacity: 1;
|
|
}
|
|
#style-61SdM.style-61SdM {
|
|
position: absolute;
|
|
top: 65.412px;
|
|
left: 26.2222px;
|
|
width: 2px;
|
|
height: 2px;
|
|
border-radius: 50%;
|
|
z-index: 1;
|
|
will-change: opacity, transform;
|
|
transform: scale(0.714952);
|
|
opacity: 1;
|
|
}
|
|
#style-xcj7O.style-xcj7O {
|
|
position: absolute;
|
|
top: 76.026px;
|
|
left: 35.6904px;
|
|
width: 2px;
|
|
height: 2px;
|
|
border-radius: 50%;
|
|
z-index: 1;
|
|
will-change: opacity, transform;
|
|
transform: scale(0.0932895);
|
|
opacity: 1;
|
|
}
|
|
#style-P6qK5.style-P6qK5 {
|
|
position: absolute;
|
|
top: 51.8203px;
|
|
left: 21.9557px;
|
|
width: 2px;
|
|
height: 2px;
|
|
border-radius: 50%;
|
|
z-index: 1;
|
|
will-change: opacity, transform;
|
|
transform: scale(0.648569);
|
|
opacity: 1;
|
|
}
|
|
#style-XRDvo.style-XRDvo {
|
|
position: absolute;
|
|
top: 71.8022px;
|
|
left: 30.554px;
|
|
width: 2px;
|
|
height: 2px;
|
|
border-radius: 50%;
|
|
z-index: 1;
|
|
will-change: opacity, transform;
|
|
transform: scale(1.14523);
|
|
opacity: 1;
|
|
}
|
|
|
|
</style>
|
|
|