Home
ehmasuk
Login screen

Login screen

Reward login screen

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

Author ehmasuk

245

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.

Author:
R Thapa

2 years ago

17.3k
Login popup
with social media login buttons

Author:
Nikolai

1 year ago

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

Author:
Anonymous

9 months ago

534
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"

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

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

Author:
ORGIN_DREAMS

7 months ago

843
OTPverification

Author:
Ratikanta Pradhan

6 months ago

531
GALLERY

Author:
ORGIN_DREAMS

8 months ago

983
Login form #1
login form design

Author:
QQ-VVN

8 months ago

149
Login Form simple
Login form design

Author:
QQ-VVN

8 months ago

656
Register form

Author:
Maxim

1 year ago

1.4k
User registration form

Author:
Leon Bachmann

2 years ago

25k
Modern Neo-Brutalist Login Page – Dark & Light Mode with Tailwind CSS
A bold and functional login interface inspired by Neo-Brutalist design, built with Tailwind CSS. Features crisp typography, high-contrast elements, and smooth interactive states. Fully responsive and ready to integrate into any modern web application.

Author:
Homayoun

1 month ago

281

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components