Simple Login with Tabs Using Tailwind UI

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
    href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
    rel="stylesheet">

<style>
    body {
        font-family: 'Plus Jakarta Sans', sans-serif;
    }
</style>

<!-- inspired design by https://dribbble.com/shots/3589086-Sign-In-Sign-Up-Screens -->

<section class="flex items-center justify-center bg-[#0DA469]">
    <form
        class="relative max-w-md p-6 m-10 mx-auto space-y-3 bg-white border border-gray-100 rounded-md shadow-xl lg:p-10">
        <nav class="flex flex-wrap gap-4 pb-4">

            <a href="#"
                class="inline-flex px-3 py-2 text-sm font-bold text-green-600 uppercase transition-all duration-200 ease-in-out border-b-2 border-transparent whitespace-nowrap border-b-green-600">
                Sign in </a>

            <a href="#"
                class="inline-flex px-3 py-2 text-sm font-semibold text-gray-600 uppercase transition-all duration-200 ease-in-out border-b-2 border-transparent whitespace-nowrap hover:border-b-green-600 hover:text-green-600">
                Sign Up </a>
        </nav>

        <div>
            <label class="text-xs text-gray-500"> User ID or Email Address </label>
            <input type="text" placeholder="" value="Jan Doe"
                class="w-full h-12 px-1 mb-4 border-b-2 border-gray-400 outline-none hover:border-gray-800 focus:border-green-600" />
        </div>
        <div>
            <label class="text-xs text-gray-500"> Password </label>
            <input type="password" placeholder="***********"
                class="w-full h-12 px-1 border-b-2 border-gray-400 outline-none hover:border-gray-800 focus:border-green-600" />
        </div>

        <div>
            <div class="flex items-center justify-between mt-8">
                <button type="button"
                    class="rounded-md bg-green-600 px-6 py-2.5 text-center font-semibold text-white outline-none focus:ring">
                    Sign In
                </button>
                <div class="text-sm text-gray-600">
                    <p class="mb-2">Forgot your User ID or Passwor?</p>
                    <a class="font-semibold text-green-600 hover:text-green-900" href="#">Reset Password</a>
                </div>
            </div>
            <div class="h-0.5 my-12 bg-gray-200"></div>

            <div class="flex items-center justify-between mt-8">
                <div class="text-xs font-medium text-gray-600">
                    <p>Or you can sign in with an <br> external social media account</p>
                </div>
                <ul class="flex justify-center space-x-5">
                    <li class="p-2 bg-blue-600 border rounded">
                        <a href="#" class="text-gray-200 hover:text-gray-50">
                            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                <path fill-rule="evenodd"
                                    d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
                                    clip-rule="evenodd"></path>
                            </svg>
                        </a>
                    </li>
                    <li class="p-2 bg-blue-900 border rounded">
                        <a href="#" class="text-gray-200 hover:text-gray-50 dark:hover:text-white dark:text-gray-400">
                            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                <path
                                    d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84">
                                </path>
                            </svg>
                        </a>
                    </li>
                    <li class="p-2 bg-gray-900 border rounded">
                        <a href="#" class="text-gray-200 hover:text-gray-50 dark:hover:text-white dark:text-gray-400">
                            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                <path fill-rule="evenodd"
                                    d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
                                    clip-rule="evenodd"></path>
                            </svg>
                        </a>
                    </li>
                </ul>
            </div>

        </div>

    </form>
</section>