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.1k

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

Contact Us Form
CTAs help convert visitors into action-takers (customers, subscribers, etc.), while Contact Us forms enable easy communication, building trust and support. Both are vital for engaging visitors and achieving your website’s objectives.

Author:
KULDEEP

5 months ago

591
Contact us form template with fabform

Author:
Ho O

10 months ago

993
Login form

Author:
Rajesh Maheshwari

9 months ago

1.4k
Responsive Contact Form
Modern Responsive Contact Form Design

Author:
UI-Templates

1 month ago

105
Responsive registration form
form with social login buttons

Author:
Sophia Baker

2 years ago

43.3k
progress-bar with Tailwind CSS and Alpinejs

Author:
Quêmia

1 year ago

1.9k
Reservation form with fabform.io

Author:
Ho O

10 months ago

1.3k
YouTube Community Post UI Mockup
A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

Author:
Hamza Atig

7 months ago

924
tailwind contact form template
tailwind contact form template

Author:
Ti To

1 year ago

5.4k
Contact me form
contact me form

Author:
Geoffrey Callaghan

2 years ago

7.3k
Responsive Form

Author:
ABDO-SY

8 months ago

1k
update user
it is the layout for creating an event

Author:
seth dridi

1 year ago

1.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components