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

145

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

16.9k
Login popup
with social media login buttons

Author:
Nikolai

1 year ago

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

Author:
Anonymous

7 months ago

504
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)

5 months ago

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

5 months ago

596
OTPverification

Author:
Ratikanta Pradhan

4 months ago

434
Register Form
This is a simple Register Form component with dark mode supported and mobile responsive

Author:
Shariar Hasan

1 year ago

3.3k
Responsive Registration Page
I created a responsive and visually appealing registration page using TailwindCSS and HTML5. This page features a gradient background, a modern card-style form, and clear input fields for username, email, password, and password confirmation. It includes client-side validation with real-time error messages to ensure all required fields are filled correctly and passwords match. This form is designed to provide a seamless user experience across all devices.

Author:
zobaidul kaziex

1 year ago

3.2k
Confirmation Modal for Critical Actions
A clean and responsive warning dialog component built with Tailwind CSS. Includes a title, descriptive text, and action buttons for confirmation or cancellation of critical actions.

Author:
Indra

2 months ago

263
Modern Login Page
Dive into a world of cool animations and captivating visuals. This beautifully crafted interface is not only eye-catching but also highly functional. You can use it as-is or customize it to make it your own. Share your ideas, and let’s create something extraordinary together!” Feel free to tweak it further or add any specific details you’d like. 😊🎨

Author:
Anonymous

1 year ago

2.7k
Responsive login form with image

Author:
Anonymous

1 year ago

1.1k
popup modal contact form
Working modal popup contact form in tailwind CSS Simple snippet for creating a popup contact form with tailwind and javascript

Author:
Ti To

1 year ago

7.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components