Project Setup
npx create-react-app 100-minimal-border-forms cd 100-minimal-border-forms npm install styled-components react-icons framer-motion
Now, here are all 100 minimal border forms:
Form 1: Basic Border Line
Introduction: Ultra-minimal form with simple bottom borders for each input field.
Features: Clean lines, no background, focus animations, minimal design.
import React, { useState } from 'react'; import styled from 'styled-components'; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #ffffff; `; const Form = styled.form` background: transparent; padding: 50px; width: 350px; `; const Title = styled.h2` text-align: center; color: #333; margin-bottom: 50px; font-weight: 300; letter-spacing: 2px; `; const InputGroup = styled.div` margin: 30px 0; `; const Input = styled.input` width: 100%; padding: 10px 0; border: none; border-bottom: 1px solid #ddd; background: transparent; color: #333; font-size: 16px; transition: border-color 0.3s; &:focus { outline: none; border-bottom-color: #007bff; } &::placeholder { color: #999; font-weight: 300; } `; const Button = styled.button` width: 100%; padding: 12px; margin-top: 30px; border: 1px solid #333; background: transparent; color: #333; font-size: 16px; cursor: pointer; transition: all 0.3s; &:hover { background: #333; color: white; } `; const Form1 = () => { const [formData, setFormData] = useState({ email: '', password: '' }); const handleSubmit = (e) => { e.preventDefault(); console.log('Login:', formData); }; return ( <Container> <Form onSubmit={handleSubmit}> <Title>MINIMAL</Title> <InputGroup> <Input type="email" placeholder="Email" value={formData.email} onChange={(e) => setFormData({...formData, email: e.target.value})} /> </InputGroup> <InputGroup> <Input type="password" placeholder="Password" value={formData.password} onChange={(e) => setFormData({...formData, password: e.target.value})} /> </InputGroup> <Button type="submit">Sign In</Button> </Form> </Container> ); }; export default Form1; Form 2: Double Border Line
Introduction: Form with double border lines creating a sophisticated layered effect.
Features: Double borders, subtle spacing, elegant typography.
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: #fafafa; `; const Form = styled.form` background: transparent; padding: 50px; width: 350px; border: 2px double #ccc; `; const Input = styled.input` width: 100%; padding: 12px; margin: 15px 0; border: 2px double #ddd; background: transparent; color: #333; font-size: 16px; &:focus { outline: none; border-color: #888; } `; const Button = styled.button` width: 100%; padding: 12px; margin-top: 20px; border: 2px double #333; background: transparent; color: #333; font-size: 16px; cursor: pointer; &:hover { border-color: #000; color: #000; } `; const Form2 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', marginBottom: 30, fontWeight: 300 }}> DOUBLE </h2> <Input type="email" placeholder="Email" /> <Input type="password" placeholder="Password" /> <Button type="submit">Sign In</Button> </Form> </Container> ); }; export default Form2; Form 3: Dashed Border
Introduction: Playful form using dashed borders for a light, approachable feel.
Features: Dashed lines, rounded corners, friendly design.
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: #f0f8ff; `; const Form = styled.form` background: transparent; padding: 50px; width: 350px; border: 2px dashed #aaa; border-radius: 20px; `; const Input = styled.input` width: 100%; padding: 12px; margin: 15px 0; border: 2px dashed #ccc; border-radius: 10px; background: transparent; color: #333; font-size: 16px; &:focus { outline: none; border-color: #666; } `; const Button = styled.button` width: 100%; padding: 12px; margin-top: 20px; border: 2px dashed #333; border-radius: 10px; background: transparent; color: #333; font-size: 16px; cursor: pointer; &:hover { border-style: solid; } `; const Form3 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', marginBottom: 30, fontWeight: 300 }}> DASHED </h2> <Input type="email" placeholder="Email" /> <Input type="password" placeholder="Password" /> <Button type="submit">Sign In</Button> </Form> </Container> ); }; export default Form3; Form 4: Dotted Border
Introduction: Whimsical form with dotted borders for a unique, playful aesthetic.
Features: Dotted patterns, soft design, creative approach.
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: #fff9f0; `; const Form = styled.form` background: transparent; padding: 50px; width: 350px; border: 3px dotted #c0a080; border-radius: 30px; `; const Input = styled.input` width: 100%; padding: 12px; margin: 15px 0; border: 2px dotted #c0a080; border-radius: 15px; background: transparent; color: #8b7355; font-size: 16px; &:focus { outline: none; border-color: #8b7355; } &::placeholder { color: #c0a080; } `; const Button = styled.button` width: 100%; padding: 12px; margin-top: 20px; border: 2px dotted #8b7355; border-radius: 15px; background: transparent; color: #8b7355; font-size: 16px; cursor: pointer; &:hover { border-style: solid; background: #8b7355; color: white; } `; const Form4 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', marginBottom: 30, color: '#8b7355', fontWeight: 300 }}> DOTTED </h2> <Input type="email" placeholder="Email" /> <Input type="password" placeholder="Password" /> <Button type="submit">Sign In</Button> </Form> </Container> ); }; export default Form4; Form 5: Thin Border
Introduction: Extremely thin borders for an ultra-minimal, sophisticated look.
Features: 1px borders, subtle presence, elegant minimalism.
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: #ffffff; `; const Form = styled.form` background: transparent; padding: 50px; width: 350px; border: 1px solid #eee; `; const Input = styled.input` width: 100%; padding: 12px; margin: 15px 0; border: 1px solid #eee; background: transparent; color: #333; font-size: 16px; &:focus { outline: none; border-color: #999; } &::placeholder { color: #ccc; } `; const Button = styled.button` width: 100%; padding: 12px; margin-top: 20px; border: 1px solid #333; background: transparent; color: #333; font-size: 16px; cursor: pointer; &:hover { background: #333; color: white; } `; const Form5 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', marginBottom: 30, fontWeight: 300, color: '#999' }}> THIN LINE </h2> <Input type="email" placeholder="Email" /> <Input type="password" placeholder="Password" /> <Button type="submit">Sign In</Button> </Form> </Container> ); }; export default Form5; Form 6: Thick Border
Introduction: Bold, thick borders making a strong visual statement.
Features: Heavy borders, confident design, modern aesthetic.
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: #f5f5f5; `; const Form = styled.form` background: transparent; padding: 50px; width: 350px; border: 8px solid #333; `; const Input = styled.input` width: 100%; padding: 15px; margin: 20px 0; border: 4px solid #333; background: transparent; color: #333; font-size: 16px; font-weight: bold; &:focus { outline: none; background: #333; color: white; } &::placeholder { color: #999; font-weight: normal; } `; const Button = styled.button` width: 100%; padding: 15px; margin-top: 20px; border: 4px solid #333; background: transparent; color: #333; font-size: 16px; font-weight: bold; cursor: pointer; &:hover { background: #333; color: white; } `; const Form6 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', marginBottom: 30, fontWeight: 'bold', color: '#333' }}> BOLD </h2> <Input type="email" placeholder="Email" /> <Input type="password" placeholder="Password" /> <Button type="submit">Sign In</Button> </Form> </Container> ); }; export default Form6; Form 7: Gradient Border
Introduction: Form with beautiful gradient borders that transition colors.
Features: Gradient effects, color transitions, modern design.
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: #f0f0f0; `; const Form = styled.form` background: transparent; padding: 50px; width: 350px; border: 4px solid; border-image: linear-gradient(45deg, #ff6b6b, #4ecdc4) 1; `; const Input = styled.input` width: 100%; padding: 12px; margin: 15px 0; border: 2px solid; border-image: linear-gradient(45deg, #ff6b6b, #4ecdc4) 1; background: transparent; color: #333; font-size: 16px; &:focus { outline: none; border-image: linear-gradient(45deg, #4ecdc4, #ff6b6b) 1; } `; const Button = styled.button` width: 100%; padding: 12px; margin-top: 20px; border: 2px solid; border-image: linear-gradient(45deg, #ff6b6b, #4ecdc4) 1; background: transparent; color: #333; font-size: 16px; cursor: pointer; &:hover { border-image: linear-gradient(45deg, #4ecdc4, #ff6b6b) 1; } `; const Form7 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', marginBottom: 30, background: 'linear-gradient(45deg, #ff6b6b, #4ecdc4)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}> GRADIENT </h2> <Input type="email" placeholder="Email" /> <Input type="password" placeholder="Password" /> <Button type="submit">Sign In</Button> </Form> </Container> ); }; export default Form7; Form 8: Animated Border
Introduction: Form with animated borders that pulse or move continuously.
Features: Border animation, dynamic effects, attention-grabbing.
import React from 'react'; import styled, { keyframes } from 'styled-components'; const pulse = keyframes` 0% { border-color: #ff6b6b; } 50% { border-color: #4ecdc4; } 100% { border-color: #ff6b6b; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #1a1a1a; `; const Form = styled.form` background: transparent; padding: 50px; width: 350px; border: 3px solid; animation: ${pulse} 3s infinite; `; const Input = styled.input` width: 100%; padding: 12px; margin: 15px 0; border: 2px solid #ff6b6b; background: transparent; color: white; font-size: 16px; &:focus { outline: none; border-color: #4ecdc4; } &::placeholder { color: rgba(255,255,255,0.5); } `; const Button = styled.button` width: 100%; padding: 12px; margin-top: 20px; border: 2px solid #ff6b6b; background: transparent; color: white; font-size: 16px; cursor: pointer; &:hover { border-color: #4ecdc4; } `; const Form8 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', marginBottom: 30, color: 'white' }}> ANIMATED </h2> <Input type="email" placeholder="Email" /> <Input type="password" placeholder="Password" /> <Button type="submit">Sign In</Button> </Form> </Container> ); }; export default Form8; Form 9: Rounded Border
Introduction: Form with fully rounded corners for a softer, friendlier appearance.
Features: Pill-shaped elements, rounded corners, approachable design.
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: #f8f9fa; `; const Form = styled.form` background: transparent; padding: 50px; width: 350px; border: 2px solid #adb5bd; border-radius: 50px; `; const Input = styled.input` width: 100%; padding: 15px; margin: 15px 0; border: 2px solid #adb5bd; border-radius: 30px; background: transparent; color: #495057; font-size: 16px; text-align: center; &:focus { outline: none; border-color: #495057; } `; const Button = styled.button` width: 100%; padding: 15px; margin-top: 20px; border: 2px solid #495057; border-radius: 30px; background: transparent; color: #495057; font-size: 16px; cursor: pointer; &:hover { background: #495057; color: white; } `; const Form9 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', marginBottom: 30, color: '#495057' }}> ROUNDED </h2> <Input type="email" placeholder="Email" /> <Input type="password" placeholder="Password" /> <Button type="submit">Sign In</Button> </Form> </Container> ); }; export default Form9; Form 10: Square Border
Introduction: Sharp, square borders for a modern, industrial aesthetic.
Features: No border radius, geometric precision, contemporary feel.
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: #2c3e50; `; const Form = styled.form` background: transparent; padding: 50px; width: 350px; border: 4px solid #ecf0f1; `; const Input = styled.input` width: 100%; padding: 15px; margin: 15px 0; border: 2px solid #ecf0f1; background: transparent; color: #ecf0f1; font-size: 16px; &:focus { outline: none; background: #ecf0f1; color: #2c3e50; } &::placeholder { color: rgba(236, 240, 241, 0.5); } `; const Button = styled.button` width: 100%; padding: 15px; margin-top: 20px; border: 2px solid #ecf0f1; background: transparent; color: #ecf0f1; font-size: 16px; cursor: pointer; &:hover { background: #ecf0f1; color: #2c3e50; } `; const Form10 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', marginBottom: 30, color: '#ecf0f1' }}> SQUARE </h2> <Input type="email" placeholder="Email" /> <Input type="password" placeholder="Password" /> <Button type="submit">Sign In</Button> </Form> </Container> ); }; export default Form10; Form 11: Border with Shadow
Introduction: Clean borders enhanced with subtle shadows for depth.
Features: Box shadow, depth perception, layered effect.
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: #e9ecef; `; const Form = styled.form` background: transparent; padding: 50px; width: 350px; border: 2px solid #ced4da; box-shadow: 10px 10px 0 #adb5bd; `; const Input = styled.input` width: 100%; padding: 12px; margin: 15px 0; border: 2px solid #ced4da; background: transparent; color: #495057; font-size: 16px; box-shadow: 5px 5px 0 #adb5bd; &:focus { outline: none; box-shadow: 3px 3px 0 #adb5bd; } `; const Button = styled.button` width: 100%; padding: 12px; margin-top: 20px; border: 2px solid #495057; background: transparent; color: #495057; font-size: 16px; cursor: pointer; box-shadow: 5px 5px 0 #2c3e50; &:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 #2c3e50; } `; const Form11 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', marginBottom: 30, color: '#495057' }}> SHADOW </h2> <Input type="email" placeholder="Email" /> <Input type="password" placeholder="Password" /> <Button type="submit">Sign In</Button> </Form> </Container> ); }; export default Form11; Form 12: Border with Inner Shadow
Introduction: Borders combined with inset shadows for an engraved effect.
Features: Inset shadows, engraved look, tactile design.
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: #f1f3f5; `; const Form = styled.form` background: transparent; padding: 50px; width: 350px; border: 2px solid #dee2e6; box-shadow: inset 5px 5px 10px rgba(0,0,0,0.05); `; const Input = styled.input` width: 100%; padding: 12px; margin: 15px 0; border: 2px solid #dee2e6; background: transparent; color: #495057; font-size: 16px; box-shadow: inset 3px 3px 5px rgba(0,0,0,0.03); &:focus { outline: none; box-shadow: inset 4px 4px 8px rgba(0,0,0,0.05); } `; const Button = styled.button` width: 100%; padding: 12px; margin-top: 20px; border: 2px solid #495057; background: transparent; color: #495057; font-size: 16px; cursor: pointer; &:hover { box-shadow: inset 3px 3px 5px rgba(0,0,0,0.1); } `; const Form12 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', marginBottom: 30, color: '#495057' }}> INSET </h2> <Input type="email" placeholder="Email" /> <Input type="password" placeholder="Password" /> <Button type="submit">Sign In</Button> </Form> </Container> ); }; export default Form12; Form 13: Colored Border
Introduction: Vibrant colored borders to add personality and brand identity.
Features: Color psychology, brand alignment, visual appeal.
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: #ffffff; `; const Form = styled.form` background: transparent; padding: 50px; width: 350px; border: 4px solid #ff6b6b; `; const Input = styled.input` width: 100%; padding: 12px; margin: 15px 0; border: 2px solid #4ecdc4; background: transparent; color: #333; font-size: 16px; &:focus { outline: none; border-color: #ff6b6b; } `; const Button = styled.button` width: 100%; padding: 12px; margin-top: 20px; border: 2px solid #45b7d1; background: transparent; color: #45b7d1; font-size: 16px; cursor: pointer; &:hover { background: #45b7d1; color: white; } `; const Form13 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', marginBottom: 30, color: '#ff6b6b' }}> COLORFUL </h2> <Input type="email" placeholder="Email" /> <Input type="password" placeholder="Password" /> <Button type="submit">Sign In</Button> </Form> </Container> ); }; export default Form13; Form 14: Border with Label
Introduction: Clean borders with floating labels for enhanced usability.
Features: Floating labels, space optimization, modern UX.
import React, { useState } from 'react'; import styled from 'styled-components'; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #f8f9fa; `; const Form = styled.form` background: transparent; padding: 50px; width: 350px; border: 2px solid #e9ecef; `; const InputGroup = styled.div` position: relative; margin: 35px 0; `; const Input = styled.input` width: 100%; padding: 12px 0; border: none; border-bottom: 2px solid #dee2e6; background: transparent; color: #495057; font-size: 16px; &:focus { outline: none; border-bottom-color: #007bff; } &:focus ~ label, &:not(:placeholder-shown) ~ label { top: -20px; font-size: 12px; color: #007bff; } `; const Label = styled.label` position: absolute; top: 12px; left: 0; color: #6c757d; transition: all 0.3s; pointer-events: none; `; const Form14 = () => { const [formData, setFormData] = useState({ email: '', password: '' }); return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', marginBottom: 40, color: '#495057' }}> FLOATING LABELS </h2> <InputGroup> <Input type="email" placeholder=" " value={formData.email} onChange={(e) => setFormData({...formData, email: e.target.value})} /> <Label>Email</Label> </InputGroup> <InputGroup> <Input type="password" placeholder=" " value={formData.password} onChange={(e) => setFormData({...formData, password: e.target.value})} /> <Label>Password</Label> </InputGroup> <button type="submit" style={buttonStyle}> Sign In </button> </Form> </Container> ); }; const buttonStyle = { width: '100%', padding: '12px', marginTop: '20px', border: '2px solid #007bff', background: 'transparent', color: '#007bff', fontSize: '16px', cursor: 'pointer' }; export default Form14; Form 15: Border with Icons
Introduction: Minimal borders combined with input icons for visual guidance.
Features: Icon integration, visual cues, enhanced UX.
import React from 'react'; import styled from 'styled-components'; import { FiMail, FiLock, FiUser } from 'react-icons/fi'; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #ffffff; `; const Form = styled.form` background: transparent; padding: 50px; width: 350px; border: 1px solid #e0e0e0; `; const InputWrapper = styled.div` display: flex; align-items: center; margin: 15px 0; border-bottom: 1px solid #e0e0e0; &:focus-within { border-bottom-color: #000; } `; const Icon = styled.div` color: #999; margin-right: 10px; font-size: 18px; `; const Input = styled.input` flex: 1; padding: 12px 0; border: none; background: transparent; color: #333; font-size: 16px; &:focus { outline: none; } `; const Button = styled.button` width: 100%; padding: 12px; margin-top: 30px; border: 1px solid #333; background: transparent; color: #333; font-size: 16px; cursor: pointer; &:hover { background: #333; color: white; } `; const Form15 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', marginBottom: 40, fontWeight: 300 }}> ICONIC </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">Sign In</Button> </Form> </Container> ); }; export default Form15; Form 16: Border with Underline
Introduction: Forms with animated underline effects on focus.
Features: Underline animation, focus effects, smooth transitions.
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: #fafafa; `; const Form = styled.form` background: transparent; padding: 50px; width: 350px; `; const InputGroup = styled.div` position: relative; margin: 30px 0; `; const Input = styled.input` width: 100%; padding: 10px 0; border: none; border-bottom: 2px solid #ddd; background: transparent; color: #333; font-size: 16px; &:focus { outline: none; } &:focus ~ span::after { width: 100%; } `; const Underline = styled.span` position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; overflow: hidden; &::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: #007bff; transition: width 0.3s; } `; const Button = styled.button` width: 100%; padding: 12px; margin-top: 30px; border: 2px solid #007bff; background: transparent; color: #007bff; font-size: 16px; cursor: pointer; position: relative; overflow: hidden; &:hover { color: white; } &:hover::after { width: 100%; } &::after { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 100%; background: #007bff; transition: width 0.3s; z-index: -1; } `; const Form16 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', marginBottom: 40, color: '#333' }}> UNDERLINE </h2> <InputGroup> <Input type="email" placeholder="Email" /> <Underline /> </InputGroup> <InputGroup> <Input type="password" placeholder="Password" /> <Underline /> </InputGroup> <Button type="submit">Sign In</Button> </Form> </Container> ); }; export default Form16; Form 17: Border with Corner Accents
Introduction: Minimal form with decorative corner accents for visual interest.
Features: Corner decorations, unique styling, artistic touch.
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: #f0f0f0; `; const Form = styled.form` background: transparent; padding: 50px; width: 350px; position: relative; &::before, &::after { content: ''; position: absolute; width: 30px; height: 30px; } &::before { top: 0; left: 0; border-top: 3px solid #333; border-left: 3px solid #333; } &::after { bottom: 0; right: 0; border-bottom: 3px solid #333; border-right: 3px solid #333; } `; const Input = styled.input` width: 100%; padding: 12px; margin: 15px 0; border: none; border-bottom: 1px solid #ddd; background: transparent; color: #333; font-size: 16px; &:focus { outline: none; border-bottom-color: #333; } `; const Button = styled.button` width: 100%; padding: 12px; margin-top: 30px; border: 2px solid #333; background: transparent; color: #333; font-size: 16px; cursor: pointer; &:hover { background: #333; color: white; } `; const Form17 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', marginBottom: 40, color: '#333' }}> CORNER </h2> <Input type="email" placeholder="Email" /> <Input type="password" placeholder="Password" /> <Button type="submit">Sign In</Button> </Form> </Container> ); }; export default Form17; Form 18: Border with Top Line Only
Introduction: Ultra-minimal form with only top borders for a unique look.
Features: Single border line, asymmetric design, modern aesthetic.
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: #ffffff; `; const Form = styled.form` background: transparent; padding: 40px 50px; width: 350px; border-top: 4px solid #000; `; const Input = styled.input` width: 100%; padding: 12px 0; margin: 20px 0; border: none; border-top: 2px solid #ccc; background: transparent; color: #333; font-size: 16px; text-align: center; &:focus { outline: none; border-top-color: #000; } &::placeholder { color: #999; } `; const Button = styled.button` width: 100%; padding: 12px; margin-top: 30px; border: none; border-top: 2px solid #000; background: transparent; color: #000; font-size: 16px; cursor: pointer; &:hover { border-top-width: 4px; } `; const Form18 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', marginBottom: 30, fontWeight: 300 }}> TOP LINE </h2> <Input type="email" placeholder="EMAIL" /> <Input type="password" placeholder="PASSWORD" /> <Button type="submit">SIGN IN</Button> </Form> </Container> ); }; export default Form18; Form 19: Border with Bottom Line Only
Introduction: Minimal form with bottom borders creating a grounded feeling.
Features: Bottom emphasis, grounded design, clean aesthetic.
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: #f5f5f5; `; const Form = styled.form` background: transparent; padding: 50px; width: 350px; border-bottom: 4px solid #666; `; const Input = styled.input` width: 100%; padding: 12px; margin: 15px 0; border: none; border-bottom: 2px solid #ccc; background: transparent; color: #333; font-size: 16px; &:focus { outline: none; border-bottom-color: #666; } `; const Button = styled.button` width: 100%; padding: 12px; margin-top: 30px; border: 2px solid #666; background: transparent; color: #666; font-size: 16px; cursor: pointer; &:hover { background: #666; color: white; } `; const Form19 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', marginBottom: 30, color: '#666' }}> BOTTOM LINE </h2> <Input type="email" placeholder="Email" /> <Input type="password" placeholder="Password" /> <Button type="submit">Sign In</Button> </Form> </Container> ); }; export default Form19; Form 20: Border with Left Line Only
Introduction: Asymmetric form with left borders for a unique visual flow.
Features: Left alignment, asymmetric design, directional focus.
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: #fafafa; `; const Form = styled.form` background: transparent; padding: 50px; width: 350px; border-left: 4px solid #007bff; `; const Input = styled.input` width: 100%; padding: 12px; margin: 15px 0; border: none; border-left: 2px solid #ccc; background: transparent; color: #333; font-size: 16px; padding-left: 15px; &:focus { outline: none; border-left-color: #007bff; } `; const Button = styled.button` width: 100%; padding: 12px; margin-top: 30px; border: 2px solid #007bff; background: transparent; color: #007bff; font-size: 16px; cursor: pointer; &:hover { background: #007bff; color: white; } `; const Form20 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', marginBottom: 30, color: '#007bff' }}> LEFT LINE </h2> <Input type="email" placeholder="Email" /> <Input type="password" placeholder="Password" /> <Button type="submit">Sign In</Button> </Form> </Container> ); }; export default Form20; Form 21: Border with Right Line Only
Features: Right-aligned borders, unique asymmetry, modern design.
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: #f0f0f0; `; const Form = styled.form` background: transparent; padding: 50px; width: 350px; border-right: 4px solid #e83e8c; text-align: right; `; const Input = styled.input` width: 100%; padding: 12px; margin: 15px 0; border: none; border-right: 2px solid #ccc; background: transparent; color: #333; font-size: 16px; text-align: right; padding-right: 15px; &:focus { outline: none; border-right-color: #e83e8c; } `; const Button = styled.button` width: 100%; padding: 12px; margin-top: 30px; border: 2px solid #e83e8c; background: transparent; color: #e83e8c; font-size: 16px; cursor: pointer; &:hover { background: #e83e8c; color: white; } `; const Form21 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', marginBottom: 30, color: '#e83e8c' }}> RIGHT LINE </h2> <Input type="email" placeholder="Email" /> <Input type="password" placeholder="Password" /> <Button type="submit">Sign In</Button> </Form> </Container> ); }; export default Form21; Form 22: Border with Diagonal Lines
Features: Diagonal border accents, dynamic angles, modern art style.
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: #ffffff; `; const Form = styled.form` background: transparent; padding: 50px; width: 350px; position: relative; &::before { content: ''; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; border: 2px solid transparent; border-image: repeating-linear-gradient(45deg, #333, #333 10px, transparent 10px, transparent 20px); border-image-slice: 1; pointer-events: none; } `; const Input = styled.input` width: 100%; padding: 12px; margin: 15px 0; border: 2px solid #333; background: transparent; color: #333; font-size: 16px; transform: skewX(-5deg); &:focus { outline: none; transform: skewX(0); } `; const Button = styled.button` width: 100%; padding: 12px; margin-top: 30px; border: 2px solid #333; background: transparent; color: #333; font-size: 16px; cursor: pointer; transform: skewX(-5deg); &:hover { transform: skewX(0); background: #333; color: white; } `; const Form22 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', marginBottom: 30, transform: 'skewX(-5deg)' }}> DIAGONAL </h2> <Input type="email" placeholder="Email" /> <Input type="password" placeholder="Password" /> <Button type="submit">Sign In</Button> </Form> </Container> ); }; export default Form22; Form 23: Border with Zigzag
Features: Zigzag border pattern, playful design, unique outline.
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: #f8f0e7; `; const Form = styled.form` background: transparent; padding: 50px; width: 350px; position: relative; &::before { content: ''; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; background: linear-gradient(135deg, #8b7355 3px, transparent 3px) 0 0, linear-gradient(225deg, #8b7355 3px, transparent 3px) 10px 0, linear-gradient(315deg, #8b7355 3px, transparent 3px) 0 10px, linear-gradient(45deg, #8b7355 3px, transparent 3px) 10px 10px; background-size: 20px 20px; pointer-events: none; } `; const Input = styled.input` width: 100%; padding: 12px; margin: 15px 0; border: 2px solid #8b7355; background: transparent; color: #8b7355; font-size: 16px; &:focus { outline: none; background: rgba(139, 115, 85, 0.05); } `; const Button = styled.button` width: 100%; padding: 12px; margin-top: 20px; border: 2px solid #8b7355; background: transparent; color: #8b7355; font-size: 16px; cursor: pointer; &:hover { background: #8b7355; color: white; } `; const Form23 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', marginBottom: 30, color: '#8b7355' }}> ZIGZAG </h2> <Input type="email" placeholder="Email" /> <Input type="password" placeholder="Password" /> <Button type="submit">Sign In</Button> </Form> </Container> ); }; export default Form23; Form 24: Border with Waves
Features: Wave-shaped borders, organic feel, flowing design.
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: #e0f2fe; `; const Form = styled.form` background: transparent; padding: 50px; width: 350px; border: 4px solid #0284c7; border-radius: 40px 40px 60px 60px; `; const Input = styled.input` width: 100%; padding: 12px; margin: 15px 0; border: 2px solid #0284c7; border-radius: 20px 20px 30px 30px; background: transparent; color: #0284c7; font-size: 16px; text-align: center; &:focus { outline: none; background: rgba(2, 132, 199, 0.05); } `; const Button = styled.button` width: 100%; padding: 12px; margin-top: 20px; border: 2px solid #0284c7; border-radius: 20px 20px 30px 30px; background: transparent; color: #0284c7; font-size: 16px; cursor: pointer; &:hover { background: #0284c7; color: white; } `; const Form24 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', marginBottom: 30, color: '#0284c7' }}> WAVES </h2> <Input type="email" placeholder="Email" /> <Input type="password" placeholder="Password" /> <Button type="submit">Sign In</Button> </Form> </Container> ); }; export default Form24; Form 25: Border with Dots
Features: Dotted border pattern, playful and lighthearted design.
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: #fdf2f8; `; const Form = styled.form` background: transparent; padding: 50px; width: 350px; border: 4px dotted #db2777; border-radius: 30px; `; const Input = styled.input` width: 100%; padding: 12px; margin: 15px 0; border: 2px dotted #db2777; border-radius: 20px; background: transparent; color: #db2777; font-size: 16px; text-align: center; &:focus { outline: none; border-style: solid; } `; const Button = styled.button` width: 100%; padding: 12px; margin-top: 20px; border: 2px dotted #db2777; border-radius: 20px; background: transparent; color: #db2777; font-size: 16px; cursor: pointer; &:hover { border-style: solid; background: #db2777; color: white; } `; const Form25 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', marginBottom: 30, color: '#db2777' }}> DOTS </h2> <Input type="email" placeholder="Email" /> <Input type="password" placeholder="Password" /> <Button type="submit">Sign In</Button> </Form> </Container> ); }; export default Form25; Form 26: Border with Hearts
Features: Heart-shaped border decorations, romantic and fun design.
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: #fff1f0; `; const Form = styled.form` background: transparent; padding: 50px; width: 350px; position: relative; &::before, &::after { content: '❤️'; position: absolute; font-size: 20px; } &::before { top: -10px; left: -10px; } &::after { bottom: -10px; right: -10px; } `; const Input = styled.input` width: 100%; padding: 12px; margin: 15px 0; border: 2px solid #ff6b6b; border-radius: 15px; background: transparent; color: #ff6b6b; font-size: 16px; &:focus { outline: none; box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.2); } `; const Button = styled.button` width: 100%; padding: 12px; margin-top: 20px; border: 2px solid #ff6b6b; border-radius: 15px; background: transparent; color: #ff6b6b; font-size: 16px; cursor: pointer; &:hover { background: #ff6b6b; color: white; } `; const Form26 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', marginBottom: 30, color: '#ff6b6b' }}> HEARTS </h2> <Input type="email" placeholder="Email" /> <Input type="password" placeholder="Password" /> <Button type="submit">Sign In</Button> </Form> </Container> ); }; export default Form26; Form 27: Border with Stars
Features: Star-shaped accents, magical and whimsical design.
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: #f0f9ff; `; const Form = styled.form` background: transparent; padding: 50px; width: 350px; position: relative; &::before { content: '⭐⭐⭐'; position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 20px; letter-spacing: 10px; } &::after { content: '⭐⭐⭐'; position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); font-size: 20px; letter-spacing: 10px; } `; const Input = styled.input` width: 100%; padding: 12px; margin: 15px 0; border: 2px solid #fbbf24; border-radius: 10px; background: transparent; color: #b45309; font-size: 16px; &:focus { outline: none; border-color: #b45309; } `; const Button = styled.button` width: 100%; padding: 12px; margin-top: 20px; border: 2px solid #fbbf24; border-radius: 10px; background: transparent; color: #b45309; font-size: 16px; cursor: pointer; &:hover { background: #fbbf24; color: white; } `; const Form27 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', marginBottom: 30, color: '#b45309' }}> STARS </h2> <Input type="email" placeholder="Email" /> <Input type="password" placeholder="Password" /> <Button type="submit">Sign In</Button> </Form> </Container> ); }; export default Form27; Form 28: Border with Geometric Shapes
Features: Geometric shape borders, modern and artistic design.
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: #1e1e2f; `; const Form = styled.form` background: transparent; padding: 50px; width: 350px; position: relative; &::before { content: '▲▲▲'; position: absolute; top: -20px; left: 50%; transform: translateX(-50%); color: #4facfe; font-size: 24px; letter-spacing: 15px; } &::after { content: '◆◆◆'; position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); color: #00f2fe; font-size: 24px; letter-spacing: 15px; } `; const Input = styled.input` width: 100%; padding: 12px; margin: 15px 0; border: 2px solid #4facfe; background: transparent; color: white; font-size: 16px; clip-path: polygon(0% 0%, 100% 0%, 95% 100%, 5% 100%); &:focus { outline: none; border-color: #00f2fe; } `; const Button = styled.button` width: 100%; padding: 12px; margin-top: 20px; border: 2px solid #00f2fe; background: transparent; color: white; font-size: 16px; cursor: pointer; clip-path: polygon(0% 0%, 100% 0%, 95% 100%, 5% 100%); &:hover { background: linear-gradient(135deg, #4facfe, #00f2fe); } `; const Form28 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', marginBottom: 30, color: 'white' }}> GEOMETRIC </h2> <Input type="email" placeholder="Email" /> <Input type="password" placeholder="Password" /> <Button type="submit">Sign In</Button> </Form> </Container> ); }; export default Form28; Form 29: Border with Gradient Line
Features: Gradient-colored borders, smooth color transitions.
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: #0a0a0a; `; const Form = styled.form` background: transparent; padding: 50px; width: 350px; border: 4px solid; border-image: linear-gradient(45deg, #f093fb, #f5576c) 1; `; const Input = styled.input` width: 100%; padding: 12px; margin: 15px 0; border: 2px solid; border-image: linear-gradient(45deg, #f093fb, #f5576c) 1; background: transparent; color: white; font-size: 16px; &:focus { outline: none; } `; const Button = styled.button` width: 100%; padding: 12px; margin-top: 20px; border: 2px solid; border-image: linear-gradient(45deg, #f093fb, #f5576c) 1; background: transparent; color: white; font-size: 16px; cursor: pointer; &:hover { background: linear-gradient(45deg, #f093fb, #f5576c); } `; const Form29 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', marginBottom: 30, background: 'linear-gradient(45deg, #f093fb, #f5576c)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}> GRADIENT LINE </h2> <Input type="email" placeholder="Email" /> <Input type="password" placeholder="Password" /> <Button type="submit">Sign In</Button> </Form> </Container> ); }; export default Form29; Form 30: Border with Neon Glow
Features: Neon glowing borders, vibrant and eye-catching design.
import React from 'react'; import styled, { keyframes } from 'styled-components'; const glow = keyframes` 0% { box-shadow: 0 0 5px #0ff, 0 0 10px #0ff, 0 0 15px #0ff; } 50% { box-shadow: 0 0 20px #0ff, 0 0 30px #0ff, 0 0 40px #0ff; } 100% { box-shadow: 0 0 5px #0ff, 0 0 10px #0ff, 0 0 15px #0ff; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #000; `; const Form = styled.form` background: transparent; padding: 50px; width: 350px; border: 2px solid #0ff; animation: ${glow} 2s infinite; `; const Input = styled.input` width: 100%; padding: 12px; margin: 15px 0; border: 2px solid #0ff; background: transparent; color: #0ff; font-size: 16px; &:focus { outline: none; box-shadow: 0 0 10px #0ff; } `; const Button = styled.button` width: 100%; padding: 12px; margin-top: 20px; border: 2px solid #0ff; background: transparent; color: #0ff; font-size: 16px; cursor: pointer; &:hover { background: #0ff; color: #000; box-shadow: 0 0 20px #0ff; } `; const Form30 = () => { return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', marginBottom: 30, color: '#0ff' }}> NEON GLOW </h2> <Input type="email" placeholder="Email" /> <Input type="password" placeholder="Password" /> <Button type="submit">Sign In</Button> </Form> </Container> ); }; export default Form30; Due to length constraints, here are the remaining 70 forms with their unique features in condensed format:
Form 31: Border with Metallic Effect
Features: Metallic-looking borders, chrome finish, shiny appearance.
Form 32: Border with Wood Texture
Features: Wood-grain border texture, natural and rustic design.
Form 33: Border with Marble Texture
Features: Marble pattern borders, elegant and luxurious feel.
Form 34: Border with Leather Texture
Features: Leather-like borders, sophisticated and classic design.
Form 35: Border with Fabric Texture
Features: Fabric pattern borders, soft and textile-like appearance.
Form 36: Border with Paper Texture
Features: Paper-like borders, organic and handcrafted feel.
Form 37: Border with Glitch Effect
Features: Glitched borders, digital distortion, modern tech style.
Form 38: Border with Pixel Effect
Features: Pixelated borders, retro gaming aesthetic.
Form 39: Border with Scribble Effect
Features: Hand-drawn scribble borders, artistic and creative.
Form 40: Border with Tape Effect
Features: Washi tape-style borders, crafty and decorative.
Form 41: Border with Shadow Box
Features: Shadow box effect, layered depth, dimensional.
Form 42: Border with Inner Frame
Features: Double frame effect, nested borders, sophisticated.
Form 43: Border with Corner Fold
Features: Folded corner effect, paper-like, interactive.
Form 44: Border with Torn Edge
Features: Torn paper edges, organic and distressed.
Form 45: Border with Ripped Effect
Features: Ripped border edges, grunge aesthetic.
Form 46: Border with Cut-out Effect
Features: Cut-out sections, negative space, modern.
Form 47: Border with Overlap Effect
Features: Overlapping borders, layered design.
Form 48: Border with Interlace Effect
Features: Interwoven borders, Celtic knot style.
Form 49: Border with Braid Effect
Features: Braided border pattern, textured look.
Form 50: Border with Knot Effect
Features: Knotted borders, intricate design.
Form 51: Border with Chain Effect
Features: Chain-link borders, industrial style.
Form 52: Border with Rope Effect
Features: Rope-twist borders, nautical theme.
Form 53: Border with Bead Effect
Features: Beaded border pattern, decorative.
Form 54: Border with Ribbon Effect
Features: Ribbon-style borders, elegant and flowing.
Form 55: Border with Lace Effect
Features: Lace-pattern borders, delicate and ornate.
Form 56: Border with Stitch Effect
Features: Sewn stitch borders, fabric-like appearance.
Form 57: Border with Zipper Effect
Features: Zipper-style border, edgy and modern.
Form 58: Border with Button Effect
Features: Button-accented borders, playful.
Form 59: Border with Stud Effect
Features: Metal stud borders, punk rock style.
Form 60: Border with Gem Effect
Features: Gemstone borders, luxurious and sparkly.
Form 61: Border with Crystal Effect
Features: Crystal-shaped borders, geometric facets.
Form 62: Border with Pearl Effect
Features: Pearl strand borders, elegant and classy.
Form 63: Border with Shell Effect
Features: Seashell borders, beachy theme.
Form 64: Border with Leaf Effect
Features: Leaf-pattern borders, nature-inspired.
Form 65: Border with Flower Effect
Features: Floral borders, romantic and beautiful.
Form 66: Border with Vine Effect
Features: Vine-twist borders, organic growth.
Form 67: Border with Feather Effect
Features: Feather-pattern borders, light and airy.
Form 68: Border with Scale Effect
Features: Fish-scale borders, aquatic theme.
Form 69: Border with Honeycomb Effect
Features: Hexagonal honeycomb borders, geometric.
Form 70: Border with Spider Web Effect
Features: Web-pattern borders, spooky theme.
Form 71: Border with Lightning Effect
Features: Lightning bolt borders, electric energy.
Form 72: Border with Flame Effect
Features: Flame-shaped borders, fiery design.
Form 73: Border with Ice Effect
Features: Ice crystal borders, frozen theme.
Form 74: Border with Rain Effect
Features: Raindrop borders, weather-inspired.
Form 75: Border with Snow Effect
Features: Snowflake borders, winter wonderland.
Form 76: Border with Cloud Effect
Features: Cloud-shaped borders, dreamy and soft.
Form 77: Border with Star Effect
Features: Star-shaped borders, celestial theme.
Form 78: Border with Moon Effect
Features: Crescent moon borders, night sky.
Form 79: Border with Sun Effect
Features: Sun ray borders, bright and warm.
Form 80: Border with Rainbow Effect
Features: Rainbow-striped borders, colorful.
Form 81: Border with Confetti Effect
Features: Confetti-dotted borders, celebration.
Form 82: Border with Glitter Effect
Features: Glitter-sparkle borders, festive.
Form 83: Border with Hologram Effect
Features: Holographic borders, iridescent.
Form 84: Border with Prism Effect
Features: Prismatic color borders, rainbow light.
Form 85: Border with Kaleidoscope Effect
Features: Kaleidoscopic patterns, psychedelic.
Form 86: Border with Mosaic Effect
Features: Mosaic tile borders, artistic.
Form 87: Border with Stained Glass Effect
Features: Stained glass borders, church-like.
Form 88: Border with Mural Effect
Features: Painted mural borders, artistic.
Form 89: Border with Graffiti Effect
Features: Graffiti-style borders, street art.
Form 90: Border with Stencil Effect
Features: Stenciled borders, industrial design.
Form 91: Border with Stamp Effect
Features: Postage stamp borders, vintage.
Form 92: Border with Seal Effect
Features: Wax seal borders, official look.
Form 93: Border with Ribbon Banner Effect
Features: Banner-style borders, promotional.
Form 94: Border with Price Tag Effect
Features: Price tag borders, retail theme.
Form 95: Border with Ticket Effect
Features: Ticket stub borders, event style.
Form 96: Border with Receipt Effect
Features: Receipt paper borders, transaction.
Form 97: Border with Envelope Effect
Features: Envelope-style borders, mail theme.
Form 98: Border with Package Effect
Features: Package wrap borders, delivery.
Form 99: Border with Gift Effect
Features: Gift wrap borders, present theme.
Form 100: Border with Ribbon Bow Effect
Features: Bow-accented borders, gift-wrapped.
How to Use All 100 Forms
- Create a new React app
- Install dependencies:
npm install styled-components react-icons
- Create a component for each form in separate files
- Import and use them in your App.js with a selector:
import React, { useState } from 'react'; import Form1 from './components/Form1'; import Form2 from './components/Form2'; // ... import all forms function App() { const [currentForm, setCurrentForm] = useState(1); const forms = { 1: <Form1 />, 2: <Form2 />, // ... map all 100 forms }; return ( <div> <select onChange={(e) => setCurrentForm(Number(e.target.value))} style={selectorStyle} > {Array.from({ length: 100 }, (_, i) => ( <option key={i + 1} value={i + 1}> Minimal Border Form {i + 1} </option> ))} </select> {forms[currentForm]} </div> ); } const selectorStyle = { position: 'fixed', top: '20px', right: '20px', padding: '10px', borderRadius: '5px', border: '1px solid #ccc', background: 'white', zIndex: 1000, cursor: 'pointer' }; export default App; Each form provides a unique approach to minimal border design with different decorative elements, textures, and effects while maintaining clean, simple aesthetics throughout all 100 variations!