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

A Code Master Academy
A Code Master Academy – Empowering the Next Generation of Tech Leaders in Rwanda 👨‍💻 I'm Acode Master, the founder of A Code Master Academy, a practical and inclusive coding school based in Rubavu, Rwanda. The academy is dedicated to transforming lives by equipping unemployed youth and passionate learners with job-ready skills in modern software development.

Author:
Code Master(Mfuranziza Dusabe Hamza)

9 months ago

1.2k
Date picker
Date picker example using flatpickr library

Author:
Lîmåã M

2 years ago

17.3k
Tailwind css banner offer
Bold neobrutalist design with thick borders, vibrant colors, and strong shadows - perfect for promotions.

Author:
saim-t8

6 months ago

614
Invoice
Invoice

Author:
Tanvir Hasan Bappy (Tanvir)

11 months ago

881
Half filled circle with tailwind

Author:
Alok

3 years ago

13.9k
Tailwind CSS Blog sharing buttons with blog details
Introducing our Blog Sharing Buttons with Blog Details component, designed to enhance the social sharing experience on your blog posts.

Author:
Abid Ullah

1 year ago

2.1k
Product hunt showcase

Author:
Lukas Müller

3 years ago

12.4k
Native HTML Accordion
native html accordion summary details

Author:
Cristian

1 year ago

2.5k
Responsive fullscreen youtube video

Author:
Anonymous

2 years ago

9.1k
Card blog
Targeta para blog

Author:
Raul antonio de la cruz hernandez

3 months ago

233
Simple Login & Register Page
Login and Register Page using Tailwind, Alpine JS, and Fontawesome

Author:
Ahita Bisma Adlula

1 year ago

3.1k
simple responsive blog layout with sidebar

Author:
Isabella Kowalski

3 years ago

9.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components