form text

Forked from> @thuggys/text-rpg-ui

This tailwind example is contributed by Severino Victtorino, on 19-Apr-2025. Component is made with Tailwind CSS v3. It is responsive.

Form

Author Severino Victtorino

849

2

Fork Fullscreen

<script>
    tailwind.config = {
        theme: {
            extend: {
                animation: {
                    'fade-in': 'fade-in 0.5s ease-out',
                    'slide-up': 'slide-up 0.7s ease-out',
                    'pixel-shift': 'pixel-shift 0.2s steps(2) infinite',
                    'neon-pulse': 'neon-pulse 2s ease-in-out infinite',
                    'hover-bounce': 'hover-bounce 2s ease-in-out infinite',
                    'text-flicker': 'text-flicker 1.5s linear infinite',
                    'terminal-blink': 'terminal-blink 1s steps(2) infinite',
                },
                keyframes: {
                    'fade-in': {
                        '0%': { opacity: '0' },
                        '100%': { opacity: '1' }
                    },
                    'slide-up': {
                        '0%': { transform: 'translateY(20px)', opacity: '0' },
                        '100%': { transform: 'translateY(0)', opacity: '1' }
                    },
                    'pixel-shift': {
                        '0%, 100%': { transform: 'translateX(0)' },
                        '50%': { transform: 'translateX(2px)' }
                    },
                    'neon-pulse': {
                        '0%, 100%': { 
                            textShadow: '0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #5271ff, 0 0 82px #5271ff, 0 0 92px #5271ff, 0 0 102px #5271ff, 0 0 151px #5271ff'
                        },
                        '50%': { 
                            textShadow: '0 0 4px #fff, 0 0 7px #fff, 0 0 18px #fff, 0 0 38px #5271ff, 0 0 73px #5271ff, 0 0 80px #5271ff, 0 0 94px #5271ff, 0 0 140px #5271ff'
                        }
                    },
                    'hover-bounce': {
                        '0%, 100%': { transform: 'translateY(0)' },
                        '50%': { transform: 'translateY(-5px)' }
                    },
                    'text-flicker': {
                        '0%, 100%': { opacity: '1' },
                        '50%': { opacity: '0.7' }
                    },
                    'terminal-blink': {
                        '0%, 100%': { opacity: '1' },
                        '50%': { opacity: '0' }
                    }
                }
            }
        }
    };
</script>
</head>
<body class="bg-neutral-950 min-h-[100dvh]">
    
    <div class="relative p-3 sm:p-4 md:p-6 lg:p-8 min-h-[100dvh] flex flex-col">
        
        <div class="fixed inset-0 bg-[radial-gradient(#1a1a1a_1px,transparent_1px)] [background-size:16px_16px] opacity-50"></div>
        
        <div class="relative max-w-5xl mx-auto w-full flex-1 flex flex-col">
            
            <header class="mb-4 sm:mb-6">
                <h1 class="text-xl sm:text-2xl md:text-3xl font-bold text-white animate-neon-pulse mb-2 text-center sm:text-left">Crônicas Cibernéticas</h1>
                <div class="flex items-center gap-2 sm:gap-4 text-sm flex-wrap justify-center sm:justify-start">
                    <span class="text-[#5271ff] whitespace-nowrap">Nível 23</span>
                    <div class="h-1.5 w-32 sm:w-48 bg-neutral-800 rounded-full overflow-hidden">
                        <div class="h-full w-3/4 bg-[#5271ff] rounded-full"></div>
                    </div>
                    <span class="text-neutral-400">75%</span>
                </div>
            </header>
            
            <div class="grid grid-cols-1 lg:grid-cols-12 gap-4 sm:gap-6 flex-1">
                
                <div class="lg:col-span-8 space-y-4 sm:space-y-6 order-2 lg:order-1">
                    
                    <div class="bg-neutral-900/80 backdrop-blur border border-[#5271ff]/20 rounded-lg p-3 sm:p-4 md:p-6">
                        <div class="space-y-3 sm:space-y-4 text-neutral-300 text-sm sm:text-base">
                            <p class="animate-fade-in">As ruas iluminadas por neon de Neo-Tóquio se estendem à sua frente, um labirinto de anúncios holográficos e becos cheios de vapor.</p>
                            <p class="animate-fade-in" style="animation-delay: 0.2s">Uma figura misteriosa se aproxima das sombras, suas melhorias cibernéticas brilhando suavemente na escuridão.</p>
                            <p class="animate-text-flicker text-[#5271ff]">> O que você faz?</p>
                        </div>
                    </div>
                    
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-2 sm:gap-3">
                        <button class="px-3 sm:px-4 py-2.5 sm:py-3 bg-neutral-900 border border-[#5271ff]/20 rounded-lg text-neutral-400 hover:text-white hover:border-[#5271ff] hover:shadow-[0_0_15px_rgba(82,113,255,0.3)] transition-all duration-300 text-left text-sm sm:text-base">
                            <span class="text-[#5271ff]">1.</span> Aproximar-se cautelosamente
                        </button>
                        <button class="px-3 sm:px-4 py-2.5 sm:py-3 bg-neutral-900 border border-[#5271ff]/20 rounded-lg text-neutral-400 hover:text-white hover:border-[#5271ff] hover:shadow-[0_0_15px_rgba(82,113,255,0.3)] transition-all duration-300 text-left text-sm sm:text-base">
                            <span class="text-[#5271ff]">2.</span> Esconder-se nas sombras
                        </button>
                        <button class="px-3 sm:px-4 py-2.5 sm:py-3 bg-neutral-900 border border-[#5271ff]/20 rounded-lg text-neutral-400 hover:text-white hover:border-[#5271ff] hover:shadow-[0_0_15px_rgba(82,113,255,0.3)] transition-all duration-300 text-left text-sm sm:text-base">
                            <span class="text-[#5271ff]">3.</span> Preparar sua arma
                        </button>
                        <button class="px-3 sm:px-4 py-2.5 sm:py-3 bg-neutral-900 border border-[#5271ff]/20 rounded-lg text-neutral-400 hover:text-white hover:border-[#5271ff] hover:shadow-[0_0_15px_rgba(82,113,255,0.3)] transition-all duration-300 text-left text-sm sm:text-base">
                            <span class="text-[#5271ff]">4.</span> Pedir reforços
                        </button>
                    </div>
                </div>
                
                <aside class="lg:col-span-4 space-y-4 sm:space-y-6 order-1 lg:order-2">
                    
                    <div class="bg-neutral-900/80 backdrop-blur border border-[#5271ff]/20 rounded-lg p-3 sm:p-4">
                        <h2 class="text-white font-bold mb-3 sm:mb-4 relative inline-block text-sm sm:text-base">
                            Estatísticas do Personagem
                            <span class="absolute -right-4 top-0 text-[#5271ff] animate-pixel-shift">_</span>
                        </h2>
                        <div class="space-y-2 sm:space-y-3">
                            <div>
                                <div class="flex justify-between text-xs sm:text-sm mb-1">
                                    <span class="text-neutral-400">Saúde</span>
                                    <span class="text-[#5271ff]">85/100</span>
                                </div>
                                <div class="h-1.5 bg-neutral-800 rounded-full overflow-hidden">
                                    <div class="h-full w-[85%] bg-[#5271ff] rounded-full"></div>
                                </div>
                            </div>
                            <div>
                                <div class="flex justify-between text-xs sm:text-sm mb-1">
                                    <span class="text-neutral-400">Energia</span>
                                    <span class="text-[#5271ff]">60/100</span>
                                </div>
                                <div class="h-1.5 bg-neutral-800 rounded-full overflow-hidden">
                                    <div class="h-full w-[60%] bg-[#5271ff] rounded-full"></div>
                                </div>
                            </div>
                            <div>
                                <div class="flex justify-between text-xs sm:text-sm mb-1">
                                    <span class="text-neutral-400">Escudo</span>
                                    <span class="text-[#5271ff]">40/100</span>
                                </div>
                                <div class="h-1.5 bg-neutral-800 rounded-full overflow-hidden">
                                    <div class="h-full w-[40%] bg-[#5271ff] rounded-full"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-neutral-900/80 backdrop-blur border border-[#5271ff]/20 rounded-lg p-3 sm:p-4">
                        <h2 class="text-white font-bold mb-3 sm:mb-4 relative inline-block text-sm sm:text-base">
                            Inventário
                            <span class="absolute -right-4 top-0 text-[#5271ff] animate-pixel-shift">_</span>
                        </h2>
                        <div class="grid grid-cols-2 gap-2">
                            <div class="p-2 bg-neutral-900 border border-[#5271ff]/20 rounded text-xs sm:text-sm text-neutral-400 hover:text-white hover:border-[#5271ff] transition-colors">
                                Pistola de Plasma
                            </div>
                            <div class="p-2 bg-neutral-900 border border-[#5271ff]/20 rounded text-xs sm:text-sm text-neutral-400 hover:text-white hover:border-[#5271ff] transition-colors">
                                Kit Médico
                            </div>
                            <div class="p-2 bg-neutral-900 border border-[#5271ff]/20 rounded text-xs sm:text-sm text-neutral-400 hover:text-white hover:border-[#5271ff] transition-colors">
                                Hack Neural
                            </div>
                            <div class="p-2 bg-neutral-900 border border-[#5271ff]/20 rounded text-xs sm:text-sm text-neutral-400 hover:text-white hover:border-[#5271ff] transition-colors">
                                Célula de Escudo
                            </div>
                        </div>
                    </div>
                    
                    <div class="grid grid-cols-2 gap-2">
                        <button class="px-3 py-2 bg-neutral-900 border border-[#5271ff]/20 rounded-lg text-neutral-400 hover:text-white hover:border-[#5271ff] hover:shadow-[0_0_15px_rgba(82,113,255,0.3)] transition-all duration-300 text-xs sm:text-sm">
                            Salvar Jogo
                        </button>
                        <button class="px-3 py-2 bg-neutral-900 border border-[#5271ff]/20 rounded-lg text-neutral-400 hover:text-white hover:border-[#5271ff] hover:shadow-[0_0_15px_rgba(82,113,255,0.3)] transition-all duration-300 text-xs sm:text-sm">
                            Menu
                        </button>
                    </div>
                </aside>
            </div>
            
            <div class="sticky bottom-0 left-0 right-0 mt-4 sm:mt-6 bg-neutral-950/90 backdrop-blur-lg p-2 sm:p-3 border-t border-[#5271ff]/20">
                <div class="max-w-5xl mx-auto">
                    <div class="bg-neutral-900/90 backdrop-blur border-2 border-[#5271ff]/30 rounded-lg p-3 sm:p-4 shadow-[0_0_15px_rgba(82,113,255,0.15)]">
                        <div class="flex items-center gap-3">
                            <span class="text-[#5271ff] text-lg sm:text-xl animate-pulse">></span>
                            <input type="text" 
                                class="flex-1 bg-transparent border-none text-white focus:outline-none text-base sm:text-lg placeholder-neutral-500 focus:placeholder-neutral-600" 
                                placeholder="Digite seu comando..." 
                                aria-label="Entrada de comando"
                            >
                            <span class="text-[#5271ff] text-lg sm:text-xl font-mono animate-terminal-blink">|</span>
                        </div>
                        <div class="mt-2 flex gap-2 overflow-x-auto pb-1 scrollbar-thin scrollbar-thumb-[#5271ff]/20 scrollbar-track-transparent">
                            <button class="px-2 py-1 bg-neutral-800/50 rounded text-xs text-neutral-400 hover:text-white hover:bg-[#5271ff]/20 whitespace-nowrap transition-colors">
                                /ajuda
                            </button>
                            <button class="px-2 py-1 bg-neutral-800/50 rounded text-xs text-neutral-400 hover:text-white hover:bg-[#5271ff]/20 whitespace-nowrap transition-colors">
                                /inventario
                            </button>
                            <button class="px-2 py-1 bg-neutral-800/50 rounded text-xs text-neutral-400 hover:text-white hover:bg-[#5271ff]/20 whitespace-nowrap transition-colors">
                                /estatisticas
                            </button>
                            <button class="px-2 py-1 bg-neutral-800/50 rounded text-xs text-neutral-400 hover:text-white hover:bg-[#5271ff]/20 whitespace-nowrap transition-colors">
                                /mapa
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Related Examples

Login Form with Icon

Author:
Akai

3 months ago

160
Contact me form

Author:
Arya

3 years ago

12.2k
Simple Form 3

Author:
Mr Robot

3 years ago

9.5k
Sign Up form with dark mode support

Author:
Anonymous

2 years ago

12.2k
Contact Form

Author:
Sophia Baker

3 years ago

10.5k
Instagram Login Clone

Author:
Victoria Blount

7 months ago

413
Responsive contact us section

Author:
Geoffrey Callaghan

2 years ago

7.7k
Form for editing items

Author:
Sophia Baker

2 years ago

17.6k
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

2.3k
Instagram Login Clone
login form and signup

Author:
gidy

7 months ago

492
Responsive Sign-Up Form with TailwindCSS
Create a visually appealing and fully responsive sign-up form using TailwindCSS. This form includes input fields for full name, mobile number, email, password, and confirm password, along with a gradient sign-up button. Designed with simplicity and flexibility, it is perfect for modern web applications and easy to integrate into any project.

Author:
SHARIFUL ISLAM

11 months ago

1.5k
Multi-Step Form with Progress Tracker
sleek and interactive multi-step registration form built with Tailwind CSS and Alpine.js, perfect for onboarding users through a smooth, step-by-step experience. This component enhances user engagement with animated transitions, real-time validation, and a dynamic progress bar that visually tracks completion. It’s fully responsive, dark-mode ready, and ideal for modern SaaS applications, startup landing pages, or authentication systems. ✨ Key Features 🪜 Three-step flow: Personal Info → Account Setup → Preferences ⚡ Real-time field validation with instant feedback 🔒 Password visibility toggles for better UX 📈 Progress bar tracker with smooth animations ✅ Success confirmation with user details preview 🌙 Dark mode support for modern UI design 💨 Alpine.js-powered interactivity – no external JS frameworks needed 📱 Fully responsive design optimized for all devices 💡 Perfect for: SaaS or startup registration flows Onboarding or sign-up pages Form builders, dashboard templates, or web app UIs UI component libraries & code snippets collections

Author:
wavy kits

3 months ago

493

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2026 TailwindFlex. All Rights Reserved.

v1.12