Components
Centered Hero Layout
JSX
Tailwind CSS
1<div class="flex h-screen w-screen flex-row items-center justify-center"> 2 <div class="fixed top-0 left-0 flex h-full w-full flex-row items-start justify-between p-3 text-lg font-semibold"> 3 <div>Logo</div> 4 <div class="flex flex-row items-center justify-between gap-4"> 5 <div class="collapse text-yellow-400 md:visible">Premium</div> 6 <div>Register</div> 7 <div class="rounded-xl border-1 border-black px-4">Sign in</div> 8 </div> 9 </div> 10 11 <div class="mt-20 flex flex-col items-center justify-center gap-2 p-1"> 12 <div class="rounded-full border-1 border-red-500 bg-red-500 p-1 px-2 font-medium text-white">Product hunt</div> 13 <div class="px-10 text-center text-4xl font-semibold">Intelligent Code Formatter That Mirrors Your Personal Style</div> 14 <div class="px-[15%] text-center font-medium text-neutral-600">Refrax AI intelligently reformats your code to match your unique coding style, preserving your logic and personal programming patterns.</div> 15 <div class="my-2 rounded-full border-1 border-neutral-500 p-1 px-3 py-1 font-medium text-black">Get Started</div> 16 <div class="mt-10 flex h-[37vh] w-[80%] flex-col rounded-t-xl border-1 border-t-10 border-r-10 border-l-10 border-neutral-700/30 bg-neutral-950"> 17 <div class="flex flex-row justify-start gap-2 p-2"> 18 <div class="rounded-full border-1 border-blue-400 p-1 px-2 text-[0.7rem] text-white">Log out</div> 19 <div class="rounded-full border-1 border-blue-400 p-1 text-[0.7rem] text-white">Get Started</div> 20 </div> 21 <div class="flex h-full w-full flex-row"> 22 <div class="flex h-full w-full flex-col items-center justify-center"> 23 <div class="mt-10 px-7 text-center text-3xl font-semibold text-white">ReFrax AI</div> 24 <div class="text-center text-sm font-semibold text-neutral-400">Reshapes your code effortlessly!</div> 25 </div> 26 <div class="h-full w-full bg-neutral-900 p-2 overflow-hidden text-white font-normal text-[0.7rem]"> 27 <pre> 28<code>function fxn(candidate){ 29 istrue = true; 30 for(var i = 2; i < candidate && isPrime; i++){ 31 if(candidate%i === 0){ 32 int x = 10; 33 } 34 for(let i = 0;i<10;i++){ 35 </code> 36 </pre> 37 </div> 38 </div> 39 </div> 40 </div> 41</div> 42 43
Centered Hero Layout 2
JSX
Tailwind CSS
1"use client" 2 3export default function HeroPage2() { 4 5 return ( 6 <div className="flex h-screen w-screen flex-col items-center justify-center bg-[#131313]"> 7 8 <div 9 className="absolute inset-0 z-0" 10 style={{ 11 background: " 12 radial-gradient(circle at 50% 50%, 13 rgba(226, 232, 240, 0.2) 0%, 14 rgba(226, 232, 240, 0.1) 25%, 15 rgba(226, 232, 240, 0.05) 35%, 16 transparent 50% 17 ) 18 ", 19 }} 20 /> 21 22 <div className="w-full h-12 border-0 border-white flex flex-row justify-center items-center z-20"> 23 24 <div className="w-full md:w-[61vw] h-full border-0 border-white flex flex-row justify-between items-center text-white px-4"> 25 <div className="w-1/4 md:w-1/3 text-[1rem] md:text-[1rem]">Logo</div> 26 <div className="w-3/4 md:w-2/3 text-[0.7rem] md:text-[1rem] flex justify-end items-center gap-4 border-0 border-yellow-400"> 27 <div>Services</div> 28 <div>Career</div> 29 <div>About Us</div> 30 <div className=" border-2 border-neutral-500 rounded-xl px-2 flex justify-center items-center hover:bg-white hover:text-black transition-colors delay-100 duration-300 cursor-pointer"> 31 <div>Register</div> 32 </div> 33 </div> 34 </div> 35 36 </div> 37 38 <div className="flex h-[40%] w-full flex-col items-center justify-center gap-4 z-10"> 39 <button className="w-40 h-8 border-2 border-neutral-700 rounded-full text-[0.8rem] text-white inset-shadow-sm ring-2 ring-neutral-800 bg-gradient-to-br from-zinc-800 to-zinc-950">Lorem at ipsum dolor. 40 </button> 41 <div className="w-full md:w-[80%] text-center text-[2rem] md:text-[3rem]/12 tracking-wide text-neutral-200 font-light">Lorem ipsum dolor sit amet consectetur.</div> 42 <div className="w-full md:w-[80%] text-center text-[1rem] tracking-wide text-neutral-200 font-light">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus ullam itaque neque.</div> 43 <button className="cursor-pointer rounded-full border-2 border-white px-6 py-2 font-semibold text-white transition-colors delay-100 duration-200 hover:text-black hover:bg-white text-[0.8rem]">Get Started</button> 44 </div> 45 <div className="relative h-[60%] w-full md:w-[50vw] border-0 border-white"> 46 <div className="absolute h-full w-full rounded-t-full bg-[#37272C]/40"></div> 47 <div className="absolute top-[10%] left-[5%] h-[90%] w-[90%] rounded-t-full bg-[#EF8AB6] inset-shadow-sm"></div> 48 <div className="absolute top-[20%] left-[10%] h-[80%] w-[80%] rounded-t-full bg-[#C15D89] inset-shadow-sm"></div> 49 <div className="absolute top-[30%] left-[15%] h-[70%] w-[70%] rounded-t-full bg-[#252525] inset-shadow-sm"></div> 50 <div className="absolute top-[40%] left-[20%] h-[60%] w-[60%] rounded-t-full bg-[#191919] inset-shadow-sm "></div> 51 52 <div className="absolute top-[15%] left-[68%] h-[30%] w-[28%] rounded-xl bg-[#131313] ring-8 ring-neutral-400/30 overflow-hidden"> 53 {/* <img className="w-full h-full object-cover" src="https://images.unsplash.com/photo-1509023464722-18d996393ca8?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" /> */} 54 </div> 55 56 <div className="absolute top-[30%] left-[5%] h-[17%] w-[17%] rounded-xl bg-[#131313] ring-8 ring-neutral-400/30 overflow-hidden"> 57 {/* <img className="w-full h-full object-cover" src="https://images.unsplash.com/photo-1511576661531-b34d7da5d0bb?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" /> */} 58 </div> 59 60 <div className="absolute top-[65%] left-[30%] h-[35%] w-[40%] rounded-2xl bg-[#131313] border-12 border-neutral-400/20 overflow-hidden"> 61 {/* <img className="w-full h-full object-cover" src="https://images.unsplash.com/photo-1477346611705-65d1883cee1e?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" /> */} 62 </div> 63 <div className="absolute top-[50%] h-[50%] w-full bg-linear-to-t from-[#131313] to-[#232222]/0"></div> 64 </div> 65 </div> 66 ) 67} 68
Poppins Hero Layout
JSX
Tailwind CSS
1 2import { Poppins } from "next/font/google" 3 4const poppins = Poppins({ 5 subsets: ['latin'], 6 weight: ["400"] 7}) 8 9export default function PoppinsPage(){ 10 return ( 11 <div className={`w-full h-screen ${poppins.className} bg-[#EFEFEF] text-neutral-400 px-10`}> 12 13 <div className="w-full h-[10%] border-0 border-black flex justify-center items-center"> 14 <div className="w-[70%] h-full text-black text-[0.8rem] flex justify-start items-center"> 15 <div className="font-medium">Vipul Dubey ©</div> 16 </div> 17 <div className="w-[30%] h-full px-8 py-4 flex justify-center items-center"> 18 <div className="w-full h-full bg-white/60 backdrop-blur-2xl flex flex-row justify-around items-center gap-4 text-[0.7rem] text-black rounded-sm"> 19 <div className="w-1/5 h-full bg-neutral-800 p-2 flex justify-center items-center"></div> 20 <div className="w-1/5 h-full flex justify-center items-center hover:text-neutral-500 transition-all cursor-pointer"><div>About</div></div> 21 <div className="w-1/5 h-full flex justify-center items-center hover:text-neutral-500 transition-all cursor-pointer"><div>Projects</div></div> 22 <div className="w-1/5 h-full flex justify-center items-center hover:text-neutral-500 transition-all cursor-pointer"><div>Capabilities</div></div> 23 <div className="w-1/5 h-full flex justify-center items-center hover:text-neutral-500 transition-all cursor-pointer"><div>Contact</div></div> 24 </div> 25 </div> 26 </div> 27 28 <div className="w-full h-[90%] text-[40px] flex justify-between items-center"> 29 <div className="w-[70%] h-full flex flex-col justify-start items-start"> 30 <div className="w-full h-8/13 text-[40px]/11 flex justify-start items-center"> 31 <div> 32 I am Vipul Dubey, a <span className="text-black">UI/UX designer</span> with a background in web and <span className="text-black">front-end development</span>. My work merges design, usability, and strategy... 33 </div> 34 </div> 35 <div className="w-full h-5/13 flex flex-row justify-start items-start"> 36 <div className="w-[60%] h-full flex flex-col justify-center items-start gap-2"> 37 <div className="text-black text-[0.8rem]">I grew up with a strong curiosity for how things work...</div> 38 <div className="text-black text-[0.8rem]">Since then, I have collaborated with diverse clients...</div> 39 </div> 40 <div className="w-[40%] h-full"></div> 41 </div> 42 </div> 43 44 <div className="w-[30%] h-full flex flex-row justify-center items-center"> 45 <div className="w-[50%] h-full"></div> 46 <div className="w-[50%] h-full flex flex-col justify-center items-center gap-2 px-4 pt-8 pb-2"> 47 <div className="h-1/2 w-full bg-black"> 48 <img className="w-full h-full object-cover" src="https://plus.unsplash.com/premium_photo-1721994124600-7a541bf7ca5c" alt="" /> 49 </div> 50 <div className="h-1/2 w-full bg-black"> 51 <img className="w-full h-full object-cover" src="https://plus.unsplash.com/premium_photo-1686727103139-2824d4fa46a3" alt="" /> 52 </div> 53 </div> 54 </div> 55 </div> 56 </div> 57 ) 58}
Hero Layout 3
JSX
Tailwind CSS
1<div class="flex h-screen w-screen flex-row items-center justify-center"> 2 <div class="flex h-[80%] w-[60%] flex-col"> 3 <div class="flex h-full w-full items-start justify-end pb-10 text-right text-[9rem]/30 font-bold tracking-tight">Visual Poetry</div> 4 <div class="h-full w-full pl-[40%] text-right text-[1.5rem]/6 text-neutral-900">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptates exercitationem minima, sapiente molestiae corporis nisi alias</div> 5 <div class="flex h-full w-full flex-row items-center justify-start -space-x-2 pl-6"> 6 <div class="flex h-12 w-12 items-center justify-center rounded-full border-2 border-black">X</div> 7 <div class="flex h-12 w-12 items-center justify-center rounded-full border-2 border-black">Y</div> 8 <div class="flex h-12 w-12 items-center justify-center rounded-full border-2 border-black">Z</div> 9 <div class="flex h-12 w-12 items-center justify-center rounded-full border-2 border-black">A</div> 10 </div> 11 <div class="flex h-full w-full flex-row items-center justify-between gap-4 px-2 ring-lime-400"> 12 <div class="h-full w-1/2 flex-col items-end justify-end gap-0 rounded-2xl border-0 border-[#FBAF42] p-4"> 13 <div class="text-right text-[4rem] font-bold italic">+200K</div> 14 <div class="h-[2px] w-full bg-black"></div> 15 <div class="w-[100%] text-right text-[1rem] font-semibold italic">Lorem ipsum dolor sit amet consectetur, adipisicing elit. sum dolor sit amet consectetur, adipisicing elit.</div> 16 </div> 17 <div class="h-full w-1/2 flex-col items-end justify-end gap-2 rounded-2xl border-0 border-[#FBAF42] p-4"> 18 <div class="text-right text-[4rem] font-bold italic">+450K</div> 19 <div class="h-[2px] w-full bg-black"></div> 20 <div class="w-[100%] text-right text-[1rem] font-semibold italic">Lorem ipsum dolor sit amet consectetur, adipisicing elit. sum dolor sit amet consectetur, adipisicing elit.</div> 21 </div> 22 </div> 23 </div> 24 <div class="flex h-[80%] w-[40%] flex-row bg-white px-8"> 25 <div class="flex h-full w-1/7 flex-col border-0 border-red-400"> 26 <div class="h-[60%] w-full rounded-l-3xl bg-[#FBAF42]"></div> 27 <div class="h-[60%] w-full bg-[#FBAF42]"> 28 <div class="flex h-full w-full flex-col items-center justify-center gap-[10px] rounded-tr-3xl bg-white"> 29 <div class="h-12 w-12 rounded-full bg-[#FBAF42]"></div> 30 <div class="h-12 w-12 rounded-full bg-[#FBAF42]"></div> 31 <div class="flex h-12 w-12 items-center justify-center overflow-hidden rounded-full border-4 border-[#FBAF42] bg-white object-cover p-[3px]"> 32 <img class="h-full w-full rounded-full transition-all delay-100 duration-700 hover:-rotate-410" src="https://img.icons8.com/?size=100&id=99982&format=png&color=000000" alt="" /> 33 </div> 34 <div class="flex h-12 w-12 items-center justify-center rounded-full border-4 border-[#FBAF42] bg-white p-[4px]"> 35 <img class="h-full w-full" src="https://img.icons8.com/?size=100&id=A3c04Fnghx1E&format=png&color=000000" alt="" /> 36 </div> 37 </div> 38 </div> 39 </div> 40 <div class="h-full w-1/7 border-0 border-red-400 bg-white"> 41 <div class="h-full w-full rounded-bl-3xl bg-[#FBAF42]"></div> 42 </div> 43 <div class="flex h-full w-4/7 flex-col border-0 border-blue-400"> 44 <div class="h-[13%] w-full border-0 border-black"> 45 <div class="h-full w-full rounded-tr-2xl bg-[#FBAF42]"></div> 46 </div> 47 <div class="h-[90%] w-full bg-[#FBAF42]"> 48 <!-- <img class="h-full w-full" src="https://images.rawpixel.com/image_png_800/cHJpdmF0ZS9sci9pbWFnZXMvd2Vic2l0ZS8yMDI0LTAxL3Jhd3BpeGVsb2ZmaWNlMTlfYXNpYW5fd29tYW5fbGF3eWVyX2lzb2xhdGVkX3doaXRlX2JhY2tncm91bmRfYzhmZjViZjItMzY4NC00OGFkLThjYTYtNTgxMGQ5NWFhNmE2LnBuZw.png" alt=""> --> 49 </div> 50 </div> 51 <div class="flex h-full w-1/7 flex-col border-0 border-red-400"> 52 <div class="h-[14%] w-full border-0 border-black bg-[#FBAF42]"> 53 <div class="flex h-full w-full items-center justify-start rounded-bl-3xl bg-white pl-[10px]"> 54 <div class="h-10 w-10 animate-spin rounded-full bg-black p-2 transition-all delay-100 duration-600 hover:translate-x-20 hover:rotate-360"> 55 <div class="h-2 w-2 rounded-full bg-white"></div> 56 </div> 57 </div> 58 </div> 59 <div class="h-full w-full border-0 border-black bg-white"> 60 <div class="h-full w-full rounded-r-3xl bg-[#FBAF42]"></div> 61 </div> 62 </div> 63 </div> 64 </div>
Metallic Navbar 1
JSX
Tailwind CSS
1export default function metallicNavBar(){ 2 return <div className="flex h-14 md:w-[73%] p-2 md:p-0 items-center justify-start rounded-full border-2 border-black/10 bg-green-950/60 shadow-md/10 inset-shadow-2xs inset-ring-2 inset-shadow-white inset-ring-neutral-400"> 3 <div className="relative z-100 md:ml-2 flex h-10 w-18 cursor-pointer items-center justify-center rounded-full border-2 border-white bg-white text-[0.8rem] text-black/60 shadow-md/30 inset-shadow-sm inset-ring-2 inset-shadow-neutral-400 inset-ring-neutral-300 transition-all delay-100 duration-300 hover:bg-black/30 hover:text-white hover:inset-shadow-white"> 4 <div className="z-10 font-semibold hover:text-white">Home</div> 5 </div> 6 <div className="hidden md:flex relative z-100 ml-2 h-10 w-18 cursor-pointer items-center justify-center rounded-full border-2 border-white bg-white text-[0.8rem] text-black/60 shadow-md/30 inset-shadow-sm inset-ring-2 inset-shadow-neutral-400 inset-ring-neutral-300 transition-all delay-100 duration-300 hover:bg-black/30 hover:text-white hover:inset-shadow-white"> 7 <div className="z-10 font-semibold hover:text-white">Services</div> 8 </div> 9 <div className="hidden md:flex relative z-100 ml-2 h-10 w-18 cursor-pointer items-center justify-center rounded-full border-2 border-white bg-white text-[0.8rem] text-black/60 shadow-md/30 inset-shadow-sm inset-ring-2 inset-shadow-neutral-400 inset-ring-neutral-300 transition-all delay-100 duration-300 hover:bg-black/30 hover:text-white hover:inset-shadow-white"> 10 <div className="z-10 font-semibold hover:text-white">Products</div> 11 </div> 12 <div className="hidden md:flex relative z-100 ml-2 h-10 w-18 cursor-pointer items-center justify-center rounded-full border-2 border-white bg-white text-[0.8rem] text-black/60 shadow-md/30 inset-shadow-sm inset-ring-2 inset-shadow-neutral-400 inset-ring-neutral-300 transition-all delay-100 duration-300 hover:bg-black/30 hover:text-white hover:inset-shadow-white"> 13 <div className="z-10 font-semibold hover:text-white">Pricing</div> 14 </div> 15 </div> 16}
Morning Button
React
GSAP
Tailwind CSS
1"use client" 2import gsap from "gsap" 3 4export default function MorningButton() { 5 6 function handleEnter(){ 7 gsap.to("#samplefirstButton",{ 8 scale:20, 9 backgroundColor:"#FF983B", 10 borderColor:"black", 11 duration:0.8, 12 delay:0, 13 }) 14 15 gsap.to("#samplefirstText",{ 16 color:"black", 17 duration:0.8, 18 delay:0, 19 }) 20 } 21 22 function handleLeave(){ 23 gsap.to("#samplefirstButton",{ 24 scale:0, 25 backgroundColor:"black", 26 borderColor:"white", 27 duration:0.8, 28 delay:0 29 }) 30 31 gsap.to("#samplefirstText",{ 32 color:"white", 33 duration:0.8, 34 delay:0, 35 }) 36 } 37 38 return ( 39 <div className="flex h-screen w-screen flex-col items-center justify-center bg-[#131313]"> 40 41 <div className="w-full h-full overflow-hidden border-0 border-red-500 mt-2 bg-white mb-[3px] rounded-2xl flex justify-center items-center"> 42 {/* <img className="w-full h-full object-cover rounded-lg" src="./heropage2.png" alt="" /> */} 43 44 <div onMouseEnter={handleEnter} onMouseLeave={handleLeave} className="relative overflow-hidden h-[20%] w-[24%] border-0 bg-[#010203] ring-2 ring-black/20 rounded-2xl flex justify-center items-center cursor-pointer"> 45 <div id="samplefirstText" className="text-2xl font-extrabold tracking-tighter text-white z-30">Button</div> 46 <div id="samplefirstButton" className="absolute top-[90%] left-[45%] w-2 h-2 bg-black z-20 rounded-t-full"></div> 47 </div> 48 49 </div> 50 51 </div> 52 ) 53} 54
N-500 Vertical Lines
JSX
Tailwind CSS
1"use client" 2 3export default function VerticaLinesBg() { 4 5 return ( 6 <div className="w-screen h-screen overflow-hidden border-2 border-white/10 bg-black flex justify-around items-center"> 7 8 <div className=" h-full w-[1px] bg-neutral-500/15"></div> 9 <div className=" h-full w-[1px] bg-neutral-500/15"></div> 10 <div className=" h-full w-[1px] bg-neutral-500/15"></div> 11 <div className=" h-full w-[1px] bg-neutral-500/15"></div> 12 <div className=" h-full w-[1px] bg-neutral-500/15"></div> 13 <div className=" h-full w-[1px] bg-neutral-500/15"></div> 14 <div className=" h-full w-[1px] bg-neutral-500/15"></div> 15 <div className=" h-full w-[1px] bg-neutral-500/15"></div> 16 17 </div> 18 ) 19} 20