asdf

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

Other

Author Zeeshan Aslam Durrani

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

chatbot
is my chatbot

Author:
Omer fils ELENGA

1 month ago

172
random design

Author:
QQ-VVN

6 months ago

413
Simple dialpad

Author:
Brandon D

2 years ago

11.3k
Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Author:
Ayyamperumal S

6 months ago

1.5k
profile
user profile

Author:
gidy

6 months ago

666
Hero

Author:
ORGIN_DREAMS

6 months ago

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

7 months ago

998
Heading
Subtle Script Background - Large, very light script font in the background ("Amazing") Light-to-Dark Gradient Heading - Main heading fades from light gray to dark gray Layered Typography - Secondary heading in medium weight for contrast Elegant Divider - With centered italic text Minimalist Border Accents - Thin borders in corners for sophistication Responsive Design - Scales beautifully on all devices

Author:
KULDEEP

5 months ago

384
cards
cards with background animation

Author:
Anonymous

2 years ago

11.5k
Heading Style

Author:
KULDEEP

6 months ago

418
Contact Form Component
A multi-step, responsive contact form with a modern dark-themed design. The form includes four steps: name, email, phone number, and message. It features a side panel with contact information and a sleek, gradient-styled interface using Tailwind CSS.

Author:
Muhammad Umair Arshad

8 months ago

976
ForK blocks animations
ForK blocks animations

Author:
Yor Rodriguez

10 months ago

1.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components