-
-
Save bizrockman/c47f0bdb931bdd3c3620d9dc7e89e6c5 to your computer and use it in GitHub Desktop.
Build and Deploy Your Own ChatGPT AI SaaS Business with React
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@tailwind base; | |
@tailwind components; | |
@tailwind utilities; | |
/* | |
Note: The styles for this gradient grid background is heavily inspired by the creator of this amazing site (https://dub.sh) – all credits go to them! | |
*/ | |
.main { | |
width: 100vw; | |
min-height: 100vh; | |
position: fixed; | |
display: flex; | |
justify-content: center; | |
padding: 120px 24px 160px 24px; | |
pointer-events: none; | |
} | |
.main:before { | |
background: radial-gradient(circle, rgba(2, 0, 36, 0) 0, #fafafa 100%); | |
position: absolute; | |
content: ""; | |
z-index: 2; | |
width: 100%; | |
height: 100%; | |
top: 0; | |
} | |
.main:after { | |
content: ""; | |
background-image: url("/src/assets/grid.svg"); | |
z-index: 1; | |
position: absolute; | |
width: 100%; | |
height: 100%; | |
top: 0; | |
opacity: 0.4; | |
filter: invert(1); | |
} | |
.gradient { | |
height: fit-content; | |
z-index: 3; | |
width: 100%; | |
max-width: 640px; | |
background-image: radial-gradient( | |
at 27% 37%, | |
hsla(215, 98%, 61%, 1) 0px, | |
transparent 0% | |
), | |
radial-gradient(at 97% 21%, hsla(125, 98%, 72%, 1) 0px, transparent 50%), | |
radial-gradient(at 52% 99%, hsla(354, 98%, 61%, 1) 0px, transparent 50%), | |
radial-gradient(at 10% 29%, hsla(256, 96%, 67%, 1) 0px, transparent 50%), | |
radial-gradient(at 97% 96%, hsla(38, 60%, 74%, 1) 0px, transparent 50%), | |
radial-gradient(at 33% 50%, hsla(222, 67%, 73%, 1) 0px, transparent 50%), | |
radial-gradient(at 79% 53%, hsla(343, 68%, 79%, 1) 0px, transparent 50%); | |
position: absolute; | |
content: ""; | |
width: 100%; | |
height: 100%; | |
filter: blur(100px) saturate(150%); | |
top: 80px; | |
opacity: 0.15; | |
} | |
@media screen and (max-width: 640px) { | |
.main { | |
padding: 0; | |
} | |
} | |
/* Tailwind Styles */ | |
.app { | |
@apply relative z-10 flex justify-center items-center flex-col max-w-7xl mx-auto sm:px-16 px-6; | |
} | |
.black_btn { | |
@apply rounded-full border border-black bg-black py-1.5 px-5 text-sm text-white transition-all hover:bg-white hover:text-black; | |
} | |
.head_text { | |
@apply mt-5 text-5xl font-extrabold leading-[1.15] text-black sm:text-6xl text-center; | |
} | |
.orange_gradient { | |
@apply bg-gradient-to-r from-amber-500 via-orange-600 to-yellow-500 bg-clip-text text-transparent; | |
} | |
.desc { | |
@apply mt-5 text-lg text-gray-600 sm:text-xl text-center max-w-2xl; | |
} | |
.url_input { | |
@apply block w-full rounded-md border border-gray-200 bg-white py-2.5 pl-10 pr-12 text-sm shadow-lg font-satoshi font-medium focus:border-black focus:outline-none focus:ring-0; | |
} | |
.submit_btn { | |
@apply hover:border-gray-700 hover:text-gray-700 absolute inset-y-0 right-0 my-1.5 mr-1.5 flex w-10 items-center justify-center rounded border border-gray-200 font-sans text-sm font-medium text-gray-400; | |
} | |
.link_card { | |
@apply p-3 flex justify-start items-center flex-row bg-white border border-gray-200 gap-3 rounded-lg cursor-pointer; | |
} | |
.copy_btn { | |
@apply w-7 h-7 rounded-full bg-white/10 shadow-[inset_10px_-50px_94px_0_rgb(199,199,199,0.2)] backdrop-blur flex justify-center items-center cursor-pointer; | |
} | |
.blue_gradient { | |
@apply font-black bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent; | |
} | |
.summary_box { | |
@apply rounded-xl border border-gray-200 bg-white/20 shadow-[inset_10px_-50px_94px_0_rgb(199,199,199,0.2)] backdrop-blur p-4; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- satoshi font family --> | |
<link | |
href="https://api.fontshare.com/v2/css?f[]=satoshi@1,900,700,500,300,400&display=swap" | |
rel="stylesheet" | |
/> | |
<!-- inter font family --> | |
<link | |
href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" | |
rel="stylesheet" | |
/> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment