Login screen

Reward login screen

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 Register, Sign in,popup,dialog

Author ehmasuk

Tailwind v3.4 971 3

Fork Fullscreen

<div
    class="need-accout-to-see-video-wraper h-screen w-screen bg-gray-400 fixed grid place-items-center bg-white top-0 right-0 left-0 z-50 w-full inset-0 h-modal h-full justify-center items-center">
    <div class="relative container m-auto">
        <div class="m-auto">
            <div class="rounded-xl bg-white">
                <div class="p-4 text-center">
                    <h2 class="lg:text-4xl text-2xl lg:mb-8 mb-4">Create an account to unlock the rewards.</h2>
                    <p class="mx-auto max-w-2xl lg:mb-10 mb-5">
                        The author of this video has not made it public yet. If you want to get more rewards like this,
                        you can create an account and get access to the rewards
                    </p>
                    <div class="gap-3 w-full max-w-[300px] mx-auto flex flex-col">
                        <button class="group h-12 px-6 border-2 border-gray-300 rounded-full transition duration-300 hover:border-blue-400 focus:bg-blue-50 active:bg-blue-100">
                            <div class="relative flex items-center space-x-4 justify-center">
                                <svg xmlns="http://www.w3.org/2000/svg" class="absolute left-0 w-6" viewBox="0 0 16 16"><g fill="none" fill-rule="evenodd" clip-rule="evenodd"><path fill="#f44336" d="M7.209 1.061c.725-.081 1.154-.081 1.933 0a6.57 6.57 0 0 1 3.65 1.82a100 100 0 0 0-1.986 1.93q-1.876-1.59-4.188-.734q-1.696.78-2.362 2.528a78 78 0 0 1-2.148-1.658a.26.26 0 0 0-.16-.027q1.683-3.245 5.26-3.86" opacity="0.987"/><path fill="#ffc107" d="M1.946 4.92q.085-.013.161.027a78 78 0 0 0 2.148 1.658A7.6 7.6 0 0 0 4.04 7.99q.037.678.215 1.331L2 11.116Q.527 8.038 1.946 4.92" opacity="0.997"/><path fill="#448aff" d="M12.685 13.29a26 26 0 0 0-2.202-1.74q1.15-.812 1.396-2.228H8.122V6.713q3.25-.027 6.497.055q.616 3.345-1.423 6.032a7 7 0 0 1-.51.49" opacity="0.999"/><path fill="#43a047" d="M4.255 9.322q1.23 3.057 4.51 2.854a3.94 3.94 0 0 0 1.718-.626q1.148.812 2.202 1.74a6.62 6.62 0 0 1-4.027 1.684a6.4 6.4 0 0 1-1.02 0Q3.82 14.524 2 11.116z" opacity="0.993"/></g></svg>
                                <span class="block w-max font-semibold tracking-wide text-gray-700 text-sm transition duration-300 group-hover:text-blue-600 sm:text-base"
                                    >Continue with Google
                                </span>
                            </div>
                        </button>
                        <button class="group h-12 px-6 border-2 border-gray-300 rounded-full transition duration-300 hover:border-blue-400 focus:bg-blue-50 active:bg-blue-100">
                            <a href="#">
                                <div class="relative flex items-center space-x-4 justify-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="absolute left-0 w-6" viewBox="0 0 24 24"><g fill="none"><path fill="currentColor" d="M3 5v-.75a.75.75 0 0 0-.75.75zm18 0h.75a.75.75 0 0 0-.75-.75zM3 5.75h18v-1.5H3zM20.25 5v12h1.5V5zM19 18.25H5v1.5h14zM3.75 17V5h-1.5v12zM5 18.25c-.69 0-1.25-.56-1.25-1.25h-1.5A2.75 2.75 0 0 0 5 19.75zM20.25 17c0 .69-.56 1.25-1.25 1.25v1.5A2.75 2.75 0 0 0 21.75 17z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m3 5l9 9l9-9"/></g></svg>
                                    <span class="block w-max font-semibold tracking-wide text-gray-700 text-sm transition duration-300 group-hover:text-blue-600 sm:text-base"
                                        >Create account
                                    </span>
                                </div>
                            </a>
                        </button>
                    </div>

<p class="lg:mt-10 mt-2">Don't have an account? <a href="#"
                            class="text-blue-600 hover:underline">Sign in</a></p>
                </div>
            </div>
        </div>
    </div>
</div>

Related Examples

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

R Thapa

3 years ago

18.4k
Login popup
with social media login buttons

Nikolai

2 years ago

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

Anonymous

1 year ago

866
FacePass: Animated Image Authentication
"Where your image becomes your key" "Biometric meets beautiful animations" "A login experience that recognizes you – literally" "Security through personalized visual authentication" "Your face, animated, authenticated"

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

2k
Best Log In page ever
Instagram look like but not copy right 🤗,best login and sign and even for many others

ORGIN_DREAMS

1 year ago

1.6k
OTPverification

Ratikanta Pradhan

1 year ago

1.1k
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Achraf Testq

6 months ago

630
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Hasan AlDoy (McDoy)

6 months ago

481
login
login

Omer fils ELENGA

9 months ago

669
Registration Form

Maxim

1 year ago

1.7k
Registration form

Juan D. Cortorreal

10 months ago

662
Animated modal with Tailwind Css and alpinejs

Michael Andreuzza

2 years ago

3.8k