Reward modal

A reward modal with refferal link

This tailwind example is contributed by ehmasuk, on 12-Sep-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are popup,dialog

Modal

Author ehmasuk

Tailwind v3.4 783 3

Fork Fullscreen

<div class="h-screen w-screen bg-[#000000ad] fixed grid place-items-center backdrop-blur-sm top-0 right-0 left-0 z-50 w-full inset-0 h-modal h-full justify-center items-center">
    <div class="relative w-full container m-auto">
        <div class="m-auto">
            <div class="rounded-xl bg-white shadow-xl">
                <div class="max-w-md w-full bg-white rounded-2xl shadow-xl p-6 relative overflow-hidden">
                    <div class="absolute top-0 right-0 w-40 h-40 bg-gradient-to-br from-purple-200 to-pink-200 rounded-full transform translate-x-20 -translate-y-20 opacity-50"></div>
                    <div class="relative">
                        <div class="flex items-center justify-center mb-6">
                            <svg
                                stroke="currentColor"
                                fill="currentColor"
                                stroke-width="0"
                                viewBox="0 0 512 512"
                                class="text-4xl text-purple-600 mr-3"
                                height="1em"
                                width="1em"
                                xmlns="http://www.w3.org/2000/svg"
                            >
                                <path
                                    d="M32 448c0 17.7 14.3 32 32 32h160V320H32v128zm256 32h160c17.7 0 32-14.3 32-32V320H288v160zm192-320h-42.1c6.2-12.1 10.1-25.5 10.1-40 0-48.5-39.5-88-88-88-41.6 0-68.5 21.3-103 68.3-34.5-47-61.4-68.3-103-68.3-48.5 0-88 39.5-88 88 0 14.5 3.8 27.9 10.1 40H32c-17.7 0-32 14.3-32 32v80c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-80c0-17.7-14.3-32-32-32zm-326.1 0c-22.1 0-40-17.9-40-40s17.9-40 40-40c19.9 0 34.6 3.3 86.1 80h-86.1zm206.1 0h-86.1c51.4-76.5 65.7-80 86.1-80 22.1 0 40 17.9 40 40s-17.9 40-40 40z"
                                ></path>
                            </svg>
                            <h1 class="text-3xl font-bold bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">Free Lesson Gift</h1>
                        </div>
                        <div class="space-y-4 mb-8">
                            <p class="text-gray-700 text-center">
                                Unlock your potential with a complimentary learning session! This exclusive gift card grants you access to a personalized lesson with our expert instructors.
                            </p>
                            <div class="text-center text-sm text-gray-500">Expires in: 48 hours</div>
                        </div>
                        <button
                            class="w-full py-4 rounded-xl text-white font-semibold text-lg transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700"
                            aria-label="Claim your free lesson"
                        >
                            Claim Your Free Lesson
                        </button>
                        <div class="mt-8 pt-6 border-t border-gray-200">
                            <p class="text-center text-gray-600 mb-4">Share this gift</p>
                            <div class="flex justify-center space-x-4">
                                <button class="p-3 bg-blue-600 text-white rounded-full hover:bg-blue-700 transition-colors" aria-label="Share on Facebook">
                                    <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 320 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"
                                        ></path>
                                    </svg></button
                                ><button class="p-3 bg-blue-400 text-white rounded-full hover:bg-blue-500 transition-colors" aria-label="Share on Twitter">
                                    <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
                                        ></path>
                                    </svg></button
                                ><button class="p-3 bg-blue-700 text-white rounded-full hover:bg-blue-800 transition-colors" aria-label="Share on LinkedIn">
                                    <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"
                                        ></path>
                                    </svg>
                                </button>
                            </div>
                            <div class="mt-4 flex items-center justify-center space-x-2">
                                <input type="text" readonly="" class="bg-gray-50 p-2 rounded-lg text-sm flex-1" value="https://example.com/gift-card" /><button
                                    class="p-2 text-purple-600 hover:text-purple-700 transition-colors"
                                    aria-label="Copy link"
                                >
                                    <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="20" width="20" xmlns="http://www.w3.org/2000/svg">
                                        <path fill="none" d="M0 0h24v24H0z"></path>
                                        <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"></path>
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Related Examples

Notifications
Toast Notifications are lightweight and customizable components for displaying short messages or alerts. They are perfect for feedback on user actions, such as form submissions or system updates. Supports different types of notifications (success, error, warning, info). Automatically hides after a specified timeout. Option to include action buttons or close icons. Customizable styles, animation, and position on the screen.

Abhiraj

1 year ago

2.2k
Login screen
Reward login screen

ehmasuk

1 year ago

971
button
Background Studio

nickosamba.nh21

8 months ago

806
Error popup modal

Jindřich Stoklasa

2 years ago

2.5k
Modal
Responsive model

inbarajan P

2 years ago

3.7k
Confirmation modal/card

Sophia Baker

3 years ago

16.6k
Responsive modal popup

I.P. Leroy

3 years ago

14.9k
Modal with background overlay
Reduce the opacity of the page content to bring the focus to the modal.

Abigail

3 years ago

12.6k
Modal multiple window

Maxim

2 years ago

3.1k
Login popup modal
centered modal for gaining more attention from users, it also has social login buttons.

R Thapa

3 years ago

18.3k
simple badge

Muhammad Imran

1 year ago

2.3k
Command Palette with Search & Keyboard Navigation

JUGENDRA GANGWAR

1 month ago

73