asdf

This tailwind example is contributed by Zeeshan Aslam Durrani, on 02-Dec-2025. Component is made with Tailwind v3.4. It is responsive.

Other

Author Zeeshan Aslam Durrani

Tailwind v3.4 34

Fork Fullscreen

<div class="overlay fixed inset-0 bg-black/30 backdrop-blur-sm z-40"></div>

<div class="budget fixed inset-0 z-50 flex items-center justify-center">

<div class="budget__cross absolute right-4 top-4 cursor-pointer">
            <i class="fa-solid fa-xmark budget__cross--icon text-gray-500 text-2xl hover:text-gray-700"></i>
        </div>

<div class="budget__content mt-8">

<div class="grid grid-cols-3 gap-4 mb-6 text-center">
                <p class="budget__box block h-6"></p>

<p class="budget__box budget__box--heading font-semibold text-gray-700">
                    Grant Budget
                </p>

<p class="budget__box budget__box--heading font-semibold text-gray-700">
                    Paid Budget
                </p>
            </div>

<div class="grid grid-cols-3 gap-4 mb-3">
                <input type="text"
                       class="budget__box budget__box--date g1 bg-gray-200 text-gray-700 rounded-md px-3 py-2"
                       value="Sep-25" disabled>

<div class="grid grid-cols-3 gap-4 mb-3">
                <input type="text"
                       class="budget__box budget__box--date g2 bg-gray-200 text-gray-700 rounded-md px-3 py-2"
                       value="Oct-25" disabled>

<div class="grid grid-cols-3 gap-4 mb-3">
                <input type="text"
                       class="budget__box budget__box--date g3 bg-gray-200 text-gray-700 rounded-md px-3 py-2"
                       value="Nov-25" disabled>

<div class="grid grid-cols-3 gap-4 mb-3">
                <input type="text"
                       class="budget__box budget__box--date g4 bg-gray-200 text-gray-700 rounded-md px-3 py-2"
                       value="Dec-25" disabled>

<div class="grid grid-cols-3 gap-4 mb-3">
                <input type="text"
                       class="budget__box budget__box--date g5 bg-gray-200 text-gray-700 rounded-md px-3 py-2"
                       value="Jan-26" disabled>

</div>

<div class="budget__msg hidden mt-6">
            <p class="budget__msg--text font-semibold text-gray-700">
                Message : On increase only
            </p>
            <p class="budget__msg--para text-gray-600">
                Have you supplied a minimum of 5 images and 3 videos
            </p>
        </div>

<div class="budget__button bbutton mt-8">
            <button class="btn btn__primary sbudget w-full bg-indigo-500 hover:bg-indigo-600 text-white py-3 rounded-lg font-semibold">
                Save
            </button>
        </div>

</div>
</div>

Related Examples

Responsive Gradient Cards

JUGENDRA GANGWAR

2 days ago

9
5 Different Style of Button
Gradient Button outline button neon button Sliding Background pulsing Button

KULDEEP

1 year ago

1.1k
Command Palette with Search & Keyboard Navigation

JUGENDRA GANGWAR

2 months ago

82
Soft-Modern Dark Pricing
A sophisticated, highly rounded pricing component inspired by modern fintech interfaces. It avoids harsh lines in favor of deep "zinc" tones and subtle borders (border-white/5). The center card pops using a high-contrast white button against the dark theme, guiding user focus naturally without using aggressive gradients.

Hamza Atig

9 months ago

742
masonary grids effect for cards using columns
As part of the redesign I was trying to think of ways to lay out testimonials from students, which may have varying length/content, I stumbled onto the idea of using a masonry layout (think bricks, think Pinterest).

rohit whyphy

1 year ago

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

Hamza Atig

1 year ago

1.8k
OTP Verification Page
A responsive and interactive OTP verification page built with Tailwind CSS. The page features a gradient background, hover effects, and animations to enhance user experience. It includes input fields for the OTP, a resend OTP link, and a verify button. The design is optimized for both light and dark modes.

Mohit Prajapat

1 year ago

1.4k
Pricing Plans
This plan offers access to all basic features, including unlimited projects and 24/7 support

Rathanak Phan

1 year ago

1.1k
Chatbox template

Lucas Martinez

3 years ago

13.3k
Instagram Post UI Mockup
A static HTML and Tailwind CSS component that visually replicates the user interface of an Instagram post. This mockup includes the post header (avatar, username, options), image area, action buttons (like, comment, share, save), like count, caption, and comment section. It features responsive constraints and supports both light and dark mode, closely mimicking the look and feel of the actual Instagram app. Ideal for UI prototyping, style guides, or frontend development practice.

Hamza Atig

1 year ago

2.2k
Enhanced Student Testimonials Section
A modern, interactive testimonials section featuring glassmorphism design, floating animations, and social proof elements. Includes star ratings, course badges, user profiles with online status indicators, and a stats section. Built with Tailwind CSS and features gradient backgrounds, hover effects, and responsive design optimized for showcasing student success stories and building credibility.

Muhammad Umair Arshad

1 year ago

1.4k
Rwanda-Canada Transport Services | Safe & Reliable Shipping
Attractive color scheme inspired by Rwanda's landscapes

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.1k