នេះគឺ simple កូដសម្រាប់ធ្វើ card responsive screen ជាមួយ login model ជាពីរ side។ ក្នុងមួយ side មាន buttom ផ្សេង ចំណែកឯមួយចំហៀងគឺរូបភាព ហើយត្រូវបិទនៅពេល screen តូច ដែលមានដូចខាងក្រោមនេះ

left side និង right side model
</head>
<body>
    <!-- Global Contain -->
     <div class="flex bg-rose-50 items-center justify-center min-h-screen">
        <!-- Card Contain -->
         <div class="relative flex flex-col m-6 space-y-10 md:flex-row bg-white rounded-xl md:space-y-0">
            <!-- left -->
             <div class="p-3 md:20">
                <!-- Top content -->
                 <h1 class="text-xl font-semibold mb-5">Login</h1>
                 <p class="text-gray-500 mb-6">សូមចូល login គណន័យដើម្បី upload វិដេអូ និងរូបភាព</p>
                 <input type="text" placeholder="បញ្ចូល email" 
                 class="w-full border border-gray-300 rounded-md p-2" 
                    >   
             </div><!--close left-->
             
             <!-- right side -->
              <img src="/kep3.jpeg" alt="" class="w-[430px] hidden md:block">

         </div><!--close card contain-->
     </div>
</body>
Middle buttom 
 <!-- Top content -->
                 <h1 class="text-xl font-semibold mb-5">Login</h1>
                 <p class="text-gray-500 mb-6">សូមចូល login គណន័យដើម្បី upload វិដេអូ និងរូបភាព</p>
                 <input type="text" placeholder="បញ្ចូល email" 
                 class="w-full border border-gray-300 rounded-md p-2" 
                    >
                <!-- Middle -->
                 <div class="flex flex-col items-center justify-between mt-6 space-y-6 md:space-y-0 md:flex-row">
                    <div class="font-thin text-cyan-500 cursor-pointer">ភ្លេចលេខកូដ</div>
                    <button class="w-full md:w-auto flex items-center justify-center bg-sky-600 p-3 px-9 text-gray-100 
                    rounded-md transition space-x-3 duration-150 shadow-md
                     hover:-translate-y-0.5 hover:bg-opacity-90">
                        <span>បន្ទាប់</span>
                        <svg xmlns="http://www.w3.org/2000/svg" 
                        width="24" 
                        height="24" 
                        viewBox="0 0 24 24" 
                        fill="none" 
                        stroke="#ffff" 
                        stroke-width="2" 
                        stroke-linecap="round" 
                        stroke-linejoin="round">
                        <path d="M5 12h13M12 5l7 7-7 7"/></svg>
                     </button>
                 </div><!--Close middle-->

             </div><!--close left-->
             <!-- right side -->
              <img src="/kep3.jpeg" alt="" class="w-[430px] hidden md:block">

         </div><!--close card contain-->
     </div>
</body>
Login ជាមួយ facebook និង google
</button>
                 </div><!--Close middle-->
                 
              <!-- hr-botton -->
              <div class="mt-5 border-b border-b-gray-300"></div>
                 <!-- botton content -->
                  <p class="py-4 text-sm text-gray-400 text-center">login ជាមួយ</p>
                  <!-- Buttom botton content -->
                  <div class="flex flex-col space-x-0 space-y-5 md:flex-row md:space-x-3 md:space-y-0 ">
                    <button class="flex items-center justify-center py-2 space-x-3 rounded border border-gray-200
                    hover:bg-opacity-20 hover:shadow-lg hover:-translate-y-0.5 transition duration-150 md:w-1/2">
                        <img src="./fb.png" alt="" class="w-9 rounded-full">
                        <span>Facebook</span>
                    </button>
                    <button class="flex items-center justify-center py-2 space-x-3 rounded border border-gray-200
                    hover:bg-opacity-20 hover:shadow-lg hover:-translate-y-0.5 transition duration-150 md:w-1/2">
                        <img src="./google.png" alt="" class="w-9 rounded-full">
                        <span>Google</span>
                    </button>
                  </div><!--close buttom botton content-->
                  
             </div><!--close left-->
             <!-- right side -->
              <img src="/kep3.jpeg" alt="" class="w-[430px] hidden md:block">

         </div><!--close card contain-->
     </div>
close button
</div><!--close left-->
             <!-- right side -->
              <img src="/kep3.jpeg" alt="" class="w-[430px] hidden md:block">

              <!-- Close buttom -->
               <div class="group absolute -top-8 right-3 flex items-center justify-center cursor-pointer
               w-6 h-6 bg-gray-200 rounded-full md:right-2 md:top-2 md:bg-white hover:translate-y-0.5 transition duration-150">
                <svg xmlns="http://www.w3.org/2000/svg"
                 class="text-black w-5 h-5 group-hover:text-gray-600" 
                 viewBox="0 0 24 24" 
                 fill="none" 
                 stroke="currentColor" 
                 stroke-width="2" 
                 stroke-linecap="round" 
                 stroke-linejoin="round">
                 <line x1="18" y1="6" x2="6" y2="18">   
                 </line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
               </div><!--close buttom-->
               
         </div><!--close card contain-->
     </div>

simple code