80 Unique Glow & Neon Forms – Complete Collection IN REACT

Form 21: Neon Rounded

Introduction: Extra rounded corners with soft neon glow for a friendly appearance.

Features: Pill-shaped form, rounded inputs, smooth glow.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const glow = keyframes` 0% { box-shadow: 0 0 5px #ff6b6b, 0 0 10px #ff6b6b; } 50% { box-shadow: 0 0 20px #ff6b6b, 0 0 40px #ff6b6b; } 100% { box-shadow: 0 0 5px #ff6b6b, 0 0 10px #ff6b6b; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #1a0f0f; `; const Form = styled.form` background: #241414; padding: 50px; width: 350px; border: 3px solid #ff6b6b; border-radius: 60px; animation: ${glow} 3s infinite; `; const Input = styled.input` width: 100%; padding: 15px 25px; margin: 15px 0; border: 2px solid #ff6b6b; border-radius: 40px; background: transparent; color: #ff6b6b; font-size: 16px; text-align: center; &:focus { outline: none; box-shadow: 0 0 15px #ff6b6b; } `; const Button = styled.button` width: 100%; padding: 15px 25px; margin-top: 20px; border: 2px solid #ff6b6b; border-radius: 40px; background: transparent; color: #ff6b6b; font-size: 16px; cursor: pointer; &:hover { background: #ff6b6b; color: #1a0f0f; box-shadow: 0 0 30px #ff6b6b; } `; const Form21 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', color: '#ff6b6b', marginBottom: 30, textShadow: '0 0 10px #ff6b6b' }}> ROUNDED NEON </h2> <Input type="email" placeholder="Email" /> <Input type="password" placeholder="Password" /> <Button type="submit">GLOW IN</Button> </Form> </Container> ); }; export default Form21;

Form 22: Neon Square

Introduction: Sharp square corners with intense neon glow for a modern industrial look.

Features: No border radius, geometric precision, bold appearance.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const glow = keyframes` 0% { box-shadow: 0 0 5px #00ff00, 0 0 10px #00ff00; } 50% { box-shadow: 0 0 20px #00ff00, 0 0 40px #00ff00; } 100% { box-shadow: 0 0 5px #00ff00, 0 0 10px #00ff00; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #0a1a0a; `; const Form = styled.form` background: #0f1a0f; padding: 50px; width: 350px; border: 4px solid #00ff00; border-radius: 0; animation: ${glow} 3s infinite; `; const Input = styled.input` width: 100%; padding: 15px; margin: 15px 0; border: 2px solid #00ff00; border-radius: 0; background: transparent; color: #00ff00; font-size: 16px; &:focus { outline: none; box-shadow: 0 0 15px #00ff00; } `; const Button = styled.button` width: 100%; padding: 15px; margin-top: 20px; border: 2px solid #00ff00; border-radius: 0; background: transparent; color: #00ff00; font-size: 16px; cursor: pointer; &:hover { background: #00ff00; color: #0a1a0a; box-shadow: 0 0 30px #00ff00; } `; const Form22 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', color: '#00ff00', marginBottom: 30, textShadow: '0 0 10px #00ff00' }}> SQUARE NEON </h2> <Input type="email" placeholder="Email" /> <Input type="password" placeholder="Password" /> <Button type="submit">GLOW IN</Button> </Form> </Container> ); }; export default Form22;

Form 23: Neon Pill

Introduction: Pill-shaped form with extreme rounding for a soft, capsule-like appearance.

Features: Fully pill-shaped, organic feel, modern design.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const glow = keyframes` 0% { box-shadow: 0 0 5px #ff9900, 0 0 10px #ff9900; } 50% { box-shadow: 0 0 20px #ff9900, 0 0 40px #ff9900; } 100% { box-shadow: 0 0 5px #ff9900, 0 0 10px #ff9900; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #1a140a; `; const Form = styled.form` background: #241e0f; padding: 40px 60px; width: 350px; border: 3px solid #ff9900; border-radius: 200px; animation: ${glow} 3s infinite; `; const Input = styled.input` width: 100%; padding: 15px 25px; margin: 15px 0; border: 2px solid #ff9900; border-radius: 100px; background: transparent; color: #ff9900; font-size: 16px; text-align: center; &:focus { outline: none; box-shadow: 0 0 15px #ff9900; } `; const Button = styled.button` width: 100%; padding: 15px 25px; margin-top: 20px; border: 2px solid #ff9900; border-radius: 100px; background: transparent; color: #ff9900; font-size: 16px; cursor: pointer; &:hover { background: #ff9900; color: #1a140a; box-shadow: 0 0 30px #ff9900; } `; const Form23 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', color: '#ff9900', marginBottom: 30, textShadow: '0 0 10px #ff9900' }}> PILL NEON </h2> <Input type="email" placeholder="Email" /> <Input type="password" placeholder="Password" /> <Button type="submit">GLOW IN</Button> </Form> </Container> ); }; export default Form23;

Form 24: Neon Diamond

Introduction: Diamond-shaped form with neon glow for a unique geometric look.

Features: 45-degree rotated square, angular design, distinctive shape.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const glow = keyframes` 0% { box-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff; } 50% { box-shadow: 0 0 20px #ff00ff, 0 0 40px #ff00ff; } 100% { box-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #1a0f1a; `; const Form = styled.form` background: #241424; padding: 50px; width: 350px; border: 3px solid #ff00ff; transform: rotate(45deg); animation: ${glow} 3s infinite; & > * { transform: rotate(-45deg); } `; const Input = styled.input` width: 100%; padding: 15px; margin: 15px 0; border: 2px solid #ff00ff; background: transparent; color: #ff00ff; font-size: 16px; &:focus { outline: none; box-shadow: 0 0 15px #ff00ff; } `; const Button = styled.button` width: 100%; padding: 15px; margin-top: 20px; border: 2px solid #ff00ff; background: transparent; color: #ff00ff; font-size: 16px; cursor: pointer; &:hover { background: #ff00ff; color: #1a0f1a; box-shadow: 0 0 30px #ff00ff; } `; const Form24 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', color: '#ff00ff', marginBottom: 30, textShadow: '0 0 10px #ff00ff' }}> DIAMOND NEON </h2> <Input type="email" placeholder="Email" /> <Input type="password" placeholder="Password" /> <Button type="submit">GLOW IN</Button> </Form> </Container> ); }; export default Form24;

Form 25: Neon Hexagon

Introduction: Hexagonal form with neon glow for a modern geometric aesthetic.

Features: Six-sided shape, unique clipping path, standout design.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const glow = keyframes` 0% { filter: drop-shadow(0 0 5px #00ffff); } 50% { filter: drop-shadow(0 0 20px #00ffff); } 100% { filter: drop-shadow(0 0 5px #00ffff); } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #0a1a1a; `; const Form = styled.form` background: #0f1f1f; padding: 50px; width: 350px; clip-path: polygon(25% 0%, 75% 0%, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0% 75%, 0% 25%); border: 3px solid #00ffff; animation: ${glow} 3s infinite; `; const Input = styled.input` width: 100%; padding: 15px; margin: 15px 0; border: 2px solid #00ffff; background: transparent; color: #00ffff; font-size: 16px; &:focus { outline: none; box-shadow: 0 0 15px #00ffff; } `; const Button = styled.button` width: 100%; padding: 15px; margin-top: 20px; border: 2px solid #00ffff; background: transparent; color: #00ffff; font-size: 16px; cursor: pointer; &:hover { background: #00ffff; color: #0a1a1a; box-shadow: 0 0 30px #00ffff; } `; const Form25 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', color: '#00ffff', marginBottom: 30, textShadow: '0 0 10px #00ffff' }}> HEXAGON NEON </h2> <Input type="email" placeholder="Email" /> <Input type="password" placeholder="Password" /> <Button type="submit">GLOW IN</Button> </Form> </Container> ); }; export default Form25;

Form 26: Neon Octagon

Introduction: Octagonal form with neon glow for an eight-sided geometric design.

Features: Eight sides, bold shape, architectural feel.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const glow = keyframes` 0% { filter: drop-shadow(0 0 5px #ff3366); } 50% { filter: drop-shadow(0 0 20px #ff3366); } 100% { filter: drop-shadow(0 0 5px #ff3366); } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #1a0f14; `; const Form = styled.form` background: #24141a; padding: 50px; width: 350px; clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); border: 3px solid #ff3366; animation: ${glow} 3s infinite; `; const Input = styled.input` width: 100%; padding: 15px; margin: 15px 0; border: 2px solid #ff3366; background: transparent; color: #ff3366; font-size: 16px; &:focus { outline: none; box-shadow: 0 0 15px #ff3366; } `; const Button = styled.button` width: 100%; padding: 15px; margin-top: 20px; border: 2px solid #ff3366; background: transparent; color: #ff3366; font-size: 16px; cursor: pointer; &:hover { background: #ff3366; color: #1a0f14; box-shadow: 0 0 30px #ff3366; } `; const Form26 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', color: '#ff3366', marginBottom: 30, textShadow: '0 0 10px #ff3366' }}> OCTAGON NEON </h2> <Input type="email" placeholder="Email" /> <Input type="password" placeholder="Password" /> <Button type="submit">GLOW IN</Button> </Form> </Container> ); }; export default Form26;

Form 27: Neon Circle

Introduction: Perfectly circular form with radiating neon glow for a harmonious design.

Features: Circular shape, radial glow, balanced appearance.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const glow = keyframes` 0% { box-shadow: 0 0 5px #ffd700, 0 0 10px #ffd700; } 50% { box-shadow: 0 0 20px #ffd700, 0 0 40px #ffd700, 0 0 60px #ffd700; } 100% { box-shadow: 0 0 5px #ffd700, 0 0 10px #ffd700; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #1a1a0f; `; const Form = styled.form` background: #242414; padding: 50px; width: 350px; height: 350px; border: 4px solid #ffd700; border-radius: 50%; animation: ${glow} 3s infinite; display: flex; flex-direction: column; justify-content: center; `; const Input = styled.input` width: 80%; margin: 10px auto; padding: 15px; border: 2px solid #ffd700; border-radius: 30px; background: transparent; color: #ffd700; font-size: 16px; text-align: center; &:focus { outline: none; box-shadow: 0 0 15px #ffd700; } `; const Button = styled.button` width: 80%; margin: 20px auto 0; padding: 15px; border: 2px solid #ffd700; border-radius: 30px; background: transparent; color: #ffd700; font-size: 16px; cursor: pointer; &:hover { background: #ffd700; color: #1a1a0f; box-shadow: 0 0 30px #ffd700; } `; const Form27 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', color: '#ffd700', marginBottom: 20, textShadow: '0 0 10px #ffd700' }}> CIRCLE NEON </h2> <Input type="email" placeholder="Email" /> <Input type="password" placeholder="Password" /> <Button type="submit">GLOW IN</Button> </Form> </Container> ); }; export default Form27;

Form 28: Neon Oval

Introduction: Oval-shaped form with stretched neon glow for an elegant, elongated design.

Features: Elliptical shape, organic feel, sophisticated.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const glow = keyframes` 0% { box-shadow: 0 0 5px #9b59b6, 0 0 10px #9b59b6; } 50% { box-shadow: 0 0 20px #9b59b6, 0 0 40px #9b59b6; } 100% { box-shadow: 0 0 5px #9b59b6, 0 0 10px #9b59b6; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #1a0f1f; `; const Form = styled.form` background: #24142a; padding: 60px 40px; width: 400px; border: 3px solid #9b59b6; border-radius: 200px/100px; animation: ${glow} 3s infinite; `; const Input = styled.input` width: 100%; padding: 15px; margin: 15px 0; border: 2px solid #9b59b6; border-radius: 100px/50px; background: transparent; color: #9b59b6; font-size: 16px; text-align: center; &:focus { outline: none; box-shadow: 0 0 15px #9b59b6; } `; const Button = styled.button` width: 100%; padding: 15px; margin-top: 20px; border: 2px solid #9b59b6; border-radius: 100px/50px; background: transparent; color: #9b59b6; font-size: 16px; cursor: pointer; &:hover { background: #9b59b6; color: #1a0f1f; box-shadow: 0 0 30px #9b59b6; } `; const Form28 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', color: '#9b59b6', marginBottom: 30, textShadow: '0 0 10px #9b59b6' }}> OVAL NEON </h2> <Input type="email" placeholder="Email" /> <Input type="password" placeholder="Password" /> <Button type="submit">GLOW IN</Button> </Form> </Container> ); }; export default Form28;

Form 29: Neon Triangle

Introduction: Triangular form with neon glow for a bold, directional design.

Features: Three-sided shape, pointed design, dynamic feel.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const glow = keyframes` 0% { filter: drop-shadow(0 0 5px #ff4444); } 50% { filter: drop-shadow(0 0 20px #ff4444); } 100% { filter: drop-shadow(0 0 5px #ff4444); } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #1f0f0f; `; const Form = styled.form` background: #2a1414; padding: 60px 50px; width: 350px; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); border: 3px solid #ff4444; animation: ${glow} 3s infinite; `; const Input = styled.input` width: 100%; padding: 15px; margin: 15px 0; border: 2px solid #ff4444; background: transparent; color: #ff4444; font-size: 16px; &:focus { outline: none; box-shadow: 0 0 15px #ff4444; } `; const Button = styled.button` width: 100%; padding: 15px; margin-top: 20px; border: 2px solid #ff4444; background: transparent; color: #ff4444; font-size: 16px; cursor: pointer; &:hover { background: #ff4444; color: #1f0f0f; box-shadow: 0 0 30px #ff4444; } `; const Form29 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', color: '#ff4444', marginBottom: 30, textShadow: '0 0 10px #ff4444' }}> TRIANGLE NEON </h2> <Input type="email" placeholder="Email" /> <Input type="password" placeholder="Password" /> <Button type="submit">GLOW IN</Button> </Form> </Container> ); }; export default Form29;

Form 30: Neon Star

Introduction: Star-shaped form with neon glow for a magical, standout design.

Features: Five-pointed star, celebratory feel, unique shape.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const glow = keyframes` 0% { filter: drop-shadow(0 0 5px #ffd700); } 50% { filter: drop-shadow(0 0 20px #ffd700); } 100% { filter: drop-shadow(0 0 5px #ffd700); } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #1a1a0f; `; const Form = styled.form` background: #2a2a14; padding: 70px 50px; width: 350px; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); border: 3px solid #ffd700; animation: ${glow} 3s infinite; `; const Input = styled.input` width: 100%; padding: 12px; margin: 10px 0; border: 2px solid #ffd700; background: transparent; color: #ffd700; font-size: 14px; text-align: center; &:focus { outline: none; box-shadow: 0 0 15px #ffd700; } `; const Button = styled.button` width: 100%; padding: 12px; margin-top: 15px; border: 2px solid #ffd700; background: transparent; color: #ffd700; font-size: 14px; cursor: pointer; &:hover { background: #ffd700; color: #1a1a0f; box-shadow: 0 0 30px #ffd700; } `; const Form30 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', color: '#ffd700', marginBottom: 20, textShadow: '0 0 10px #ffd700', fontSize: 20 }}> STAR NEON </h2> <Input type="email" placeholder="Email" /> <Input type="password" placeholder="Password" /> <Button type="submit">GLOW IN</Button> </Form> </Container> ); }; export default Form30;

Form 31: Neon with Icons

Introduction: Neon form with glowing icon inputs for enhanced visual guidance.

Features: Icon integration, glowing icons, enhanced UX.

import React from 'react'; import styled, { keyframes } from 'styled-components'; import { FiMail, FiLock, FiUser } from 'react-icons/fi'; const glow = keyframes` 0% { filter: drop-shadow(0 0 2px #0ff); } 100% { filter: drop-shadow(0 0 10px #0ff); } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #0a1a1a; `; const Form = styled.form` background: #0f1f1f; padding: 50px; width: 350px; border: 3px solid #0ff; border-radius: 20px; animation: ${glow} 2s infinite alternate; `; const InputWrapper = styled.div` display: flex; align-items: center; margin: 15px 0; border: 2px solid #0ff; border-radius: 10px; padding: 5px 15px; &:focus-within { box-shadow: 0 0 20px #0ff; } `; const Icon = styled.div` color: #0ff; margin-right: 10px; font-size: 20px; filter: drop-shadow(0 0 5px #0ff); `; const Input = styled.input` flex: 1; padding: 12px 0; border: none; background: transparent; color: #0ff; font-size: 16px; &:focus { outline: none; } &::placeholder { color: rgba(0, 255, 255, 0.5); } `; const Button = styled.button` width: 100%; padding: 15px; margin-top: 20px; border: 2px solid #0ff; border-radius: 10px; background: transparent; color: #0ff; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; &:hover { background: #0ff; color: #0a1a1a; box-shadow: 0 0 30px #0ff; } `; const Form31 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', color: '#0ff', marginBottom: 30, textShadow: '0 0 10px #0ff' }}> ICON NEON </h2> <InputWrapper> <Icon><FiUser /></Icon> <Input type="text" placeholder="Username" /> </InputWrapper> <InputWrapper> <Icon><FiMail /></Icon> <Input type="email" placeholder="Email" /> </InputWrapper> <InputWrapper> <Icon><FiLock /></Icon> <Input type="password" placeholder="Password" /> </InputWrapper> <Button type="submit"> <FiLock /> GLOW IN </Button> </Form> </Container> ); }; export default Form31;

Form 32: Neon with Checkbox

Introduction: Neon form with glowing custom checkboxes for terms and options.

Features: Custom glowing checkboxes, interactive states, animated.

import React, { useState } from 'react'; import styled, { keyframes } from 'styled-components'; const glow = keyframes` 0% { box-shadow: 0 0 5px #ff66b2; } 100% { box-shadow: 0 0 15px #ff66b2; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #1a0f14; `; const Form = styled.form` background: #24141a; padding: 50px; width: 350px; border: 3px solid #ff66b2; border-radius: 15px; animation: ${glow} 2s infinite alternate; `; const CheckboxContainer = styled.label` display: flex; align-items: center; gap: 15px; margin: 15px 0; color: #ff66b2; cursor: pointer; `; const HiddenCheckbox = styled.input.attrs({ type: 'checkbox' })` position: absolute; opacity: 0; `; const StyledCheckbox = styled.div` width: 25px; height: 25px; border: 2px solid #ff66b2; border-radius: 5px; background: ${props => props.checked ? '#ff66b2' : 'transparent'}; box-shadow: ${props => props.checked ? '0 0 15px #ff66b2' : 'none'}; display: flex; align-items: center; justify-content: center; transition: all 0.3s; &::after { content: '✓'; color: #1a0f14; display: ${props => props.checked ? 'block' : 'none'}; font-weight: bold; } `; const Form32 = () => { const [terms, setTerms] = useState(false); const [newsletter, setNewsletter] = useState(false); return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', color: '#ff66b2', marginBottom: 20, textShadow: '0 0 10px #ff66b2' }}> CHECKBOX NEON </h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <CheckboxContainer> <HiddenCheckbox checked={terms} onChange={() => setTerms(!terms)} /> <StyledCheckbox checked={terms} /> <span>I accept the terms</span> </CheckboxContainer> <CheckboxContainer> <HiddenCheckbox checked={newsletter} onChange={() => setNewsletter(!newsletter)} /> <StyledCheckbox checked={newsletter} /> <span>Subscribe to newsletter</span> </CheckboxContainer> <button style={buttonStyle} disabled={!terms}>GLOW IN</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '10px 0', border: '2px solid #ff66b2', borderRadius: '8px', background: 'transparent', color: '#ff66b2', fontSize: '16px' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid #ff66b2', borderRadius: '8px', background: 'transparent', color: '#ff66b2', fontSize: '16px', cursor: 'pointer' }; export default Form32;

Form 33: Neon with Radio

Introduction: Neon form with glowing custom radio buttons for selection options.

Features: Glowing radio buttons, exclusive selection, animated.

import React, { useState } from 'react'; import styled, { keyframes } from 'styled-components'; const glow = keyframes` 0% { box-shadow: 0 0 5px #00ff88; } 100% { box-shadow: 0 0 15px #00ff88; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #0a1f0f; `; const Form = styled.form` background: #0f2a14; padding: 50px; width: 350px; border: 3px solid #00ff88; border-radius: 15px; animation: ${glow} 2s infinite alternate; `; const RadioGroup = styled.div` margin: 20px 0; `; const RadioLabel = styled.label` display: flex; align-items: center; gap: 15px; margin: 10px 0; color: #00ff88; cursor: pointer; `; const HiddenRadio = styled.input.attrs({ type: 'radio' })` position: absolute; opacity: 0; `; const StyledRadio = styled.div` width: 20px; height: 20px; border: 2px solid #00ff88; border-radius: 50%; background: ${props => props.selected ? '#00ff88' : 'transparent'}; box-shadow: ${props => props.selected ? '0 0 15px #00ff88' : 'none'}; display: flex; align-items: center; justify-content: center; &::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: #0a1f0f; display: ${props => props.selected ? 'block' : 'none'}; } `; const Form33 = () => { const [accountType, setAccountType] = useState(''); return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', color: '#00ff88', marginBottom: 20, textShadow: '0 0 10px #00ff88' }}> RADIO NEON </h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <RadioGroup> <h3 style={{ color: '#00ff88', marginBottom: 10 }}>Account Type:</h3> <RadioLabel> <HiddenRadio name="account" value="personal" onChange={() => setAccountType('personal')} /> <StyledRadio selected={accountType === 'personal'} /> <span>Personal</span> </RadioLabel> <RadioLabel> <HiddenRadio name="account" value="business" onChange={() => setAccountType('business')} /> <StyledRadio selected={accountType === 'business'} /> <span>Business</span> </RadioLabel> </RadioGroup> <button style={buttonStyle}>GLOW IN</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '10px 0', border: '2px solid #00ff88', borderRadius: '8px', background: 'transparent', color: '#00ff88', fontSize: '16px' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid #00ff88', borderRadius: '8px', background: 'transparent', color: '#00ff88', fontSize: '16px', cursor: 'pointer' }; export default Form33;

Form 34: Neon with Toggle

Introduction: Neon form with glowing toggle switches for binary settings.

Features: Custom glowing toggles, smooth animation, modern UX.

import React, { useState } from 'react'; import styled, { keyframes } from 'styled-components'; const glow = keyframes` 0% { filter: drop-shadow(0 0 2px #ffaa00); } 100% { filter: drop-shadow(0 0 10px #ffaa00); } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #1f1a0f; `; const Form = styled.form` background: #2a2414; padding: 50px; width: 350px; border: 3px solid #ffaa00; border-radius: 20px; animation: ${glow} 2s infinite alternate; `; const ToggleContainer = styled.label` display: flex; align-items: center; justify-content: space-between; margin: 20px 0; color: #ffaa00; cursor: pointer; `; const ToggleSwitch = styled.div` width: 60px; height: 30px; border: 2px solid #ffaa00; border-radius: 30px; position: relative; transition: all 0.3s; box-shadow: ${props => props.checked ? '0 0 15px #ffaa00' : 'none'}; &::after { content: ''; position: absolute; width: 24px; height: 24px; border-radius: 50%; background: #ffaa00; top: 3px; left: ${props => props.checked ? '33px' : '3px'}; transition: left 0.3s; box-shadow: 0 0 10px #ffaa00; } `; const Form34 = () => { const [notifications, setNotifications] = useState(false); const [darkMode, setDarkMode] = useState(true); return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', color: '#ffaa00', marginBottom: 20, textShadow: '0 0 10px #ffaa00' }}> TOGGLE NEON </h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <ToggleContainer> <span>Notifications</span> <ToggleSwitch checked={notifications} onClick={() => setNotifications(!notifications)} /> </ToggleContainer> <ToggleContainer> <span>Dark Mode</span> <ToggleSwitch checked={darkMode} onClick={() => setDarkMode(!darkMode)} /> </ToggleContainer> <button style={buttonStyle}>GLOW IN</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '10px 0', border: '2px solid #ffaa00', borderRadius: '10px', background: 'transparent', color: '#ffaa00', fontSize: '16px' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid #ffaa00', borderRadius: '10px', background: 'transparent', color: '#ffaa00', fontSize: '16px', cursor: 'pointer' }; export default Form34;

Form 35: Neon with Slider

Introduction: Neon form with glowing range slider for value selection.

Features: Custom glowing slider, value display, interactive.

import React, { useState } from 'react'; import styled, { keyframes } from 'styled-components'; const glow = keyframes` 0% { filter: drop-shadow(0 0 2px #ff4444); } 100% { filter: drop-shadow(0 0 10px #ff4444); } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #1f0f0f; `; const Form = styled.form` background: #2a1414; padding: 50px; width: 350px; border: 3px solid #ff4444; border-radius: 20px; animation: ${glow} 2s infinite alternate; `; const SliderContainer = styled.div` margin: 30px 0; `; const SliderLabel = styled.div` display: flex; justify-content: space-between; color: #ff4444; margin-bottom: 10px; `; const Slider = styled.input` width: 100%; height: 8px; border-radius: 4px; background: transparent; border: 2px solid #ff4444; -webkit-appearance: none; &::-webkit-slider-thumb { -webkit-appearance: none; width: 25px; height: 25px; border-radius: 50%; background: #ff4444; box-shadow: 0 0 15px #ff4444; cursor: pointer; } &:focus { outline: none; } `; const Form35 = () => { const [age, setAge] = useState(25); return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', color: '#ff4444', marginBottom: 20, textShadow: '0 0 10px #ff4444' }}> SLIDER NEON </h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <SliderContainer> <SliderLabel> <span>Age: {age}</span> <span>18+</span> </SliderLabel> <Slider type="range" min="18" max="100" value={age} onChange={(e) => setAge(e.target.value)} /> </SliderContainer> <button style={buttonStyle}>GLOW IN</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '10px 0', border: '2px solid #ff4444', borderRadius: '8px', background: 'transparent', color: '#ff4444', fontSize: '16px' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid #ff4444', borderRadius: '8px', background: 'transparent', color: '#ff4444', fontSize: '16px', cursor: 'pointer' }; export default Form35;

Form 36: Neon with Progress

Introduction: Neon form with glowing progress bar for password strength.

Features: Password strength meter, color-coded progress, real-time feedback.

import React, { useState } from 'react'; import styled, { keyframes } from 'styled-components'; const glow = keyframes` 0% { filter: drop-shadow(0 0 2px #00ffff); } 100% { filter: drop-shadow(0 0 10px #00ffff); } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #0a1f1f; `; const Form = styled.form` background: #0f2a2a; padding: 50px; width: 350px; border: 3px solid #00ffff; border-radius: 20px; animation: ${glow} 2s infinite alternate; `; const ProgressBar = styled.div` width: 100%; height: 10px; border: 2px solid #00ffff; border-radius: 5px; margin: 10px 0 20px; overflow: hidden; `; const ProgressFill = styled.div` height: 100%; width: ${props => props.strength}%; background: ${props => { if (props.strength < 30) return '#ff4444'; if (props.strength < 60) return '#ffaa00'; if (props.strength < 80) return '#ffff00'; return '#00ff00'; }}; box-shadow: 0 0 10px ${props => { if (props.strength < 30) return '#ff4444'; if (props.strength < 60) return '#ffaa00'; if (props.strength < 80) return '#ffff00'; return '#00ff00'; }}; transition: width 0.3s; `; const Form36 = () => { const [password, setPassword] = useState(''); const calculateStrength = (pwd) => { let strength = 0; if (pwd.length >= 8) strength += 25; if (pwd.match(/[a-z]/)) strength += 25; if (pwd.match(/[A-Z]/)) strength += 25; if (pwd.match(/[0-9]/)) strength += 15; if (pwd.match(/[^a-zA-Z0-9]/)) strength += 10; return strength; }; return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', color: '#00ffff', marginBottom: 20, textShadow: '0 0 10px #00ffff' }}> PROGRESS NEON </h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} value={password} onChange={(e) => setPassword(e.target.value)} /> <ProgressBar> <ProgressFill strength={calculateStrength(password)} /> </ProgressBar> <p style={{ color: '#00ffff', fontSize: 12, marginBottom: 20 }}> Strength: {calculateStrength(password)}% </p> <button style={buttonStyle}>GLOW IN</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '10px 0', border: '2px solid #00ffff', borderRadius: '8px', background: 'transparent', color: '#00ffff', fontSize: '16px' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '10px', border: '2px solid #00ffff', borderRadius: '8px', background: 'transparent', color: '#00ffff', fontSize: '16px', cursor: 'pointer' }; export default Form36;

Form 37: Neon with Avatar

Introduction: Neon form with glowing circular avatar placeholder.

Features: Avatar circle, upload simulation, profile setup.

import React from 'react'; import styled, { keyframes } from 'styled-components'; import { FiUser } from 'react-icons/fi'; const glow = keyframes` 0% { filter: drop-shadow(0 0 2px #ff8800); } 100% { filter: drop-shadow(0 0 15px #ff8800); } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #1f1a0f; `; const Form = styled.form` background: #2a2414; padding: 50px; width: 350px; border: 3px solid #ff8800; border-radius: 30px; animation: ${glow} 2s infinite alternate; `; const Avatar = styled.div` width: 100px; height: 100px; border-radius: 50%; border: 3px solid #ff8800; margin: 0 auto 30px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 20px #ff8800; svg { color: #ff8800; font-size: 50px; filter: drop-shadow(0 0 10px #ff8800); } `; const Form37 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <Avatar> <FiUser /> </Avatar> <h2 style={{ textAlign: 'center', color: '#ff8800', marginBottom: 20, textShadow: '0 0 10px #ff8800' }}> AVATAR NEON </h2> <input type="text" placeholder="Full Name" style={inputStyle} /> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>CREATE ACCOUNT</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '10px 0', border: '2px solid #ff8800', borderRadius: '10px', background: 'transparent', color: '#ff8800', fontSize: '16px' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid #ff8800', borderRadius: '10px', background: 'transparent', color: '#ff8800', fontSize: '16px', cursor: 'pointer' }; export default Form37;

Form 38: Neon with Social

Introduction: Neon form with glowing social media login buttons.

Features: Social icons, hover effects, multiple auth options.

import React from 'react'; import styled, { keyframes } from 'styled-components'; import { FaGoogle, FaFacebook, FaTwitter, FaGithub } from 'react-icons/fa'; const glow = keyframes` 0% { filter: drop-shadow(0 0 2px #ff44aa); } 100% { filter: drop-shadow(0 0 15px #ff44aa); } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #1f0f1a; `; const Form = styled.form` background: #2a1424; padding: 50px; width: 350px; border: 3px solid #ff44aa; border-radius: 30px; animation: ${glow} 2s infinite alternate; `; const SocialContainer = styled.div` display: flex; justify-content: center; gap: 20px; margin: 30px 0; `; const SocialButton = styled.button` width: 60px; height: 60px; border: 2px solid #ff44aa; border-radius: 50%; background: transparent; color: #ff44aa; font-size: 24px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s; &:hover { background: #ff44aa; color: #1f0f1a; box-shadow: 0 0 30px #ff44aa; transform: translateY(-5px); } `; const Divider = styled.div` text-align: center; margin: 20px 0; color: #ff44aa; position: relative; &::before, &::after { content: ''; position: absolute; top: 50%; width: 40%; height: 1px; background: #ff44aa; box-shadow: 0 0 5px #ff44aa; } &::before { left: 0; } &::after { right: 0; } `; const Form38 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', color: '#ff44aa', marginBottom: 20, textShadow: '0 0 10px #ff44aa' }}> SOCIAL NEON </h2> <SocialContainer> <SocialButton><FaGoogle /></SocialButton> <SocialButton><FaFacebook /></SocialButton> <SocialButton><FaTwitter /></SocialButton> <SocialButton><FaGithub /></SocialButton> </SocialContainer> <Divider>or</Divider> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>SIGN IN</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '10px 0', border: '2px solid #ff44aa', borderRadius: '10px', background: 'transparent', color: '#ff44aa', fontSize: '16px' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid #ff44aa', borderRadius: '10px', background: 'transparent', color: '#ff44aa', fontSize: '16px', cursor: 'pointer' }; export default Form38;

Form 39: Neon with OTP

Introduction: Neon form with glowing OTP input boxes for verification codes.

Features: OTP inputs, auto-focus, verification code entry.

import React, { useState, useRef } from 'react'; import styled, { keyframes } from 'styled-components'; const glow = keyframes` 0% { filter: drop-shadow(0 0 2px #00ccff); } 100% { filter: drop-shadow(0 0 15px #00ccff); } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #0f1a1f; `; const Form = styled.div` background: #14242a; padding: 50px; width: 400px; border: 3px solid #00ccff; border-radius: 30px; animation: ${glow} 2s infinite alternate; text-align: center; `; const OtpContainer = styled.div` display: flex; justify-content: center; gap: 15px; margin: 40px 0; `; const OtpInput = styled.input` width: 60px; height: 60px; text-align: center; font-size: 24px; border: 2px solid #00ccff; border-radius: 15px; background: transparent; color: #00ccff; box-shadow: 0 0 10px #00ccff; &:focus { outline: none; box-shadow: 0 0 20px #00ccff; } `; const Form39 = () => { const [otp, setOtp] = useState(['', '', '', '', '', '']); const inputRefs = useRef([]); const handleChange = (index, value) => { if (value.length <= 1) { const newOtp = [...otp]; newOtp[index] = value; setOtp(newOtp); if (value && index < 5) { inputRefs.current[index + 1].focus(); } } }; return ( <Container> <Form> <h2 style={{ textAlign: 'center', color: '#00ccff', marginBottom: 10, textShadow: '0 0 10px #00ccff' }}> OTP NEON </h2> <p style={{ color: '#00ccff', marginBottom: 20 }}>Enter verification code</p> <OtpContainer> {otp.map((digit, index) => ( <OtpInput key={index} type="text" maxLength="1" value={digit} ref={(el) => inputRefs.current[index] = el} onChange={(e) => handleChange(index, e.target.value)} /> ))} </OtpContainer> <button style={buttonStyle}>VERIFY</button> </Form> </Container> ); }; const buttonStyle = { width: '100%', padding: '15px', border: '2px solid #00ccff', borderRadius: '10px', background: 'transparent', color: '#00ccff', fontSize: '16px', cursor: 'pointer', boxShadow: '0 0 10px #00ccff' }; export default Form39;

Form 40: Neon with CAPTCHA

Introduction: Neon form with glowing math CAPTCHA for security.

Features: Math problem, refresh option, validation.

import React, { useState, useEffect } from 'react'; import styled, { keyframes } from 'styled-components'; import { FiRefreshCw } from 'react-icons/fi'; const glow = keyframes` 0% { filter: drop-shadow(0 0 2px #ffaa44); } 100% { filter: drop-shadow(0 0 15px #ffaa44); } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #1f1a0f; `; const Form = styled.form` background: #2a2414; padding: 50px; width: 350px; border: 3px solid #ffaa44; border-radius: 30px; animation: ${glow} 2s infinite alternate; `; const CaptchaBox = styled.div` display: flex; align-items: center; justify-content: space-between; padding: 15px; margin: 15px 0; border: 2px solid #ffaa44; border-radius: 10px; color: #ffaa44; font-size: 20px; font-weight: bold; `; const RefreshButton = styled.button` background: none; border: none; color: #ffaa44; cursor: pointer; font-size: 20px; &:hover { transform: rotate(180deg); transition: transform 0.5s; } `; const Form40 = () => { const [num1, setNum1] = useState(0); const [num2, setNum2] = useState(0); const [answer, setAnswer] = useState(''); const generateCaptcha = () => { setNum1(Math.floor(Math.random() * 10)); setNum2(Math.floor(Math.random() * 10)); setAnswer(''); }; useEffect(() => { generateCaptcha(); }, []); return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', color: '#ffaa44', marginBottom: 20, textShadow: '0 0 10px #ffaa44' }}> CAPTCHA NEON </h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <CaptchaBox> <span>{num1} + {num2} = ?</span> <RefreshButton type="button" onClick={generateCaptcha}> <FiRefreshCw /> </RefreshButton> </CaptchaBox> <input type="number" placeholder="Enter answer" style={inputStyle} value={answer} onChange={(e) => setAnswer(e.target.value)} /> <button style={buttonStyle}>VERIFY & LOGIN</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '10px 0', border: '2px solid #ffaa44', borderRadius: '10px', background: 'transparent', color: '#ffaa44', fontSize: '16px' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid #ffaa44', borderRadius: '10px', background: 'transparent', color: '#ffaa44', fontSize: '16px', cursor: 'pointer' }; export default Form40;

Form 41: Neon Cyan

Introduction: Pure cyan neon form with cool blue-green glow.

Features: Cyan color scheme, refreshing look, tech vibe.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const glow = keyframes` 0% { box-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff; } 50% { box-shadow: 0 0 20px #00ffff, 0 0 40px #00ffff; } 100% { box-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #0a1f1f; `; const Form = styled.form` background: #0f2a2a; padding: 50px; width: 350px; border: 3px solid #00ffff; border-radius: 20px; animation: ${glow} 3s infinite; `; const Form41 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', color: '#00ffff', marginBottom: 30, textShadow: '0 0 10px #00ffff' }}> CYAN NEON </h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>GLOW IN</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '2px solid #00ffff', borderRadius: '10px', background: 'transparent', color: '#00ffff', fontSize: '16px' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid #00ffff', borderRadius: '10px', background: 'transparent', color: '#00ffff', fontSize: '16px', cursor: 'pointer' }; export default Form41;

Form 42: Neon Magenta

Introduction: Vibrant magenta neon form with bold pink-purple glow.

Features: Magenta color, eye-catching, energetic.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const glow = keyframes` 0% { box-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff; } 50% { box-shadow: 0 0 20px #ff00ff, 0 0 40px #ff00ff; } 100% { box-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #1f0f1f; `; const Form = styled.form` background: #2a142a; padding: 50px; width: 350px; border: 3px solid #ff00ff; border-radius: 20px; animation: ${glow} 3s infinite; `; const Form42 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', color: '#ff00ff', marginBottom: 30, textShadow: '0 0 10px #ff00ff' }}> MAGENTA NEON </h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>GLOW IN</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '2px solid #ff00ff', borderRadius: '10px', background: 'transparent', color: '#ff00ff', fontSize: '16px' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid #ff00ff', borderRadius: '10px', background: 'transparent', color: '#ff00ff', fontSize: '16px', cursor: 'pointer' }; export default Form42;

Form 43: Neon Lime

Introduction: Bright lime green neon form with electric green glow.

Features: Lime color, fresh and energetic, nature-inspired.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const glow = keyframes` 0% { box-shadow: 0 0 5px #bfff00, 0 0 10px #bfff00; } 50% { box-shadow: 0 0 20px #bfff00, 0 0 40px #bfff00; } 100% { box-shadow: 0 0 5px #bfff00, 0 0 10px #bfff00; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #1a2a0a; `; const Form = styled.form` background: #1f2f0f; padding: 50px; width: 350px; border: 3px solid #bfff00; border-radius: 20px; animation: ${glow} 3s infinite; `; const Form43 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', color: '#bfff00', marginBottom: 30, textShadow: '0 0 10px #bfff00' }}> LIME NEON </h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>GLOW IN</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '2px solid #bfff00', borderRadius: '10px', background: 'transparent', color: '#bfff00', fontSize: '16px' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid #bfff00', borderRadius: '10px', background: 'transparent', color: '#bfff00', fontSize: '16px', cursor: 'pointer' }; export default Form43;

Form 44: Neon Amber

Introduction: Warm amber neon form with golden-yellow glow.

Features: Amber color, warm and inviting, sunset vibe.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const glow = keyframes` 0% { box-shadow: 0 0 5px #ffbf00, 0 0 10px #ffbf00; } 50% { box-shadow: 0 0 20px #ffbf00, 0 0 40px #ffbf00; } 100% { box-shadow: 0 0 5px #ffbf00, 0 0 10px #ffbf00; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #1f1f0a; `; const Form = styled.form` background: #2a2a0f; padding: 50px; width: 350px; border: 3px solid #ffbf00; border-radius: 20px; animation: ${glow} 3s infinite; `; const Form44 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', color: '#ffbf00', marginBottom: 30, textShadow: '0 0 10px #ffbf00' }}> AMBER NEON </h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>GLOW IN</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '2px solid #ffbf00', borderRadius: '10px', background: 'transparent', color: '#ffbf00', fontSize: '16px' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid #ffbf00', borderRadius: '10px', background: 'transparent', color: '#ffbf00', fontSize: '16px', cursor: 'pointer' }; export default Form44;

Form 45: Neon Teal

Introduction: Deep teal neon form with blue-green ocean glow.

Features: Teal color, calming, aquatic theme.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const glow = keyframes` 0% { box-shadow: 0 0 5px #008080, 0 0 10px #008080; } 50% { box-shadow: 0 0 20px #008080, 0 0 40px #008080; } 100% { box-shadow: 0 0 5px #008080, 0 0 10px #008080; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #0a1f1a; `; const Form = styled.form` background: #0f2a24; padding: 50px; width: 350px; border: 3px solid #008080; border-radius: 20px; animation: ${glow} 3s infinite; `; const Form45 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', color: '#008080', marginBottom: 30, textShadow: '0 0 10px #008080' }}> TEAL NEON </h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>GLOW IN</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '2px solid #008080', borderRadius: '10px', background: 'transparent', color: '#008080', fontSize: '16px' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid #008080', borderRadius: '10px', background: 'transparent', color: '#008080', fontSize: '16px', cursor: 'pointer' }; export default Form45;

Form 46: Neon Indigo

Introduction: Deep indigo neon form with purple-blue night glow.

Features: Indigo color, mysterious, nighttime vibe.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const glow = keyframes` 0% { box-shadow: 0 0 5px #4b0082, 0 0 10px #4b0082; } 50% { box-shadow: 0 0 20px #4b0082, 0 0 40px #4b0082; } 100% { box-shadow: 0 0 5px #4b0082, 0 0 10px #4b0082; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #0f0a1f; `; const Form = styled.form` background: #14102a; padding: 50px; width: 350px; border: 3px solid #4b0082; border-radius: 20px; animation: ${glow} 3s infinite; `; const Form46 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', color: '#4b0082', marginBottom: 30, textShadow: '0 0 10px #4b0082' }}> INDIGO NEON </h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>GLOW IN</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '2px solid #4b0082', borderRadius: '10px', background: 'transparent', color: '#4b0082', fontSize: '16px' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid #4b0082', borderRadius: '10px', background: 'transparent', color: '#4b0082', fontSize: '16px', cursor: 'pointer' }; export default Form46;

Form 47: Neon Violet

Introduction: Royal violet neon form with rich purple glow.

Features: Violet color, regal, creative vibe.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const glow = keyframes` 0% { box-shadow: 0 0 5px #8a2be2, 0 0 10px #8a2be2; } 50% { box-shadow: 0 0 20px #8a2be2, 0 0 40px #8a2be2; } 100% { box-shadow: 0 0 5px #8a2be2, 0 0 10px #8a2be2; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #1a0f2a; `; const Form = styled.form` background: #1f1435; padding: 50px; width: 350px; border: 3px solid #8a2be2; border-radius: 20px; animation: ${glow} 3s infinite; `; const Form47 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', color: '#8a2be2', marginBottom: 30, textShadow: '0 0 10px #8a2be2' }}> VIOLET NEON </h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>GLOW IN</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '2px solid #8a2be2', borderRadius: '10px', background: 'transparent', color: '#8a2be2', fontSize: '16px' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid #8a2be2', borderRadius: '10px', background: 'transparent', color: '#8a2be2', fontSize: '16px', cursor: 'pointer' }; export default Form47;

Form 48: Neon Rose

Introduction: Soft rose pink neon form with romantic glow.

Features: Rose color, feminine, delicate vibe.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const glow = keyframes` 0% { box-shadow: 0 0 5px #ff66b2, 0 0 10px #ff66b2; } 50% { box-shadow: 0 0 20px #ff66b2, 0 0 40px #ff66b2; } 100% { box-shadow: 0 0 5px #ff66b2, 0 0 10px #ff66b2; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #2a1a1f; `; const Form = styled.form` background: #351f2a; padding: 50px; width: 350px; border: 3px solid #ff66b2; border-radius: 20px; animation: ${glow} 3s infinite; `; const Form48 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', color: '#ff66b2', marginBottom: 30, textShadow: '0 0 10px #ff66b2' }}> ROSE NEON </h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>GLOW IN</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '2px solid #ff66b2', borderRadius: '10px', background: 'transparent', color: '#ff66b2', fontSize: '16px' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid #ff66b2', borderRadius: '10px', background: 'transparent', color: '#ff66b2', fontSize: '16px', cursor: 'pointer' }; export default Form48;

Form 49: Neon Coral

Introduction: Warm coral orange neon form with tropical glow.

Features: Coral color, energetic, summery vibe.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const glow = keyframes` 0% { box-shadow: 0 0 5px #ff7f50, 0 0 10px #ff7f50; } 50% { box-shadow: 0 0 20px #ff7f50, 0 0 40px #ff7f50; } 100% { box-shadow: 0 0 5px #ff7f50, 0 0 10px #ff7f50; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #2a1f1a; `; const Form = styled.form` background: #352a1f; padding: 50px; width: 350px; border: 3px solid #ff7f50; border-radius: 20px; animation: ${glow} 3s infinite; `; const Form49 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', color: '#ff7f50', marginBottom: 30, textShadow: '0 0 10px #ff7f50' }}> CORAL NEON </h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>GLOW IN</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '2px solid #ff7f50', borderRadius: '10px', background: 'transparent', color: '#ff7f50', fontSize: '16px' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid #ff7f50', borderRadius: '10px', background: 'transparent', color: '#ff7f50', fontSize: '16px', cursor: 'pointer' }; export default Form49;

Form 50: Neon Mint

Introduction: Cool mint green neon form with fresh, clean glow.

Features: Mint color, refreshing, modern vibe.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const glow = keyframes` 0% { box-shadow: 0 0 5px #98ff98, 0 0 10px #98ff98; } 50% { box-shadow: 0 0 20px #98ff98, 0 0 40px #98ff98; } 100% { box-shadow: 0 0 5px #98ff98, 0 0 10px #98ff98; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #1a2a1f; `; const Form = styled.form` background: #1f352a; padding: 50px; width: 350px; border: 3px solid #98ff98; border-radius: 20px; animation: ${glow} 3s infinite; `; const Form50 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', color: '#98ff98', marginBottom: 30, textShadow: '0 0 10px #98ff98' }}> MINT NEON </h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>GLOW IN</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '2px solid #98ff98', borderRadius: '10px', background: 'transparent', color: '#98ff98', fontSize: '16px' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid #98ff98', borderRadius: '10px', background: 'transparent', color: '#98ff98', fontSize: '16px', cursor: 'pointer' }; export default Form50;

Form 51: Neon Gradient

Introduction: Multi-color gradient neon form with smooth color transitions.

Features: Gradient effect, color flow, dynamic appearance.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const gradientGlow = keyframes` 0% { filter: drop-shadow(0 0 5px #ff0000); } 25% { filter: drop-shadow(0 0 10px #00ff00); } 50% { filter: drop-shadow(0 0 15px #0000ff); } 75% { filter: drop-shadow(0 0 10px #ffff00); } 100% { filter: drop-shadow(0 0 5px #ff0000); } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #0a0a0a; `; const Form = styled.form` background: #111; padding: 50px; width: 350px; border: 4px solid transparent; border-image: linear-gradient(45deg, #ff0000, #00ff00, #0000ff, #ffff00) 1; border-radius: 20px; animation: ${gradientGlow} 4s infinite; `; const Input = styled.input` width: 100%; padding: 15px; margin: 15px 0; border: 2px solid transparent; border-image: linear-gradient(45deg, #ff0000, #00ff00, #0000ff, #ffff00) 1; background: transparent; color: white; font-size: 16px; &:focus { outline: none; } `; const Button = styled.button` width: 100%; padding: 15px; margin-top: 20px; border: 2px solid transparent; border-image: linear-gradient(45deg, #ff0000, #00ff00, #0000ff, #ffff00) 1; background: transparent; color: white; font-size: 16px; cursor: pointer; &:hover { background: linear-gradient(45deg, #ff0000, #00ff00, #0000ff, #ffff00); color: black; } `; const Form51 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', marginBottom: 30, background: 'linear-gradient(45deg, #ff0000, #00ff00, #0000ff, #ffff00)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}> GRADIENT NEON </h2> <Input type="email" placeholder="Email" /> <Input type="password" placeholder="Password" /> <Button type="submit">GLOW IN</Button> </Form> </Container> ); }; export default Form51;

Form 52: Neon Rainbow

Introduction: Rainbow cycling neon form with all colors of the spectrum.

Features: Rainbow effect, color cycling, vibrant display.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const rainbowGlow = keyframes` 0% { box-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000; border-color: #ff0000; } 14% { box-shadow: 0 0 10px #ff8800, 0 0 20px #ff8800; border-color: #ff8800; } 28% { box-shadow: 0 0 10px #ffff00, 0 0 20px #ffff00; border-color: #ffff00; } 42% { box-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00; border-color: #00ff00; } 57% { box-shadow: 0 0 10px #0000ff, 0 0 20px #0000ff; border-color: #0000ff; } 71% { box-shadow: 0 0 10px #4b0082, 0 0 20px #4b0082; border-color: #4b0082; } 85% { box-shadow: 0 0 10px #8f00ff, 0 0 20px #8f00ff; border-color: #8f00ff; } 100% { box-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000; border-color: #ff0000; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #0a0a0a; `; const Form = styled.form` background: #111; padding: 50px; width: 350px; border: 4px solid; border-radius: 20px; animation: ${rainbowGlow} 8s infinite; `; const Form52 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', color: 'white', marginBottom: 30, textShadow: '0 0 10px currentColor' }}> RAINBOW NEON </h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>GLOW IN</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '2px solid white', borderRadius: '10px', background: 'transparent', color: 'white', fontSize: '16px' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid white', borderRadius: '10px', background: 'transparent', color: 'white', fontSize: '16px', cursor: 'pointer' }; export default Form52;

Form 53: Neon Sunset

Introduction: Sunset-inspired neon form with orange, pink, and purple gradients.

Features: Sunset colors, warm gradient, peaceful vibe.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const sunsetGlow = keyframes` 0% { box-shadow: 0 0 10px #ff9933, 0 0 20px #ff9933; } 50% { box-shadow: 0 0 20px #ff3366, 0 0 40px #ff3366, 0 0 60px #9933ff; } 100% { box-shadow: 0 0 10px #ff9933, 0 0 20px #ff9933; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #1a0f1a; `; const Form = styled.form` background: #241a24; padding: 50px; width: 350px; border: 4px solid transparent; border-image: linear-gradient(45deg, #ff9933, #ff3366, #9933ff) 1; border-radius: 20px; animation: ${sunsetGlow} 4s infinite; `; const Form53 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', marginBottom: 30, background: 'linear-gradient(45deg, #ff9933, #ff3366, #9933ff)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}> SUNSET NEON </h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>GLOW IN</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '2px solid #ff9933', borderRadius: '10px', background: 'transparent', color: '#ff9933', fontSize: '16px' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid #ff3366', borderRadius: '10px', background: 'transparent', color: '#ff3366', fontSize: '16px', cursor: 'pointer' }; export default Form53;

Form 54: Neon Ocean

Introduction: Ocean-themed neon form with blue and teal waves.

Features: Ocean colors, aquatic theme, calming effect.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const oceanGlow = keyframes` 0% { box-shadow: 0 0 10px #0066cc, 0 0 20px #0066cc; } 50% { box-shadow: 0 0 20px #00cc99, 0 0 40px #00cc99, 0 0 60px #0066cc; } 100% { box-shadow: 0 0 10px #0066cc, 0 0 20px #0066cc; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #0a1a2a; `; const Form = styled.form` background: #0f1f35; padding: 50px; width: 350px; border: 4px solid transparent; border-image: linear-gradient(135deg, #0066cc, #00cc99) 1; border-radius: 20px; animation: ${oceanGlow} 4s infinite; `; const Form54 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', marginBottom: 30, background: 'linear-gradient(135deg, #0066cc, #00cc99)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}> OCEAN NEON </h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>GLOW IN</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '2px solid #0066cc', borderRadius: '10px', background: 'transparent', color: '#0066cc', fontSize: '16px' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid #00cc99', borderRadius: '10px', background: 'transparent', color: '#00cc99', fontSize: '16px', cursor: 'pointer' }; export default Form54;

Form 55: Neon Forest

Introduction: Forest-themed neon form with green and earthy tones.

Features: Forest colors, natural theme, organic feel.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const forestGlow = keyframes` 0% { box-shadow: 0 0 10px #228b22, 0 0 20px #228b22; } 50% { box-shadow: 0 0 20px #32cd32, 0 0 40px #32cd32, 0 0 60px #228b22; } 100% { box-shadow: 0 0 10px #228b22, 0 0 20px #228b22; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #1a2a1a; `; const Form = styled.form` background: #1f351f; padding: 50px; width: 350px; border: 4px solid #228b22; border-radius: 20px; animation: ${forestGlow} 4s infinite; `; const Form55 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', color: '#32cd32', marginBottom: 30, textShadow: '0 0 10px #32cd32' }}> FOREST NEON </h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>GLOW IN</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '2px solid #228b22', borderRadius: '10px', background: 'transparent', color: '#228b22', fontSize: '16px' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid #32cd32', borderRadius: '10px', background: 'transparent', color: '#32cd32', fontSize: '16px', cursor: 'pointer' }; export default Form55;

Form 56: Neon Fire

Introduction: Fire-themed neon form with red, orange, and yellow flames.

Features: Fire colors, intense glow, energetic vibe.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const fireGlow = keyframes` 0% { box-shadow: 0 0 10px #ff3300, 0 0 20px #ff3300; } 50% { box-shadow: 0 0 20px #ff6600, 0 0 40px #ff6600, 0 0 60px #ff9900; } 100% { box-shadow: 0 0 10px #ff3300, 0 0 20px #ff3300; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #2a1a0f; `; const Form = styled.form` background: #352014; padding: 50px; width: 350px; border: 4px solid #ff3300; border-radius: 20px; animation: ${fireGlow} 3s infinite; `; const Form56 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', color: '#ff6600', marginBottom: 30, textShadow: '0 0 10px #ff6600' }}> FIRE NEON </h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>GLOW IN</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '2px solid #ff3300', borderRadius: '10px', background: 'transparent', color: '#ff3300', fontSize: '16px' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid #ff6600', borderRadius: '10px', background: 'transparent', color: '#ff6600', fontSize: '16px', cursor: 'pointer' }; export default Form56;

Form 57: Neon Ice

Introduction: Ice-themed neon form with cool blue and white frost effect.

Features: Ice colors, cold theme, refreshing look.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const iceGlow = keyframes` 0% { box-shadow: 0 0 10px #00ccff, 0 0 20px #00ccff; } 50% { box-shadow: 0 0 20px #66ffff, 0 0 40px #66ffff, 0 0 60px #ffffff; } 100% { box-shadow: 0 0 10px #00ccff, 0 0 20px #00ccff; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #1a2a2a; `; const Form = styled.form` background: #1f3535; padding: 50px; width: 350px; border: 4px solid #00ccff; border-radius: 20px; animation: ${iceGlow} 4s infinite; `; const Form57 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', color: '#66ffff', marginBottom: 30, textShadow: '0 0 10px #66ffff' }}> ICE NEON </h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>GLOW IN</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '2px solid #00ccff', borderRadius: '10px', background: 'transparent', color: '#00ccff', fontSize: '16px' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid #66ffff', borderRadius: '10px', background: 'transparent', color: '#66ffff', fontSize: '16px', cursor: 'pointer' }; export default Form57;

Form 58: Neon Galaxy

Introduction: Galaxy-themed neon form with purple, blue, and pink cosmic colors.

Features: Space colors, cosmic vibe, deep space feel.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const galaxyGlow = keyframes` 0% { box-shadow: 0 0 10px #9933ff, 0 0 20px #9933ff; } 50% { box-shadow: 0 0 20px #3366ff, 0 0 40px #3366ff, 0 0 60px #ff33cc; } 100% { box-shadow: 0 0 10px #9933ff, 0 0 20px #9933ff; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #0f0f2a; `; const Form = styled.form` background: #141435; padding: 50px; width: 350px; border: 4px solid #9933ff; border-radius: 20px; animation: ${galaxyGlow} 5s infinite; `; const Form58 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', color: '#ff33cc', marginBottom: 30, textShadow: '0 0 10px #ff33cc' }}> GALAXY NEON </h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>GLOW IN</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '2px solid #9933ff', borderRadius: '10px', background: 'transparent', color: '#9933ff', fontSize: '16px' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid #ff33cc', borderRadius: '10px', background: 'transparent', color: '#ff33cc', fontSize: '16px', cursor: 'pointer' }; export default Form58;

Form 59: Neon Cyberpunk

Introduction: Cyberpunk-themed neon form with bright magenta, cyan, and yellow.

Features: Cyberpunk colors, futuristic, edgy design.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const cyberGlow = keyframes` 0% { box-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff; } 25% { box-shadow: 0 0 15px #00ffff, 0 0 30px #00ffff; } 50% { box-shadow: 0 0 20px #ffff00, 0 0 40px #ffff00; } 75% { box-shadow: 0 0 15px #ff00ff, 0 0 30px #ff00ff; } 100% { box-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #0a0f1a; `; const Form = styled.form` background: #0f1424; padding: 50px; width: 350px; border: 4px solid #ff00ff; border-radius: 0; clip-path: polygon(0% 0%, 100% 0%, 95% 100%, 5% 100%); animation: ${cyberGlow} 3s infinite; `; const Form59 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', color: '#00ffff', marginBottom: 30, textShadow: '0 0 10px #00ffff' }}> CYBERPUNK </h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>GLOW IN</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '2px solid #ffff00', borderRadius: '0', background: 'transparent', color: '#ffff00', fontSize: '16px' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid #ff00ff', borderRadius: '0', background: 'transparent', color: '#ff00ff', fontSize: '16px', cursor: 'pointer' }; export default Form59;

Form 60: Neon Vaporwave

Introduction: Vaporwave aesthetic neon form with pastel purples, pinks, and cyans.

Features: 80s/90s retro aesthetic, pastel colors, nostalgic.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const vaporGlow = keyframes` 0% { box-shadow: 0 0 10px #ff77ff, 0 0 20px #ff77ff; } 50% { box-shadow: 0 0 20px #77ff77, 0 0 40px #77ff77, 0 0 60px #7777ff; } 100% { box-shadow: 0 0 10px #ff77ff, 0 0 20px #ff77ff; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #1a0f2a; `; const Form = styled.form` background: #2a1a35; padding: 50px; width: 350px; border: 4px solid #ff77ff; border-radius: 30px; box-shadow: 0 0 20px #ff77ff, 0 0 40px #77ff77, 0 0 60px #7777ff; `; const Form60 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', color: '#77ff77', marginBottom: 30, textShadow: '2px 2px 0 #ff77ff' }}> VAPORWAVE </h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>GLOW IN</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '2px solid #7777ff', borderRadius: '15px', background: 'transparent', color: '#7777ff', fontSize: '16px' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid #ff77ff', borderRadius: '15px', background: 'transparent', color: '#ff77ff', fontSize: '16px', cursor: 'pointer' }; export default Form60;

Form 61: Neon Thin Border

Features: Thin 1px neon border for minimalistic look.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const glow = keyframes` 0% { box-shadow: 0 0 2px #0ff, 0 0 4px #0ff; } 100% { box-shadow: 0 0 4px #0ff, 0 0 8px #0ff; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #0a0a0a; `; const Form = styled.form` background: #111; padding: 50px; width: 350px; border: 1px solid #0ff; border-radius: 10px; animation: ${glow} 2s infinite alternate; `; const Form61 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ color: '#0ff', textAlign: 'center' }}>THIN NEON</h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>SIGN IN</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '12px', margin: '10px 0', border: '1px solid #0ff', background: 'transparent', color: '#0ff' }; const buttonStyle = { width: '100%', padding: '12px', marginTop: '20px', border: '1px solid #0ff', background: 'transparent', color: '#0ff', cursor: 'pointer' }; export default Form61;

Form 62: Neon Thick Border

Features: Thick 8px neon border for bold statement.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const glow = keyframes` 0% { box-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff; } 100% { box-shadow: 0 0 30px #ff00ff, 0 0 60px #ff00ff; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #1a0a1a; `; const Form = styled.form` background: #2a0f2a; padding: 50px; width: 350px; border: 8px solid #ff00ff; border-radius: 20px; animation: ${glow} 3s infinite; `; const Form62 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ color: '#ff00ff', textAlign: 'center' }}>THICK NEON</h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>SIGN IN</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '4px solid #ff00ff', background: 'transparent', color: '#ff00ff' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '4px solid #ff00ff', background: 'transparent', color: '#ff00ff', cursor: 'pointer' }; export default Form62;

Form 63: Neon Double Border

Features: Two concentric neon borders for layered effect.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const glow = keyframes` 0% { filter: drop-shadow(0 0 5px #00ff00); } 100% { filter: drop-shadow(0 0 15px #00ff00); } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #0a1a0a; `; const Form = styled.form` background: #0f2a0f; padding: 50px; width: 350px; border: 4px double #00ff00; border-radius: 20px; animation: ${glow} 2s infinite alternate; `; const Form63 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ color: '#00ff00', textAlign: 'center' }}>DOUBLE NEON</h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>SIGN IN</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '2px double #00ff00', background: 'transparent', color: '#00ff00' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px double #00ff00', background: 'transparent', color: '#00ff00', cursor: 'pointer' }; export default Form63;

Form 64: Neon Dashed Border

Features: Dashed neon border for playful, dynamic look.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const glow = keyframes` 0% { filter: drop-shadow(0 0 5px #ffaa00); } 100% { filter: drop-shadow(0 0 15px #ffaa00); } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #1f1a0f; `; const Form = styled.form` background: #2a2414; padding: 50px; width: 350px; border: 4px dashed #ffaa00; border-radius: 20px; animation: ${glow} 2s infinite alternate; `; const Form64 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ color: '#ffaa00', textAlign: 'center' }}>DASHED NEON</h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>SIGN IN</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '2px dashed #ffaa00', background: 'transparent', color: '#ffaa00' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px dashed #ffaa00', background: 'transparent', color: '#ffaa00', cursor: 'pointer' }; export default Form64;

Form 65: Neon Dotted Border

Features: Dotted neon border for whimsical, playful effect.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const glow = keyframes` 0% { filter: drop-shadow(0 0 5px #ff66b2); } 100% { filter: drop-shadow(0 0 15px #ff66b2); } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #2a1a1f; `; const Form = styled.form` background: #351f2a; padding: 50px; width: 350px; border: 4px dotted #ff66b2; border-radius: 20px; animation: ${glow} 2s infinite alternate; `; const Form65 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ color: '#ff66b2', textAlign: 'center' }}>DOTTED NEON</h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>SIGN IN</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '2px dotted #ff66b2', background: 'transparent', color: '#ff66b2' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px dotted #ff66b2', background: 'transparent', color: '#ff66b2', cursor: 'pointer' }; export default Form65;

Form 66: Neon Groove Border

Features: Groove-style neon border for 3D inset effect.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const glow = keyframes` 0% { filter: drop-shadow(0 0 5px #9933ff); } 100% { filter: drop-shadow(0 0 15px #9933ff); } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #1a0f2a; `; const Form = styled.form` background: #241a35; padding: 50px; width: 350px; border: 6px groove #9933ff; border-radius: 20px; animation: ${glow} 2s infinite alternate; `; const Form66 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ color: '#9933ff', textAlign: 'center' }}>GROOVE NEON</h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>SIGN IN</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '2px groove #9933ff', background: 'transparent', color: '#9933ff' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px groove #9933ff', background: 'transparent', color: '#9933ff', cursor: 'pointer' }; export default Form66;

Form 67: Neon Ridge Border

Features: Ridge-style neon border for raised 3D effect.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const glow = keyframes` 0% { filter: drop-shadow(0 0 5px #00cc99); } 100% { filter: drop-shadow(0 0 15px #00cc99); } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #0f1f1a; `; const Form = styled.form` background: #142a24; padding: 50px; width: 350px; border: 6px ridge #00cc99; border-radius: 20px; animation: ${glow} 2s infinite alternate; `; const Form67 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ color: '#00cc99', textAlign: 'center' }}>RIDGE NEON</h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>SIGN IN</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '2px ridge #00cc99', background: 'transparent', color: '#00cc99' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px ridge #00cc99', background: 'transparent', color: '#00cc99', cursor: 'pointer' }; export default Form67;

Form 68: Neon Inset Border

Features: Inset neon border for pressed-in appearance.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const glow = keyframes` 0% { box-shadow: inset 0 0 5px #ff9933, inset 0 0 10px #ff9933; } 100% { box-shadow: inset 0 0 15px #ff9933, inset 0 0 30px #ff9933; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #2a1f0f; `; const Form = styled.form` background: #352a14; padding: 50px; width: 350px; border: 4px inset #ff9933; border-radius: 20px; animation: ${glow} 2s infinite alternate; `; const Form68 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ color: '#ff9933', textAlign: 'center' }}>INSET NEON</h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>SIGN IN</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '2px inset #ff9933', background: 'transparent', color: '#ff9933' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px inset #ff9933', background: 'transparent', color: '#ff9933', cursor: 'pointer' }; export default Form68;

Form 69: Neon Outset Border

Features: Outset neon border for raised appearance.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const glow = keyframes` 0% { box-shadow: 0 0 5px #ff3366; } 100% { box-shadow: 0 0 15px #ff3366; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #2a0f1a; `; const Form = styled.form` background: #351a24; padding: 50px; width: 350px; border: 4px outset #ff3366; border-radius: 20px; animation: ${glow} 2s infinite alternate; `; const Form69 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ color: '#ff3366', textAlign: 'center' }}>OUTSET NEON</h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>SIGN IN</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '2px outset #ff3366', background: 'transparent', color: '#ff3366' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px outset #ff3366', background: 'transparent', color: '#ff3366', cursor: 'pointer' }; export default Form69;

Form 70: Neon 3D Border

Features: 3D beveled neon border with depth effect.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const glow = keyframes` 0% { filter: drop-shadow(0 0 5px #00ffff); } 100% { filter: drop-shadow(0 0 20px #00ffff); } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #0a1f2a; `; const Form = styled.form` background: #0f2a35; padding: 50px; width: 350px; border: 4px solid #00ffff; border-radius: 20px; transform: perspective(1000px) rotateX(2deg) rotateY(2deg); animation: ${glow} 2s infinite alternate; `; const Form70 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ color: '#00ffff', textAlign: 'center' }}>3D NEON</h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>SIGN IN</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '2px solid #00ffff', background: 'transparent', color: '#00ffff', transform: 'perspective(500px) rotateX(1deg)' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid #00ffff', background: 'transparent', color: '#00ffff', cursor: 'pointer' }; export default Form70;

Form 71: Neon with Animation

Features: Animated neon border that moves and changes.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const moveGlow = keyframes` 0% { border-color: #ff0000; box-shadow: 0 0 10px #ff0000; } 25% { border-color: #00ff00; box-shadow: 0 0 10px #00ff00; } 50% { border-color: #0000ff; box-shadow: 0 0 10px #0000ff; } 75% { border-color: #ffff00; box-shadow: 0 0 10px #ffff00; } 100% { border-color: #ff0000; box-shadow: 0 0 10px #ff0000; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #0a0a0a; `; const Form = styled.form` background: #111; padding: 50px; width: 350px; border: 4px solid; border-radius: 20px; animation: ${moveGlow} 5s infinite; `; const Form71 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ color: 'white', textAlign: 'center' }}>ANIMATED NEON</h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>SIGN IN</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '2px solid white', background: 'transparent', color: 'white' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid white', background: 'transparent', color: 'white', cursor: 'pointer' }; export default Form71;

Form 72: Neon with Rotation

Features: Rotating glow effect around the form.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const rotateGlow = keyframes` 0% { box-shadow: -10px -10px 10px #ff00ff, 10px 10px 10px #00ffff; } 25% { box-shadow: -10px 10px 10px #00ffff, 10px -10px 10px #ff00ff; } 50% { box-shadow: 10px 10px 10px #ff00ff, -10px -10px 10px #00ffff; } 75% { box-shadow: 10px -10px 10px #00ffff, -10px 10px 10px #ff00ff; } 100% { box-shadow: -10px -10px 10px #ff00ff, 10px 10px 10px #00ffff; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #1a0f1a; `; const Form = styled.form` background: #241a24; padding: 50px; width: 350px; border: 2px solid #ff00ff; border-radius: 20px; animation: ${rotateGlow} 4s infinite; `; const Form72 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ color: '#ff00ff', textAlign: 'center' }}>ROTATE NEON</h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>SIGN IN</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '2px solid #ff00ff', background: 'transparent', color: '#ff00ff' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid #00ffff', background: 'transparent', color: '#00ffff', cursor: 'pointer' }; export default Form72;

Form 73: Neon with Wave

Features: Wave-like undulating neon border.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const waveGlow = keyframes` 0% { border-width: 2px 2px 8px 2px; } 25% { border-width: 8px 2px 2px 2px; } 50% { border-width: 2px 8px 2px 2px; } 75% { border-width: 2px 2px 2px 8px; } 100% { border-width: 2px 2px 8px 2px; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #1a2a0f; `; const Form = styled.form` background: #243514; padding: 50px; width: 350px; border: 4px solid #bfff00; border-style: solid; border-radius: 20px; animation: ${waveGlow} 3s infinite; box-shadow: 0 0 20px #bfff00; `; const Form73 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ color: '#bfff00', textAlign: 'center' }}>WAVE NEON</h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>SIGN IN</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '2px solid #bfff00', background: 'transparent', color: '#bfff00' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid #bfff00', background: 'transparent', color: '#bfff00', cursor: 'pointer' }; export default Form73;

Form 74: Neon with Sparkle

Features: Sparkling neon effect with particle-like glows.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const sparkle = keyframes` 0% { box-shadow: 0 0 5px #fff, 0 0 10px #ff00ff, 0 0 15px #00ffff; } 25% { box-shadow: 0 0 10px #ff00ff, 0 0 20px #00ffff, 0 0 30px #fff; } 50% { box-shadow: 0 0 15px #00ffff, 0 0 30px #fff, 0 0 45px #ff00ff; } 75% { box-shadow: 0 0 10px #fff, 0 0 20px #ff00ff, 0 0 30px #00ffff; } 100% { box-shadow: 0 0 5px #fff, 0 0 10px #ff00ff, 0 0 15px #00ffff; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #0a0a1a; `; const Form = styled.form` background: #0f0f2a; padding: 50px; width: 350px; border: 3px solid #ff00ff; border-radius: 30px; animation: ${sparkle} 2s infinite; `; const Form74 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ color: 'white', textAlign: 'center', textShadow: '0 0 10px #ff00ff, 0 0 20px #00ffff' }}> SPARKLE NEON </h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>SIGN IN</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '2px solid #ff00ff', background: 'transparent', color: '#ff00ff' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid #00ffff', background: 'transparent', color: '#00ffff', cursor: 'pointer' }; export default Form74;

Form 75: Neon with Trail

Features: Mouse trail effect that follows cursor with neon glow.

import React, { useState, useEffect } from 'react'; import styled, { keyframes } from 'styled-components'; const glow = keyframes` 0% { opacity: 0.5; } 100% { opacity: 1; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #0a0a0a; position: relative; overflow: hidden; `; const Trail = styled.div` position: fixed; width: 20px; height: 20px; border-radius: 50%; background: ${props => props.color}; box-shadow: 0 0 20px ${props => props.color}; pointer-events: none; left: ${props => props.x}px; top: ${props => props.y}px; transform: translate(-50%, -50%); z-index: 9999; animation: ${glow} 0.5s infinite alternate; `; const Form = styled.form` background: #111; padding: 50px; width: 350px; border: 3px solid #ff00ff; border-radius: 20px; z-index: 1; position: relative; `; const Form75 = () => { const [mousePos, setMousePos] = useState({ x: 0, y: 0 }); const colors = ['#ff00ff', '#00ffff', '#ffff00', '#ff0000', '#00ff00']; const [colorIndex, setColorIndex] = useState(0); useEffect(() => { const handleMouseMove = (e) => { setMousePos({ x: e.clientX, y: e.clientY }); }; window.addEventListener('mousemove', handleMouseMove); const interval = setInterval(() => { setColorIndex((prev) => (prev + 1) % colors.length); }, 200); return () => { window.removeEventListener('mousemove', handleMouseMove); clearInterval(interval); }; }, []); return ( <Container> <Trail x={mousePos.x} y={mousePos.y} color={colors[colorIndex]} /> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ color: 'white', textAlign: 'center' }}>TRAIL NEON</h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>SIGN IN</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '2px solid #ff00ff', background: 'transparent', color: '#ff00ff' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid #00ffff', background: 'transparent', color: '#00ffff', cursor: 'pointer' }; export default Form75;

Form 76: Neon with Pulse

Features: Heartbeat-like pulsing neon glow.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const heartbeat = keyframes` 0% { box-shadow: 0 0 5px #ff3366, 0 0 10px #ff3366; } 25% { box-shadow: 0 0 20px #ff3366, 0 0 40px #ff3366; } 30% { box-shadow: 0 0 5px #ff3366, 0 0 10px #ff3366; } 45% { box-shadow: 0 0 25px #ff3366, 0 0 50px #ff3366; } 50% { box-shadow: 0 0 5px #ff3366, 0 0 10px #ff3366; } 100% { box-shadow: 0 0 5px #ff3366, 0 0 10px #ff3366; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #1f0f1a; `; const Form = styled.form` background: #2a1424; padding: 50px; width: 350px; border: 3px solid #ff3366; border-radius: 20px; animation: ${heartbeat} 2s infinite; `; const Form76 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ color: '#ff3366', textAlign: 'center' }}>PULSE NEON</h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>SIGN IN</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '2px solid #ff3366', background: 'transparent', color: '#ff3366' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid #ff3366', background: 'transparent', color: '#ff3366', cursor: 'pointer' }; export default Form76;

Form 77: Neon with Bounce

Features: Bouncing animation with neon glow.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const bounce = keyframes` 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } `; const glow = keyframes` 0% { box-shadow: 0 0 10px #00ff88; } 100% { box-shadow: 0 0 30px #00ff88; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #0f1f0f; `; const Form = styled.form` background: #1a2a1a; padding: 50px; width: 350px; border: 3px solid #00ff88; border-radius: 30px; animation: ${bounce} 2s infinite, ${glow} 1s infinite alternate; `; const Form77 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ color: '#00ff88', textAlign: 'center' }}>BOUNCE NEON</h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>SIGN IN</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '2px solid #00ff88', background: 'transparent', color: '#00ff88' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid #00ff88', background: 'transparent', color: '#00ff88', cursor: 'pointer' }; export default Form77;

Form 78: Neon with Shake

Features: Shaking animation on error with red neon.

import React, { useState } from 'react'; import styled, { keyframes } from 'styled-components'; const shake = keyframes` 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); } 20%, 40%, 60%, 80% { transform: translateX(10px); } `; const glow = keyframes` 0% { box-shadow: 0 0 5px #ff0000; } 100% { box-shadow: 0 0 20px #ff0000; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #1a0f0f; `; const Form = styled.form` background: #2a1414; padding: 50px; width: 350px; border: 3px solid #ff0000; border-radius: 20px; animation: ${props => props.shake ? shake : ''} 0.5s, ${glow} 1s infinite alternate; `; const Form78 = () => { const [shake, setShake] = useState(false); const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const handleSubmit = (e) => { e.preventDefault(); if (!email || !password) { setShake(true); setTimeout(() => setShake(false), 500); } }; return ( <Container> <Form shake={shake} onSubmit={handleSubmit}> <h2 style={{ color: '#ff0000', textAlign: 'center' }}>SHAKE NEON</h2> <input type="email" placeholder="Email" style={inputStyle} value={email} onChange={(e) => setEmail(e.target.value)} /> <input type="password" placeholder="Password" style={inputStyle} value={password} onChange={(e) => setPassword(e.target.value)} /> <button style={buttonStyle}>SIGN IN</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '2px solid #ff0000', background: 'transparent', color: '#ff0000' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid #ff0000', background: 'transparent', color: '#ff0000', cursor: 'pointer' }; export default Form78;

Form 79: Neon with Glitch

Features: Glitchy, corrupted neon effect for cyber aesthetic.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const glitch = keyframes` 0% { transform: translate(0); } 20% { transform: translate(-5px, 5px); } 40% { transform: translate(-5px, -5px); } 60% { transform: translate(5px, 5px); } 80% { transform: translate(5px, -5px); } 100% { transform: translate(0); } `; const glitchBefore = keyframes` 0% { clip: rect(44px, 450px, 56px, 0); } 5% { clip: rect(34px, 450px, 86px, 0); } 10% { clip: rect(64px, 450px, 96px, 0); } 15% { clip: rect(24px, 450px, 46px, 0); } 20% { clip: rect(74px, 450px, 86px, 0); } 25% { clip: rect(84px, 450px, 96px, 0); } 30% { clip: rect(14px, 450px, 26px, 0); } 35% { clip: rect(54px, 450px, 76px, 0); } 40% { clip: rect(94px, 450px, 96px, 0); } 45% { clip: rect(34px, 450px, 56px, 0); } 50% { clip: rect(64px, 450px, 86px, 0); } 55% { clip: rect(24px, 450px, 36px, 0); } 60% { clip: rect(44px, 450px, 66px, 0); } 65% { clip: rect(74px, 450px, 96px, 0); } 70% { clip: rect(84px, 450px, 96px, 0); } 75% { clip: rect(14px, 450px, 26px, 0); } 80% { clip: rect(54px, 450px, 76px, 0); } 85% { clip: rect(94px, 450px, 96px, 0); } 90% { clip: rect(34px, 450px, 56px, 0); } 95% { clip: rect(64px, 450px, 86px, 0); } 100% { clip: rect(24px, 450px, 36px, 0); } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #0a0a0a; `; const Form = styled.form` background: #111; padding: 50px; width: 350px; border: 3px solid #00ffff; border-radius: 10px; position: relative; animation: ${glitch} 0.3s infinite; &::before, &::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 3px solid #ff00ff; border-radius: 10px; opacity: 0.8; } &::before { transform: translate(-2px, -2px); animation: ${glitchBefore} 0.3s infinite; } &::after { transform: translate(2px, 2px); animation: ${glitchBefore} 0.3s infinite reverse; } `; const Form79 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ color: '#00ffff', textAlign: 'center', position: 'relative', zIndex: 1 }}> GLITCH NEON </h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>SIGN IN</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '2px solid #00ffff', background: 'transparent', color: '#00ffff', position: 'relative', zIndex: 1 }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid #ff00ff', background: 'transparent', color: '#ff00ff', cursor: 'pointer', position: 'relative', zIndex: 1 }; export default Form79;

Form 80: Neon with Scan

Features: Scanning line effect moving across the form.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const scan = keyframes` 0% { top: 0; } 100% { top: 100%; } `; const glow = keyframes` 0% { box-shadow: 0 0 5px #00ff00; } 100% { box-shadow: 0 0 20px #00ff00; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #0a1a0a; position: relative; overflow: hidden; `; const Form = styled.form` background: #0f2a0f; padding: 50px; width: 350px; border: 3px solid #00ff00; border-radius: 20px; animation: ${glow} 2s infinite alternate; position: relative; overflow: hidden; &::before { content: ''; position: absolute; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, transparent, #00ff00, transparent); animation: ${scan} 3s linear infinite; box-shadow: 0 0 20px #00ff00; } `; const Form80 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ color: '#00ff00', textAlign: 'center' }}>SCAN NEON</h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>SIGN IN</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '2px solid #00ff00', background: 'transparent', color: '#00ff00', position: 'relative', zIndex: 1 }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid #00ff00', background: 'transparent', color: '#00ff00', cursor: 'pointer', position: 'relative', zIndex: 1 }; export default Form80;

Form 81: Neon Retro

Features: Retro 80s style neon with vintage aesthetic.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const retroGlow = keyframes` 0% { text-shadow: 2px 2px 0 #ff00ff, -2px -2px 0 #00ffff; } 50% { text-shadow: -2px -2px 0 #ff00ff, 2px 2px 0 #00ffff; } 100% { text-shadow: 2px 2px 0 #ff00ff, -2px -2px 0 #00ffff; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #000; background-image: linear-gradient(0deg, transparent 24%, rgba(255, 0, 255, 0.05) 25%, rgba(255, 0, 255, 0.05) 26%, transparent 27%, transparent), linear-gradient(90deg, transparent 24%, rgba(0, 255, 255, 0.05) 25%, rgba(0, 255, 255, 0.05) 26%, transparent 27%, transparent); background-size: 50px 50px; `; const Form = styled.form` background: rgba(0, 0, 0, 0.8); padding: 50px; width: 350px; border: 4px double #ff00ff; box-shadow: 0 0 20px #ff00ff, inset 0 0 20px #00ffff; `; const Title = styled.h2` color: #fff; text-align: center; margin-bottom: 30px; animation: ${retroGlow} 2s infinite; font-family: 'Courier New', monospace; `; const Form81 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <Title>RETRO 80s</Title> <input type="email" placeholder="EMAIL" style={inputStyle} /> <input type="password" placeholder="PASSWORD" style={inputStyle} /> <button style={buttonStyle}>LOGIN</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '2px solid #00ffff', background: 'transparent', color: '#00ffff', fontFamily: 'Courier New, monospace', textTransform: 'uppercase' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid #ff00ff', background: 'transparent', color: '#ff00ff', cursor: 'pointer', fontFamily: 'Courier New, monospace', textTransform: 'uppercase' }; export default Form81;

Form 82: Neon Future

Features: Futuristic neon design with clean lines and modern feel.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const futureGlow = keyframes` 0% { box-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff; } 100% { box-shadow: 0 0 20px #00ffff, 0 0 40px #00ffff, 0 0 60px #00ffff; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #0a0f1f, #1a1f2f); `; const Form = styled.form` background: rgba(10, 20, 30, 0.9); backdrop-filter: blur(10px); padding: 50px; width: 350px; border: 2px solid #00ffff; border-radius: 10px; animation: ${futureGlow} 2s infinite alternate; `; const Form82 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ color: '#00ffff', textAlign: 'center', letterSpacing: '4px' }}> FUTURE </h2> <input type="email" placeholder="EMAIL" style={inputStyle} /> <input type="password" placeholder="PASSWORD" style={inputStyle} /> <button style={buttonStyle}>ACCESS</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: 'none', borderBottom: '2px solid #00ffff', background: 'transparent', color: '#00ffff', letterSpacing: '2px' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid #00ffff', background: 'transparent', color: '#00ffff', cursor: 'pointer', letterSpacing: '4px' }; export default Form82;

Form 83: Neon Minimal

Features: Minimalist neon design with subtle glow.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const minimalGlow = keyframes` 0% { border-color: #333; } 100% { border-color: #0ff; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #111; `; const Form = styled.form` background: transparent; padding: 50px; width: 350px; border: 1px solid #333; transition: border-color 0.5s; &:hover { border-color: #0ff; box-shadow: 0 0 20px #0ff; } `; const Form83 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ color: '#fff', textAlign: 'center', fontWeight: '300' }}> MINIMAL </h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>SIGN IN</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: 'none', borderBottom: '1px solid #333', background: 'transparent', color: '#fff' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '1px solid #333', background: 'transparent', color: '#fff', cursor: 'pointer' }; export default Form83;

Form 84: Neon Luxury

Features: Luxury gold neon with elegant design.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const luxuryGlow = keyframes` 0% { box-shadow: 0 0 10px #ffd700, 0 0 20px #ffd700; } 100% { box-shadow: 0 0 30px #ffd700, 0 0 60px #ffd700; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #1a1a0f; `; const Form = styled.form` background: #242414; padding: 60px; width: 350px; border: 3px solid #ffd700; border-radius: 30px; animation: ${luxuryGlow} 3s infinite alternate; `; const Form84 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ color: '#ffd700', textAlign: 'center', fontFamily: 'Georgia, serif' }}> LUXURY </h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>ENTER</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '2px solid #ffd700', borderRadius: '15px', background: 'transparent', color: '#ffd700' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid #ffd700', borderRadius: '15px', background: 'transparent', color: '#ffd700', cursor: 'pointer' }; export default Form84;

Form 85: Neon Crystal

Features: Crystal clear neon with prismatic effects.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const crystalGlow = keyframes` 0% { filter: drop-shadow(0 0 5px rgba(255,255,255,0.5)); } 100% { filter: drop-shadow(0 0 20px rgba(255,255,255,0.8)); } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #1a1a2a, #2a2a3a); `; const Form = styled.form` background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); padding: 50px; width: 350px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 20px; animation: ${crystalGlow} 3s infinite alternate; `; const Form85 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ color: 'white', textAlign: 'center' }}>CRYSTAL</h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>ENTER</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '2px solid rgba(255,255,255,0.3)', borderRadius: '10px', background: 'transparent', color: 'white' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid rgba(255,255,255,0.3)', borderRadius: '10px', background: 'transparent', color: 'white', cursor: 'pointer' }; export default Form85;

Form 86: Neon Chrome

Features: Chrome-like metallic neon with reflective effect.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const chromeGlow = keyframes` 0% { filter: drop-shadow(0 0 5px #aaa); } 100% { filter: drop-shadow(0 0 20px #fff); } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #1a1a1a; `; const Form = styled.form` background: linear-gradient(135deg, #2a2a2a, #3a3a3a); padding: 50px; width: 350px; border: 3px solid #aaa; border-radius: 20px; box-shadow: 0 0 30px rgba(255,255,255,0.2); animation: ${chromeGlow} 2s infinite alternate; `; const Form86 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ color: '#fff', textAlign: 'center', textShadow: '0 0 10px #aaa' }}> CHROME </h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>ENTER</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '2px solid #aaa', borderRadius: '10px', background: 'transparent', color: '#fff' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid #aaa', borderRadius: '10px', background: 'transparent', color: '#fff', cursor: 'pointer' }; export default Form86;

Form 87: Neon Glass

Features: Glass morphism with neon edges.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const glassGlow = keyframes` 0% { border-color: rgba(0, 255, 255, 0.3); } 100% { border-color: rgba(0, 255, 255, 1); } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #1a2a3a, #2a3a4a); `; const Form = styled.form` background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(15px); padding: 50px; width: 350px; border: 3px solid rgba(0, 255, 255, 0.3); border-radius: 30px; animation: ${glassGlow} 2s infinite alternate; `; const Form87 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ color: '#fff', textAlign: 'center' }}>GLASS NEON</h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>ENTER</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '2px solid rgba(0,255,255,0.3)', borderRadius: '15px', background: 'rgba(255,255,255,0.05)', color: '#fff' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid rgba(0,255,255,0.3)', borderRadius: '15px', background: 'transparent', color: '#fff', cursor: 'pointer' }; export default Form87;

Form 88: Neon Metal

Features: Industrial metal with neon accents.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const metalGlow = keyframes` 0% { filter: drop-shadow(0 0 5px #ff6600); } 100% { filter: drop-shadow(0 0 15px #ff6600); } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #2a1f1a; `; const Form = styled.form` background: #352a24; padding: 50px; width: 350px; border: 4px solid #ff6600; border-radius: 0; box-shadow: inset 0 0 20px #ff6600; animation: ${metalGlow} 2s infinite alternate; `; const Form88 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ color: '#ff6600', textAlign: 'center' }}>METAL NEON</h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>ENTER</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '2px solid #ff6600', background: 'transparent', color: '#ff6600' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid #ff6600', background: 'transparent', color: '#ff6600', cursor: 'pointer' }; export default Form88;

Form 89: Neon Plastic

Features: Bright plastic-like neon with glossy effect.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const plasticGlow = keyframes` 0% { box-shadow: 0 0 10px #ff44aa; } 100% { box-shadow: 0 0 30px #ff44aa; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #2a1f2a; `; const Form = styled.form` background: #352a35; padding: 50px; width: 350px; border: 4px solid #ff44aa; border-radius: 40px; animation: ${plasticGlow} 1.5s infinite alternate; `; const Form89 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ color: '#ff44aa', textAlign: 'center' }}>PLASTIC</h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>ENTER</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '2px solid #ff44aa', borderRadius: '20px', background: 'transparent', color: '#ff44aa' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid #ff44aa', borderRadius: '20px', background: 'transparent', color: '#ff44aa', cursor: 'pointer' }; export default Form89;

Form 90: Neon Liquid

Features: Liquid-like flowing neon effect.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const liquidFlow = keyframes` 0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } 50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; } 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } `; const glow = keyframes` 0% { box-shadow: 0 0 10px #00ccff; } 100% { box-shadow: 0 0 30px #00ccff; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #0f2a2a; `; const Form = styled.form` background: #143535; padding: 50px; width: 350px; border: 4px solid #00ccff; animation: ${liquidFlow} 8s infinite, ${glow} 2s infinite alternate; `; const Form90 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ color: '#00ccff', textAlign: 'center' }}>LIQUID</h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>ENTER</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '2px solid #00ccff', background: 'transparent', color: '#00ccff' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid #00ccff', background: 'transparent', color: '#00ccff', cursor: 'pointer' }; export default Form90;

Form 91: Neon with Particles

Features: Floating particles with neon glow.

import React, { useEffect, useRef } from 'react'; import styled, { keyframes } from 'styled-components'; const glow = keyframes` 0% { filter: drop-shadow(0 0 5px #ff00ff); } 100% { filter: drop-shadow(0 0 15px #ff00ff); } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #1a0f1a; position: relative; overflow: hidden; `; const Canvas = styled.canvas` position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; `; const Form = styled.form` background: #2a1a2a; padding: 50px; width: 350px; border: 3px solid #ff00ff; border-radius: 20px; animation: ${glow} 2s infinite alternate; z-index: 1; position: relative; `; const Form91 = () => { const canvasRef = useRef(null); useEffect(() => { const canvas = canvasRef.current; const ctx = canvas.getContext('2d'); let particles = []; const resize = () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }; const createParticles = () => { for (let i = 0; i < 50; i++) { particles.push({ x: Math.random() * canvas.width, y: Math.random() * canvas.height, radius: Math.random() * 3 + 1, speedX: (Math.random() - 0.5) * 2, speedY: (Math.random() - 0.5) * 2, color: `rgba(255, 0, 255, ${Math.random() * 0.5})` }); } }; const animate = () => { ctx.clearRect(0, 0, canvas.width, canvas.height); particles.forEach((particle) => { particle.x += particle.speedX; particle.y += particle.speedY; if (particle.x < 0 || particle.x > canvas.width) particle.speedX *= -1; if (particle.y < 0 || particle.y > canvas.height) particle.speedY *= -1; ctx.beginPath(); ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2); ctx.fillStyle = particle.color; ctx.shadowColor = '#ff00ff'; ctx.shadowBlur = 10; ctx.fill(); }); requestAnimationFrame(animate); }; resize(); createParticles(); animate(); window.addEventListener('resize', resize); return () => window.removeEventListener('resize', resize); }, []); return ( <Container> <Canvas ref={canvasRef} /> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ color: '#ff00ff', textAlign: 'center' }}>PARTICLES</h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>ENTER</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '2px solid #ff00ff', background: 'transparent', color: '#ff00ff' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid #ff00ff', background: 'transparent', color: '#ff00ff', cursor: 'pointer' }; export default Form91;

Form 92: Neon with Stars

Features: Star field background with neon form.

import React, { useEffect, useRef } from 'react'; import styled, { keyframes } from 'styled-components'; const twinkle = keyframes` 0% { opacity: 0.3; } 50% { opacity: 1; } 100% { opacity: 0.3; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #0a0f1a; position: relative; overflow: hidden; `; const Star = styled.div` position: absolute; width: 2px; height: 2px; background: white; border-radius: 50%; animation: ${twinkle} ${props => props.duration}s infinite; left: ${props => props.left}%; top: ${props => props.top}%; `; const Form = styled.form` background: rgba(10, 20, 30, 0.8); backdrop-filter: blur(5px); padding: 50px; width: 350px; border: 3px solid #ffff00; border-radius: 20px; box-shadow: 0 0 30px #ffff00; z-index: 1; `; const Form92 = () => { const stars = Array.from({ length: 100 }, (_, i) => ({ id: i, left: Math.random() * 100, top: Math.random() * 100, duration: Math.random() * 3 + 1 })); return ( <Container> {stars.map(star => ( <Star key={star.id} left={star.left} top={star.top} duration={star.duration} /> ))} <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ color: '#ffff00', textAlign: 'center' }}>STARLIGHT</h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>ENTER</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '2px solid #ffff00', background: 'transparent', color: '#ffff00' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid #ffff00', background: 'transparent', color: '#ffff00', cursor: 'pointer' }; export default Form92;

Form 93: Neon with Grid

Features: Cyber grid background with neon form.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const gridMove = keyframes` 0% { background-position: 0 0; } 100% { background-position: 50px 50px; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #0a0f1a; background-image: linear-gradient(rgba(0, 255, 255, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px); background-size: 50px 50px; animation: ${gridMove} 10s linear infinite; `; const Form = styled.form` background: rgba(10, 20, 30, 0.9); backdrop-filter: blur(5px); padding: 50px; width: 350px; border: 3px solid #00ffff; border-radius: 10px; box-shadow: 0 0 30px #00ffff; `; const Form93 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ color: '#00ffff', textAlign: 'center' }}>GRID</h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>ENTER</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '2px solid #00ffff', background: 'transparent', color: '#00ffff' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid #00ffff', background: 'transparent', color: '#00ffff', cursor: 'pointer' }; export default Form93;

Form 94: Neon with Circuit

Features: Circuit board pattern background.

import React from 'react'; import styled from 'styled-components'; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #0f1a1f; position: relative; &::before { content: ''; position: absolute; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(0, 255, 0, 0.1) 1px, transparent 1px), linear-gradient(0deg, rgba(0, 255, 0, 0.1) 1px, transparent 1px); background-size: 30px 30px; pointer-events: none; } `; const Form = styled.form` background: rgba(10, 20, 25, 0.9); padding: 50px; width: 350px; border: 3px solid #00ff00; border-radius: 10px; box-shadow: 0 0 30px #00ff00; z-index: 1; `; const Form94 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ color: '#00ff00', textAlign: 'center' }}>CIRCUIT</h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>ENTER</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '2px solid #00ff00', background: 'transparent', color: '#00ff00' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid #00ff00', background: 'transparent', color: '#00ff00', cursor: 'pointer' }; export default Form94;

Form 95: Neon with Binary

Features: Binary code rain background.

import React, { useEffect, useRef } from 'react'; import styled from 'styled-components'; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #0a0a0a; position: relative; overflow: hidden; `; const BinaryCanvas = styled.canvas` position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.3; `; const Form = styled.form` background: rgba(0, 20, 0, 0.9); padding: 50px; width: 350px; border: 3px solid #00ff00; box-shadow: 0 0 30px #00ff00; z-index: 1; `; const Form95 = () => { const canvasRef = useRef(null); useEffect(() => { const canvas = canvasRef.current; const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; const binary = '01'; const fontSize = 20; const columns = canvas.width / fontSize; const drops = []; for (let i = 0; i < columns; i++) { drops[i] = 1; } function draw() { ctx.fillStyle = 'rgba(0, 0, 0, 0.05)'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = '#00ff00'; ctx.font = fontSize + 'px monospace'; for (let i = 0; i < drops.length; i++) { const text = binary[Math.floor(Math.random() * binary.length)]; ctx.fillText(text, i * fontSize, drops[i] * fontSize); if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) { drops[i] = 0; } drops[i]++; } } const interval = setInterval(draw, 50); return () => clearInterval(interval); }, []); return ( <Container> <BinaryCanvas ref={canvasRef} /> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ color: '#00ff00', textAlign: 'center' }}>BINARY</h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>ENTER</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '2px solid #00ff00', background: 'transparent', color: '#00ff00' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid #00ff00', background: 'transparent', color: '#00ff00', cursor: 'pointer' }; export default Form95;

Form 96: Neon with Matrix

Features: Matrix-style green rain background.

import React, { useEffect, useRef } from 'react'; import styled from 'styled-components'; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #000; position: relative; overflow: hidden; `; const MatrixCanvas = styled.canvas` position: absolute; top: 0; left: 0; width: 100%; height: 100%; `; const Form = styled.form` background: rgba(0, 20, 0, 0.8); padding: 50px; width: 350px; border: 3px solid #0f0; box-shadow: 0 0 30px #0f0; z-index: 1; `; const Form96 = () => { const canvasRef = useRef(null); useEffect(() => { const canvas = canvasRef.current; const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; const katakana = 'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン'; const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; const nums = '0123456789'; const alphabet = katakana + latin + nums; const fontSize = 16; const columns = canvas.width / fontSize; const rainDrops = []; for (let x = 0; x < columns; x++) { rainDrops[x] = 1; } const draw = () => { ctx.fillStyle = 'rgba(0, 0, 0, 0.05)'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = '#0f0'; ctx.font = fontSize + 'px monospace'; for (let i = 0; i < rainDrops.length; i++) { const text = alphabet.charAt(Math.floor(Math.random() * alphabet.length)); ctx.fillText(text, i * fontSize, rainDrops[i] * fontSize); if (rainDrops[i] * fontSize > canvas.height && Math.random() > 0.975) { rainDrops[i] = 0; } rainDrops[i]++; } }; const interval = setInterval(draw, 30); return () => clearInterval(interval); }, []); return ( <Container> <MatrixCanvas ref={canvasRef} /> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ color: '#0f0', textAlign: 'center' }}>MATRIX</h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>ENTER</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '2px solid #0f0', background: 'transparent', color: '#0f0' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid #0f0', background: 'transparent', color: '#0f0', cursor: 'pointer' }; export default Form96;

Form 97: Neon with City

Features: City skyline silhouette background.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const cityLights = keyframes` 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(180deg, #0a0f1f 0%, #1a2f3f 100%); position: relative; &::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 150px; background: repeating-linear-gradient( 90deg, #2a3f4f 0px, #2a3f4f 30px, #3a4f5f 30px, #3a4f5f 60px ); clip-path: polygon( 0% 100%, 2% 40%, 4% 60%, 6% 30%, 8% 70%, 10% 20%, 12% 80%, 14% 40%, 16% 90%, 18% 30%, 20% 60%, 22% 20%, 24% 70%, 26% 40%, 28% 80%, 30% 30%, 32% 90%, 34% 40%, 36% 60%, 38% 20%, 40% 70%, 42% 30%, 44% 80%, 46% 40%, 48% 90%, 50% 30%, 52% 70%, 54% 40%, 56% 80%, 58% 20%, 60% 60%, 62% 30%, 64% 70%, 66% 40%, 68% 90%, 70% 30%, 72% 80%, 74% 40%, 76% 60%, 78% 20%, 80% 70%, 82% 30%, 84% 80%, 86% 40%, 88% 90%, 90% 30%, 92% 70%, 94% 40%, 96% 80%, 98% 20%, 100% 100% ); } &::after { content: ''; position: absolute; bottom: 150px; left: 0; right: 0; height: 10px; background: repeating-linear-gradient( 90deg, #ff0 0px, #ff0 5px, transparent 5px, transparent 20px ); animation: ${cityLights} 2s infinite; } `; const Form = styled.form` background: rgba(10, 20, 30, 0.8); backdrop-filter: blur(5px); padding: 50px; width: 350px; border: 3px solid #ffaa00; border-radius: 20px; box-shadow: 0 0 30px #ffaa00; z-index: 1; `; const Form97 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ color: '#ffaa00', textAlign: 'center' }}>CITY</h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>ENTER</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '2px solid #ffaa00', background: 'transparent', color: '#ffaa00' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid #ffaa00', background: 'transparent', color: '#ffaa00', cursor: 'pointer' }; export default Form97;

Form 98: Neon with Mountains

Features: Mountain silhouette background.

import React from 'react'; import styled from 'styled-components'; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(180deg, #1a2f3a 0%, #2a3f4a 100%); position: relative; &::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 200px; background: #1f3a3f; clip-path: polygon( 0% 100%, 5% 30%, 10% 50%, 15% 20%, 20% 40%, 25% 10%, 30% 30%, 35% 15%, 40% 35%, 45% 5%, 50% 25%, 55% 10%, 60% 30%, 65% 15%, 70% 35%, 75% 5%, 80% 25%, 85% 15%, 90% 30%, 95% 10%, 100% 30%, 100% 100% ); } `; const Form = styled.form` background: rgba(20, 40, 50, 0.8); backdrop-filter: blur(5px); padding: 50px; width: 350px; border: 3px solid #66ccff; border-radius: 20px; box-shadow: 0 0 30px #66ccff; z-index: 1; `; const Form98 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ color: '#66ccff', textAlign: 'center' }}>MOUNTAINS</h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>ENTER</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '2px solid #66ccff', background: 'transparent', color: '#66ccff' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid #66ccff', background: 'transparent', color: '#66ccff', cursor: 'pointer' }; export default Form98;

Form 99: Neon with Ocean

Features: Ocean wave background.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const wave = keyframes` 0% { transform: translateX(0) translateZ(0) scaleY(1); } 50% { transform: translateX(-25%) translateZ(0) scaleY(0.8); } 100% { transform: translateX(-50%) translateZ(0) scaleY(1); } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(180deg, #0a2a3a 0%, #1a3f4f 100%); position: relative; overflow: hidden; &::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 100px; background: repeating-linear-gradient( 90deg, #2a9fdf 0px, #2a9fdf 20px, #3abfef 20px, #3abfef 40px ); opacity: 0.3; animation: ${wave} 10s linear infinite; } `; const Form = styled.form` background: rgba(10, 40, 60, 0.8); backdrop-filter: blur(5px); padding: 50px; width: 350px; border: 3px solid #00aaff; border-radius: 30px; box-shadow: 0 0 30px #00aaff; z-index: 1; `; const Form99 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ color: '#00aaff', textAlign: 'center' }}>OCEAN</h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>ENTER</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '2px solid #00aaff', background: 'transparent', color: '#00aaff' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid #00aaff', background: 'transparent', color: '#00aaff', cursor: 'pointer' }; export default Form99;

Form 100: Neon with Space

Features: Space nebula background with stars.

import React from 'react'; import styled, { keyframes } from 'styled-components'; const float = keyframes` 0% { transform: translate(0, 0); } 100% { transform: translate(10px, 10px); } `; const twinkle = keyframes` 0% { opacity: 0.2; } 50% { opacity: 1; } 100% { opacity: 0.2; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%); position: relative; overflow: hidden; `; const Star = styled.div` position: absolute; width: ${props => props.size}px; height: ${props => props.size}px; background: white; border-radius: 50%; left: ${props => props.left}%; top: ${props => props.top}%; animation: ${twinkle} ${props => props.duration}s infinite; `; const Nebula = styled.div` position: absolute; width: 300px; height: 300px; background: radial-gradient(circle, rgba(128, 0, 255, 0.2), transparent); border-radius: 50%; left: ${props => props.left}%; top: ${props => props.top}%; filter: blur(40px); animation: ${float} 20s infinite alternate; `; const Form = styled.form` background: rgba(10, 15, 25, 0.7); backdrop-filter: blur(10px); padding: 50px; width: 350px; border: 3px solid #aa88ff; border-radius: 30px; box-shadow: 0 0 50px #aa88ff, 0 0 100px #8844ff; z-index: 1; `; const Form100 = () => { const stars = Array.from({ length: 200 }, (_, i) => ({ id: i, left: Math.random() * 100, top: Math.random() * 100, size: Math.random() * 3 + 1, duration: Math.random() * 5 + 2 })); const nebulas = [ { left: 10, top: 20 }, { left: 70, top: 60 }, { left: 30, top: 80 } ]; return ( <Container> {nebulas.map((nebula, i) => ( <Nebula key={i} left={nebula.left} top={nebula.top} /> ))} {stars.map(star => ( <Star key={star.id} left={star.left} top={star.top} size={star.size} duration={star.duration} /> ))} <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ color: '#aa88ff', textAlign: 'center', textShadow: '0 0 20px #8844ff' }}> SPACE </h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}>ENTER</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '15px', margin: '15px 0', border: '2px solid #aa88ff', borderRadius: '15px', background: 'transparent', color: '#aa88ff', boxShadow: '0 0 10px #8844ff' }; const buttonStyle = { width: '100%', padding: '15px', marginTop: '20px', border: '2px solid #aa88ff', borderRadius: '15px', background: 'transparent', color: '#aa88ff', cursor: 'pointer', boxShadow: '0 0 20px #8844ff' }; export default Form100;

Complete App.js to Browse All Forms

import React, { useState } from 'react'; import Form1 from './components/Form1'; import Form2 from './components/Form2'; // ... import all forms up to Form100 function App() { const [currentForm, setCurrentForm] = useState(1); // Import all forms dynamically or create a mapping object const forms = { 1: <Form1 />, 2: <Form2 />, // ... continue for all 100 forms }; return ( <div> <select onChange={(e) => setCurrentForm(Number(e.target.value))} style={{ position: 'fixed', top: '20px', right: '20px', padding: '12px 24px', background: '#222', color: '#0ff', border: '2px solid #0ff', borderRadius: '30px', fontSize: '16px', cursor: 'pointer', zIndex: 1000, boxShadow: '0 0 20px #0ff' }} > {Array.from({ length: 100 }, (_, i) => ( <option key={i + 1} value={i + 1}> Neon Glow Form {i + 1} </option> ))} </select> {forms[currentForm]} </div> ); } export default App;

Each form features unique neon glow effects with different colors, border styles, animations, and background treatments - all designed to create stunning, eye-catching login experiences!