Home
Crimson
Text Rpg UI

Text Rpg UI

This tailwind example is contributed by Crimson, on 14-Jan-2025. Component is made with Tailwind CSS v3. It is responsive.

Form

Author Crimson

756

Fork Fullscreen

<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">The neon-lit streets of Neo-Tokyo stretch before you, a maze of holographic advertisements and steam-filled alleyways.</p>
                            <p class="animate-fade-in" style="animation-delay: 0.2s">A mysterious figure approaches from the shadows, their cybernetic enhancements glowing softly in the darkness.</p>
                            <p class="animate-text-flicker text-[#5271ff]">> What do you do?</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> Approach cautiously
                        </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> Hide in the shadows
                        </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> Ready your weapon
                        </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> Call for backup
                        </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">
                            Character Stats
                            <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">Health</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">Energy</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">Shield</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">
                            Inventory
                            <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">
                                Plasma Pistol
                            </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">
                                Med Kit
                            </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">
                                Neural Hack
                            </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">
                                Shield Cell
                            </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">
                            Save Game
                        </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">&gt;</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="Type your command..." 
                                aria-label="Command input"
                            >
                            <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">
                                /help
                            </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">
                                /inventory
                            </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">
                                /stats
                            </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">
                                /map
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Related Examples

SingIn / Signup Form
A modern and responsive authentication card with Sign In & Sign Up options, featuring a seamless toggle and social login (Facebook, GitHub). Designed with Tailwind CSS, it offers a clean UI, smooth transitions, and full mobile responsiveness.

Author:
Rajesh Maheshwari

4 months ago

796
Tailwind CSS Service Card Component
An HTML and Tailwind CSS code snippet for creating a responsive service card component. Ideal for marketplaces, portfolios, or listing pages. Includes sections for image/video preview, seller info, rating, pricing, and additional details. Easy to customize using Tailwind utility classes.

Author:
Hamza Atig

2 months ago

524
Login Template
its is a basic login template

Author:
Sergio Gonzalez

5 days ago

26
Best Log In page ever
Instagram look like but not copy right 🤗,best login and sign and even for many others

Author:
ORGIN_DREAMS

1 month ago

47
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

1.9k
Login Form
Admin Login Form

Author:
Khalid

1 year ago

1.9k
User registration form

Author:
Leon Bachmann

2 years ago

22.5k
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

4 months ago

657
Checkout form

Author:
Sienna

2 years ago

13.4k
WHOIS Domain Lookup

Author:
Maxim

3 months ago

263
Contact us form template

Author:
Lukas Müller

2 years ago

8.8k
Comment form

Author:
Sophia Baker

2 years ago

11.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components