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

1.3k

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

tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

2.4k
Contact Form

Author:
Sophia Baker

3 years ago

10.5k
Tailwind CSS Contact Form
A clean contact form with a supporting image, built using Tailwind CSS by ReadymadeUI. Browse more free UI components and templates at readymadeui.com.

Author:
ReadyMadeUI

2 months ago

138
Multi-Step Form with Progress Indicator
reusable "Multi-Step Form with Progress Indicator" component built with HTML, CSS, and Tailwind CSS. It’s a practical component for forms like signups, surveys, or checkout processes.

Author:
Ayyamperumal S

1 year ago

2.1k
Login popup modal
centered modal for gaining more attention from users, it also has social login buttons.

Author:
R Thapa

2 years ago

17.4k
File upload form

Author:
Lukas Müller

3 years ago

13.8k
Elegant Split-Layout Contact Form (Navy Blue Edition)
Overview: A premium contact section styled in Navy Blue (bg-blue-900) to match the Service Carousel. Key Changes: Palette: Swapped all Teal references for Deep Blue (bg-blue-900 panel, text-blue-700 accents). Interactivity: Focus rings on inputs now glow with a soft blue (focus:ring-blue-600/10). Consistency: Maintains the "DM Serif Display" typography and "blob" background effects (now in blue/indigo) for a cohesive high-end look.

Author:
Juan D. Cortorreal

2 months ago

267
payment card
A payment card is a type of card issued by a financial institution (like a bank) that allows the cardholder to make financial transactions. These transactions can include purchasing goods and services, withdrawing cash, or transferring money. Here’s a description based on the main types of payment cards:

Author:
dev-fab250

8 months ago

650
Profile Stepper Form
Progressive Profile Form

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

4.9k
Payment form (Alpine JS)

Author:
Mr Robot

3 years ago

10.3k
Login Form
Admin Login Form

Author:
Khalid

1 year ago

2.3k
LinkedIn sign-up form
A clone of LinkedIn sign-up page

Author:
Nomusa Botha

1 year ago

2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components