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

123

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

Feedback Form
Feedback Form with a map

Author:
Andreas Wagner

1 year ago

7k
popup modal contact form
Working modal popup contact form in tailwind CSS Simple snippet for creating a popup contact form with tailwind and javascript uses fabform.io

Author:
Ti To

1 year ago

5.6k
Responsive registration form
form with social login buttons

Author:
Anonymous

1 year ago

22.8k
Comment form

Author:
Sophia Baker

1 year ago

11.3k
Authentication form
Use this example to authenticate users with a login form using a phone number instead of an email address.

Author:
Md. Tofayel islam

10 months ago

1.9k
Simple Sign up form
A responsive simple singup or login form

Author:
Emdadul Islam

7 months ago

1.2k
tailwind contact form template
tailwind contact form template

Author:
Ti To

1 year ago

4.2k
Simple Login Form
Very basic responsive login form. The form is centered within a white card with a shadow, featuring input fields for username and password. The design is clean and user-friendly.

Author:
Bunny

2 years ago

46.5k
Book Appointment form
A schedule an appointment form is an online document that helps the user to schedule an appointment with the company or business.

Author:
Arya

2 years ago

10.8k
Sign In form

Author:
Amit Pachange

2 years ago

10.9k
Responsive Contact Section Using Tailwind CSS
This HTML and Tailwind CSS snippet creates a visually appealing and responsive contact section. Designed to adapt seamlessly across different screen sizes, this component features two main areas: the contact information block and a contact form. The contact block displays essential details like phone, email, and address, alongside social media links, all encapsulated within a cyan-themed card with rounded corners and shadow effects for depth. The form area, highlighted with a contrasting white background, ensures a user-friendly interface for submitting contact details. This code snippet is perfect for integration into any modern web application requiring a responsive and stylish contact section.

Author:
Fathallah Anass

6 months ago

1.1k
Sign in / Login Form

Author:
Bunny

2 years ago

11.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 1900+ components