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

Typewriter effect in tailwindcss with this simple trick
source: https://dev.to/lazysock/make-a-typewriter-effect-with-tailwindcss-in-5-minutes-dc

Author:
Anonymous

2 years ago

11.7k
Contact Page

Author:
Sedat Kumcu

1 year ago

1.6k
super admin
super admin

Author:
Tanvir Hasan Bappy (Tanvir)

10 months ago

1.1k
htmlcss2

Author:
Elsa Khan

7 months ago

244
Homepage event

Author:
Anonymous

7 months ago

638
Privacy Policy Page Template

Author:
Anonymous

1 year ago

1.6k
Simple layout

Author:
Edward Carandang

1 year ago

3.1k
404 Page Not Found

Author:
KULDEEP

7 months ago

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

Author:
Mohit Prajapat

10 months ago

714
Profile Card with Transparent
Dynamic Background: Darker gradient background for better contrast Floating colored blobs for visual interest Profile Image Glow: Added a gradient glow effect behind the profile picture Smoother hover transition Typography Improvements: Larger, bolder name text Subtle hover underline animation for the name Better spacing and hierarchy

Author:
KULDEEP

7 months ago

904
Recipe card
A modern and responsive Tailwind CSS recipe card with image, ingredients, and instructions. Supports dark mode and mobile view.

Author:
Rajesh Pandey

9 months ago

1.1k
nft card
nft card

Author:
5upreme505

1 year ago

1.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components