Published on

Learn How To Make A Tailwind Css RTL register and login Page 2 design With Tailwind CSS from the Pros

Tags
Forms
Tailwind Css RTL register and login Page 2 design

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that allows you to create custom designs without having to write custom CSS. It provides a set of pre-defined classes that you can use to style your HTML elements. Tailwind CSS is highly customizable, and you can easily modify the styles to fit your needs.

The description of Tailwind Css RTL register and login Page 2 design ui component

The Tailwind CSS RTL register and login Page 2 design UI component is a pre-built user interface component that you can use to create a login and registration page for your website or application. This UI component is designed to be responsive and easy to use, and it includes all the necessary elements for a registration and login page, such as input fields, buttons, and error messages.

Why use Tailwind CSS to create a Tailwind Css RTL register and login Page 2 design ui component?

Tailwind CSS is an excellent choice for creating a Tailwind Css RTL register and login Page 2 design UI component because it provides a set of pre-defined classes that you can use to style your HTML elements. This makes it easy to create a consistent and professional-looking UI component without having to write custom CSS. Additionally, Tailwind CSS is highly customizable, which means you can easily modify the styles to fit your needs.

The preview of Tailwind Css RTL register and login Page 2 design ui component.

Free download of the Tailwind Css RTL register and login Page 2 design's source code

The source code of Tailwind Css RTL register and login Page 2 design ui component.

<!-- Try see With Full Page-->

<style>

/* Disables the selection */
.disableselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge*/
   user-select: none;          /* Non-prefixed version, currently 
                                  not supported by any browser */
}

/* Disables the drag event 
(mostly used for images) */
.disabledrag{
   -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
   user-drag: none;
}
.bg-start{

    margin: 0;
    padding: 0; 
    background-image: url("https://res.cloudinary.com/dr3osevsp/image/upload/v1624956716/Sprinkle_zegc98.png");
    background-size:100% 100%;
    background-repeat: no-repeat;

}

     .leaf{
            position:absolute ;
            width:94%;
            height:71%;
            top:0;
            left:0; 
             opacity: 0.7;

        }
        .leaf div{
        position:absolute ;
        display:block ;
        }
        .leaf div:nth-child(1){
            left:20%; 
            animation:fall 15s linear infinite ;
            animation-delay:-2s;
        
        }
        .leaf div:nth-child(2){
            left:70%; 
            animation:fall 15s linear infinite ;
            animation-delay:-4s;
        }
        .leaf div:nth-child(3){
            left:10%; 
            animation:fall 20s linear infinite ;
            animation-delay:-7s;
            
        }
        .leaf div:nth-child(4){
            left:50%; 
           animation:fall 18s linear infinite ; 
           animation-delay:-5s;
        }
        .leaf div:nth-child(5){
            left:85%; 
            animation:fall 14s linear infinite ;
            animation-delay:-5s;
        }
        .leaf div:nth-child(6){
            left:15%; 
            animation:fall 16s linear infinite ;
            animation-delay:-10s;
        }
        .leaf div:nth-child(7){
            left:90%; 
            animation:fall 15s linear infinite ;
            animation-delay:-4s;
        }
        
        @keyframes fall{
            0%{
                opacity:1;
                top:-10%;
                transform:translateX (20px) rotate(0deg);
            }
            20%{
                opacity:0.8;
                transform:translateX (-20px) rotate(45deg);
            }
            40%{
        
                transform:translateX (-20px) rotate(90deg);
            }
            60%{
                
               transform:translateX (-20px) rotate(135deg); 
            }
            80%{
            
                transform:translateX (-20px) rotate(180deg);
            }
            100%{
                
                top:110%;
                transform:translateX (-20px) rotate(225deg);
            }
            }
        .leaf1{
            transform: rotateX(180deg);  
            opacity: 0.7;

        }

.blogoanm{
  display:block;
  margin:20px auto 0px;
  height:300px;
  width:auto;
  animation: 3s infinite alternate floating;
}
.shadowbanm{
  height:2px;
  display:block;
  margin:15px auto;
  animation: 3s infinite alternate shadow;
}

@keyframes floating {
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(-10px);
	}
	100% {
		transform: translatey(0px);
	}
}
@keyframes shadow {
	0% {
    width:180px;
		box-shadow:0px 10px 8px rgba(0,0,0,.8);
	}
	50% {
    width:150px;
		box-shadow:0px 10px 8px rgba(0,0,0,.5);
	}
	100% {
    width:180px;
		box-shadow:0px 10px 8px rgba(0,0,0,.8);
	}
}



.bg-example {
    background-image: linear-gradient(to right,#00AEEE 0%,#27BFF7 100%);
}

.skeleton-box {
  position: relative;
  overflow: hidden;
  background-color: #e2e8f0
}
.skeleton-box::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
            transform: translateX(-100%);
    background-image: -webkit-gradient(
      linear,
      left top, right top,
      color-stop(0, rgba(255, 255, 255, 0)),
      color-stop(20%, rgba(255, 255, 255, 0.2)),
      color-stop(60%, rgba(255, 255, 255, 0.5)),
      to(rgba(255, 255, 255, 0))
    );
    background-image: -o-linear-gradient(
      left,
      rgba(255, 255, 255, 0) 0,
      rgba(255, 255, 255, 0.2) 20%,
      rgba(255, 255, 255, 0.5) 60%,
      rgba(255, 255, 255, 0)
    );
    background-image: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0,
      rgba(255, 255, 255, 0.2) 20%,
      rgba(255, 255, 255, 0.5) 60%,
      rgba(255, 255, 255, 0)
    );
    -webkit-animation: shimmer 3s infinite;
            animation: shimmer 3s infinite;
    content: '';
  }
@-webkit-keyframes shimmer {
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
@keyframes shimmer {
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}



</style>

<!-- Try see With Full Page-->


<section class="h-screen bg-white" data-form_change2="true">
                <div class="flex flex-col h-full mx-auto lg:justify-center lg:flex-row">
                    <div class="relative flex-col items-center justify-center hidden w-full px-2 py-20 disableselect disabledrag lg:w-1/2 sm:py-40 sm:px-12 md:flex bg-start" data-form_change2="false" oncontextmenu="return false;" >
<a href="https://example.com" target="_blank" class="absolute top-0 left-0 z-20 flex flex-row hidden p-4 px-4 mt-2 ml-4 md:flex" >
 <img class="w-12 h-12 rounded-full ring-2 ring-indigo-500 ring-opacity-50" src="https://res.cloudinary.com/dr3osevsp/image/upload/v1624956639/Logo_wnpyel.png"/>
<p class="mt-1 ml-4 text-2xl text-gray-200">
example.com
</p>
</a>
         


  



<img class="z-20 w-40 h-40 md:w-64 md:h-64 blogoanm" src="https://res.cloudinary.com/dr3osevsp/image/upload/v1624956361/Blogo_xddf8r.png"  />
<div class="shadowbanm"></div>
  
  

 

        <div class="z-0 leaf leaf1">
        <div>  <img src="https://res.cloudinary.com/dr3osevsp/image/upload/v1624956442/18_zksrom.png" height="30px" width="30px"></div>
         <div><img src="https://res.cloudinary.com/dr3osevsp/image/upload/v1624956441/14_b6cvgc.png" height="30px" width="30px"></div>
         <div>  <img src="https://res.cloudinary.com/dr3osevsp/image/upload/v1624956443/21_aisack.png" height="30px" width="30px" ></div>
          <div> <img src="https://res.cloudinary.com/dr3osevsp/image/upload/v1624956442/32_ybyzdq.png" height="30px" width="30px"></div>
        <div>   <img src="https://res.cloudinary.com/dr3osevsp/image/upload/v1624956443/52_zxwqgg.png" height="30px" width="30px"></div>
        <div><img src="https://res.cloudinary.com/dr3osevsp/image/upload/v1624956443/33_j3dahu.png" height="30px" width="30px"></div>
               
        </div>
        
        <div class="z-0 leaf leaf2">
      <div>  <img src="https://res.cloudinary.com/dr3osevsp/image/upload/v1624956442/18_zksrom.png" height="30px" width="30px"></div>
         <div><img src="https://res.cloudinary.com/dr3osevsp/image/upload/v1624956441/14_b6cvgc.png" height="30px" width="30px"></div>
         <div>  <img src="https://res.cloudinary.com/dr3osevsp/image/upload/v1624956443/21_aisack.png" height="30px" width="30px" ></div>
          <div> <img src="https://res.cloudinary.com/dr3osevsp/image/upload/v1624956442/32_ybyzdq.png" height="30px" width="30px"></div>
        <div>   <img src="https://res.cloudinary.com/dr3osevsp/image/upload/v1624956443/52_zxwqgg.png" height="30px" width="30px"></div>
        <div><img src="https://res.cloudinary.com/dr3osevsp/image/upload/v1624956443/33_j3dahu.png" height="30px" width="30px"></div>
                
        </div>   
               <div class="relative z-30 flex flex-col justify-center px-4 md:pr-12">
                            <div class="flex flex-col items-center justify-center px-2">


 



                            </div>
                            
                            


<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=Cairo:wght@400&display=swap" rel="stylesheet">

<h3 style="font-family: 'Cairo', sans-serif;" class="z-20 pt-8 text-4xl leading-tight text-center text-white">example Tool</h3>
<span style="font-family: 'Cairo', sans-serif;" class="z-20 pt-8 text-2xl leading-tight text-center text-white">

تمنحك أداة تجربة  تول السيطرة علي موقعك لدي محركات البحث


</span>   


                 <button onclick="run()" class="z-20 pt-8 text-4xl leading-tight text-center text-yellow-300">
                   
                   
                   
click Me to see another design                   
                   
                 </button>







                      
                        </div>
              
                    </div>
               
               
               
               
               
 
               
              
               
               
               
               <form style="display:inherit" id="register" class="flex justify-center w-full bg-gray-50 lg:w-1/2" data-form_change2="true" dir="rtl">
                        <div class="flex flex-col justify-center w-full px-2 mb-12 text-gray-800 rounded-lg shadow-sm sm:w-4/6 md:w-3/6 lg:w-2/3 dark:text-gray-100 sm:mb-0 sm:px-0">


<div class="absolute bottom-0 right-0 hidden md:block animate-pulse">
 
<svg width="236px" height="234px" viewBox="0 0 236 234" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                <defs>
                                    <polygon id="path-1" points="0 4.54747351e-13 236 4.54747351e-13 236 234 0 234"></polygon>
                                </defs>
                                <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <g id="Sign-In-5" transform="translate(-487.000000, -790.000000)">
                                        <g id="Group-464" transform="translate(605.000000, 907.000000) rotate(-180.000000) translate(-605.000000, -907.000000) translate(487.000000, 790.000000)">
                                            <mask id="mask-2" fill="white">
                                                <use xlink:href="#path-1"></use>
                                            </mask>
                                            <g id="Clip-450"></g>
                                            <path d="M1,234 C-128.785798,234 -234,128.785798 -234,-1 C-234,-130.785798 -128.785798,-236 1,-236 C130.788182,-236 236,-130.785798 236,-1 C236,128.785798 130.788182,234 1,234 Z" id="Stroke-449" stroke="#7F9CF5" stroke-width="0.704" mask="url(#mask-2)"></path>
                                            <path d="M-0.5,217 C-120.620637,217 -218,119.175305 -218,-1.5 C-218,-122.175305 -120.620637,-220 -0.5,-220 C119.623015,-220 217,-122.175305 217,-1.5 C217,119.175305 119.623015,217 -0.5,217 Z" id="Stroke-451" stroke="#7F9CF5" stroke-width="0.688" mask="url(#mask-2)"></path>
                                            <path d="M0.998808246,199 C-110.010672,199 -200,109.010672 -200,-1.99880825 C-200,-113.008289 -110.010672,-203 0.998808246,-203 C112.008289,-203 202,-113.008289 202,-1.99880825 C202,109.010672 112.008289,199 0.998808246,199 Z" id="Stroke-452" stroke="#7F9CF5" stroke-width="0.672" mask="url(#mask-2)"></path>
                                            <path d="M0.5,182 C-100.843661,182 -183,99.3959421 -183,-2.5 C-183,-104.395942 -100.843661,-187 0.5,-187 C101.843661,-187 184,-104.395942 184,-2.5 C184,99.3959421 101.843661,182 0.5,182 Z" id="Stroke-453" stroke="#7F9CF5" stroke-width="0.657" mask="url(#mask-2)"></path>
                                            <path d="M1,166 C-91.2307802,166 -166,91.2307802 -166,-1 C-166,-93.2307802 -91.2307802,-168 1,-168 C93.2331631,-168 168,-93.2307802 168,-1 C168,91.2307802 93.2331631,166 1,166 Z" id="Stroke-454" stroke="#7F9CF5" stroke-width="0.641" mask="url(#mask-2)"></path>
                                            <path d="M1.49881277,149 C-81.0661515,149 -148,81.6208238 -148,-1.49880483 C-148,-84.6184335 -81.0661515,-152 1.49881277,-152 C84.0661515,-152 151,-84.6184335 151,-1.49880483 C151,81.6208238 84.0661515,149 1.49881277,149 Z" id="Stroke-455" stroke="#7F9CF5" stroke-width="0.625" mask="url(#mask-2)"></path>
                                            <path d="M1,131 C-72.4538047,131 -132,71.4538047 -132,-2 C-132,-75.4538047 -72.4538047,-135 1,-135 C74.4538047,-135 134,-75.4538047 134,-2 C134,71.4538047 74.4538047,131 1,131 Z" id="Stroke-456" stroke="#7F9CF5" stroke-width="0.609" mask="url(#mask-2)"></path>
                                            <path d="M-0.5,115 C-64.840925,115 -117,62.840925 -117,-1.5 C-117,-65.840925 -64.840925,-118 -0.5,-118 C63.840925,-118 116,-65.840925 116,-1.5 C116,62.840925 63.840925,115 -0.5,115 Z" id="Stroke-457" stroke="#7F9CF5" stroke-width="0.593" mask="url(#mask-2)"></path>
                                            <path d="M0.99880991,98 C-53.6762956,98 -98,53.6762956 -98,-0.99880991 C-98,-55.6762956 -53.6762956,-100 0.99880991,-100 C55.6762956,-100 100,-55.6762956 100,-0.99880991 C100,53.6762956 55.6762956,98 0.99880991,98 Z" id="Stroke-458" stroke="#7F9CF5" stroke-width="0.578" mask="url(#mask-2)"></path>
                                            <path d="M0.5,82 C-45.061559,82 -82,45.0639523 -82,-0.5 C-82,-46.0639523 -45.061559,-83 0.5,-83 C46.0639523,-83 83,-46.0639523 83,-0.5 C83,45.0639523 46.0639523,82 0.5,82 Z" id="Stroke-459" stroke="#7F9CF5" stroke-width="0.562" mask="url(#mask-2)"></path>
                                            <path d="M1,63 C-34.898786,63 -64,33.898786 -64,-2 C-64,-37.898786 -34.898786,-67 1,-67 C36.898786,-67 66,-37.898786 66,-2 C66,33.898786 36.898786,63 1,63 Z" id="Stroke-460" stroke="#7F9CF5" stroke-width="0.546" mask="url(#mask-2)"></path>
                                            <path d="M1.49880102,46 C-25.2864453,46 -47,24.2864453 -47,-2.49880102 C-47,-29.2840474 -25.2864453,-51 1.49880102,-51 C28.2840474,-51 50,-29.2840474 50,-2.49880102 C50,24.2864453 28.2840474,46 1.49880102,46 Z" id="Stroke-461" stroke="#7F9CF5" stroke-width="0.53" mask="url(#mask-2)"></path>
                                            <path d="M1,30 C-16.1194383,30 -30,16.1194383 -30,-1 C-30,-18.1218042 -16.1194383,-32 1,-32 C18.1218042,-32 32,-18.1218042 32,-1 C32,16.1194383 18.1218042,30 1,30 Z" id="Stroke-462" stroke="#7F9CF5" stroke-width="0.514" mask="url(#mask-2)"></path>
                                            <path d="M1.5,13 C-6.50652174,13 -13,6.50894649 -13,-1.5 C-13,-9.50894649 -6.50652174,-16 1.5,-16 C9.50894649,-16 16,-9.50894649 16,-1.5 C16,6.50894649 9.50894649,13 1.5,13 Z" id="Stroke-463" stroke="#7F9CF5" stroke-width="0.498" mask="url(#mask-2)"></path>
                                        </g>
                                    </g>
                                </g>
                            </svg>                     </div>

<div class="z-20 py-6 bg-white border border-gray-300" data-rounded-type="false">


<div class="flex flex-col items-center justify-center px-2 pt-12 lg:pt-0">
        
<img class="w-16 h-16 rounded-full" src="https://res.cloudinary.com/dr3osevsp/image/upload/v1624956639/Logo_wnpyel.png"/>
</div>

                            
<div class="w-full px-2 mt-8 sm:px-6" id="conter_regist">


<div id="regloader" style="display:block">


<h2 class="mb-4 text-xl text-center text-gray-700">تسجيل حساب جديد</h2>






<ul class="flex border-b outline-none cursor-pointer select-none">
      <li class="mr-1 -mb-px">
        <a class="inline-block px-4 py-2 font-semibold text-blue-700 bg-white border-t border-l border-r rounded-t"  onclick="register()">
        
        إنشاء حساب
        
        </a>
      </li>
      <li class="mr-1 ">
        <a class="inline-block px-4 py-2 font-semibold text-blue-500 bg-white border-t border-l border-r hover:text-blue-800" onclick="login()">
        تسجيل دخول
        </a>
      </li>
  
    </ul>


<div class="py-4">


<div class="relative mb-4">
<label class="block mb-2 text-gray-700">اسم المستخدم</label>
<input type="text" name="name" class="flex-1 w-full px-3 py-1 text-base leading-8 text-gray-700 transition-colors duration-200 ease-in-out border border-gray-300 rounded-lg shadow-sm outline-none appearance-none focus:border-blue-100 focus:ring focus:ring-blue-100" placeholder="Ali Khalaf">
</div>

<div class="relative mb-4">
<label class="block mb-2 text-gray-700">البريد الإلكتروني</label>
<input   type="email" name="email" class="flex-1 w-full px-3 py-1 text-base leading-8 text-gray-700 transition-colors duration-200 ease-in-out border border-gray-300 rounded-lg shadow-sm outline-none appearance-none focus:border-blue-100 focus:ring focus:ring-blue-100" placeholder="Ali Khalaf">
</div>                               

<div class="relative mb-4">
<label class="block mb-2 text-gray-700">كلمة المرور</label>
<input  type="password"  name="password" class="flex-1 w-full px-3 py-1 text-base leading-8 text-gray-700 transition-colors duration-200 ease-in-out border border-gray-300 rounded-lg shadow-sm outline-none appearance-none focus:border-blue-100 focus:ring focus:ring-blue-100" placeholder="Ali Khalaf">
<div class="grid w-full h-1 grid-cols-12 gap-4 mt-3" id="valregs">
            <div class="h-full col-span-3 bg-blue-500 rounded">
            </div>
            <div class="h-full col-span-3 bg-gray-200 rounded">
            </div>
            <div class="h-full col-span-3 bg-gray-200 rounded">
            </div>
            <div class="h-full col-span-3 bg-gray-200 rounded dark:bg-dark-1">
            </div>
        </div>
<div class="mt-2 text-blue-400">
ضع باسورد صعب التخمين
        </div>
</div>


                            </div>



<div class="px-2 sm:mb-16 sm:px-6">



 
<div class="space-y-12">
  <div class="flex space-x-12">
    <div class="shadow">
        <button type="button" class="inline-flex items-center px-4 py-2 text-base font-medium leading-6 text-white border border-transparent rounded-md bg-example hover:bg-blue-500 focus:outline-none focus:border-blue-700 focus:shadow-outline-blue">
إنشاء حساب       
 </button>
    </div>
  </div>
</div>






<p class="mt-3 text-xs text-gray-600">
    
بالتسجيل ، فإنك توافق على الشروط وسياسة البيانات الخاصة بنا.
    </p>
</div>

</div>



</div>




</div>


</div>



                    </form>
               
               
               
               






















 
                <form style="display:none;" id="login" class="flex justify-center w-full bg-gray-50 lg:w-1/2" dir="rtl" data-form_change2="true">
                        <div class="flex flex-col justify-center w-full px-2 mb-12 text-gray-800 rounded-lg shadow-sm sm:w-4/6 md:w-3/6 lg:w-2/3 dark:text-gray-100 sm:mb-0 sm:px-0">


<div class="absolute bottom-0 right-0 hidden md:block animate-pulse">
 
<svg width="236px" height="234px" viewBox="0 0 236 234" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                <defs>
                                    <polygon id="path-1" points="0 4.54747351e-13 236 4.54747351e-13 236 234 0 234"></polygon>
                                </defs>
                                <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <g id="Sign-In-5" transform="translate(-487.000000, -790.000000)">
                                        <g id="Group-464" transform="translate(605.000000, 907.000000) rotate(-180.000000) translate(-605.000000, -907.000000) translate(487.000000, 790.000000)">
                                            <mask id="mask-2" fill="white">
                                                <use xlink:href="#path-1"></use>
                                            </mask>
                                            <g id="Clip-450"></g>
                                            <path d="M1,234 C-128.785798,234 -234,128.785798 -234,-1 C-234,-130.785798 -128.785798,-236 1,-236 C130.788182,-236 236,-130.785798 236,-1 C236,128.785798 130.788182,234 1,234 Z" id="Stroke-449" stroke="#7F9CF5" stroke-width="0.704" mask="url(#mask-2)"></path>
                                            <path d="M-0.5,217 C-120.620637,217 -218,119.175305 -218,-1.5 C-218,-122.175305 -120.620637,-220 -0.5,-220 C119.623015,-220 217,-122.175305 217,-1.5 C217,119.175305 119.623015,217 -0.5,217 Z" id="Stroke-451" stroke="#7F9CF5" stroke-width="0.688" mask="url(#mask-2)"></path>
                                            <path d="M0.998808246,199 C-110.010672,199 -200,109.010672 -200,-1.99880825 C-200,-113.008289 -110.010672,-203 0.998808246,-203 C112.008289,-203 202,-113.008289 202,-1.99880825 C202,109.010672 112.008289,199 0.998808246,199 Z" id="Stroke-452" stroke="#7F9CF5" stroke-width="0.672" mask="url(#mask-2)"></path>
                                            <path d="M0.5,182 C-100.843661,182 -183,99.3959421 -183,-2.5 C-183,-104.395942 -100.843661,-187 0.5,-187 C101.843661,-187 184,-104.395942 184,-2.5 C184,99.3959421 101.843661,182 0.5,182 Z" id="Stroke-453" stroke="#7F9CF5" stroke-width="0.657" mask="url(#mask-2)"></path>
                                            <path d="M1,166 C-91.2307802,166 -166,91.2307802 -166,-1 C-166,-93.2307802 -91.2307802,-168 1,-168 C93.2331631,-168 168,-93.2307802 168,-1 C168,91.2307802 93.2331631,166 1,166 Z" id="Stroke-454" stroke="#7F9CF5" stroke-width="0.641" mask="url(#mask-2)"></path>
                                            <path d="M1.49881277,149 C-81.0661515,149 -148,81.6208238 -148,-1.49880483 C-148,-84.6184335 -81.0661515,-152 1.49881277,-152 C84.0661515,-152 151,-84.6184335 151,-1.49880483 C151,81.6208238 84.0661515,149 1.49881277,149 Z" id="Stroke-455" stroke="#7F9CF5" stroke-width="0.625" mask="url(#mask-2)"></path>
                                            <path d="M1,131 C-72.4538047,131 -132,71.4538047 -132,-2 C-132,-75.4538047 -72.4538047,-135 1,-135 C74.4538047,-135 134,-75.4538047 134,-2 C134,71.4538047 74.4538047,131 1,131 Z" id="Stroke-456" stroke="#7F9CF5" stroke-width="0.609" mask="url(#mask-2)"></path>
                                            <path d="M-0.5,115 C-64.840925,115 -117,62.840925 -117,-1.5 C-117,-65.840925 -64.840925,-118 -0.5,-118 C63.840925,-118 116,-65.840925 116,-1.5 C116,62.840925 63.840925,115 -0.5,115 Z" id="Stroke-457" stroke="#7F9CF5" stroke-width="0.593" mask="url(#mask-2)"></path>
                                            <path d="M0.99880991,98 C-53.6762956,98 -98,53.6762956 -98,-0.99880991 C-98,-55.6762956 -53.6762956,-100 0.99880991,-100 C55.6762956,-100 100,-55.6762956 100,-0.99880991 C100,53.6762956 55.6762956,98 0.99880991,98 Z" id="Stroke-458" stroke="#7F9CF5" stroke-width="0.578" mask="url(#mask-2)"></path>
                                            <path d="M0.5,82 C-45.061559,82 -82,45.0639523 -82,-0.5 C-82,-46.0639523 -45.061559,-83 0.5,-83 C46.0639523,-83 83,-46.0639523 83,-0.5 C83,45.0639523 46.0639523,82 0.5,82 Z" id="Stroke-459" stroke="#7F9CF5" stroke-width="0.562" mask="url(#mask-2)"></path>
                                            <path d="M1,63 C-34.898786,63 -64,33.898786 -64,-2 C-64,-37.898786 -34.898786,-67 1,-67 C36.898786,-67 66,-37.898786 66,-2 C66,33.898786 36.898786,63 1,63 Z" id="Stroke-460" stroke="#7F9CF5" stroke-width="0.546" mask="url(#mask-2)"></path>
                                            <path d="M1.49880102,46 C-25.2864453,46 -47,24.2864453 -47,-2.49880102 C-47,-29.2840474 -25.2864453,-51 1.49880102,-51 C28.2840474,-51 50,-29.2840474 50,-2.49880102 C50,24.2864453 28.2840474,46 1.49880102,46 Z" id="Stroke-461" stroke="#7F9CF5" stroke-width="0.53" mask="url(#mask-2)"></path>
                                            <path d="M1,30 C-16.1194383,30 -30,16.1194383 -30,-1 C-30,-18.1218042 -16.1194383,-32 1,-32 C18.1218042,-32 32,-18.1218042 32,-1 C32,16.1194383 18.1218042,30 1,30 Z" id="Stroke-462" stroke="#7F9CF5" stroke-width="0.514" mask="url(#mask-2)"></path>
                                            <path d="M1.5,13 C-6.50652174,13 -13,6.50894649 -13,-1.5 C-13,-9.50894649 -6.50652174,-16 1.5,-16 C9.50894649,-16 16,-9.50894649 16,-1.5 C16,6.50894649 9.50894649,13 1.5,13 Z" id="Stroke-463" stroke="#7F9CF5" stroke-width="0.498" mask="url(#mask-2)"></path>
                                        </g>
                                    </g>
                                </g>
                            </svg>                     </div>

<div class="z-20 py-6 bg-white border border-gray-300" data-rounded-type="false">


<div class="flex flex-col items-center justify-center px-2 pt-12 lg:pt-0">
        
<img class="w-16 h-16 rounded-full" src="https://res.cloudinary.com/dr3osevsp/image/upload/v1624956639/Logo_wnpyel.png"/>
</div>

                            
<div class="w-full px-2 mt-8 sm:px-6" id="conterlogin">




<div id="loginloader" style="display:none">


<h2 class="mb-4 text-xl text-center text-gray-700" id="switchvr">

تسجيل الدخول لحسابك


</h2>






<ul class="flex border-b outline-none cursor-pointer select-none">
      <li class="mr-1 -mb-px">
        <a class="inline-block px-4 py-2 font-semibold text-blue-700 bg-white border-t border-l border-r rounded-t"  onclick="register()">
        
        إنشاء حساب
        
        </a>
      </li>
      <li class="mr-1 ">
        <a class="inline-block px-4 py-2 font-semibold text-blue-500 bg-white border-t border-l border-r hover:text-blue-800" onclick="login()">
        تسجيل دخول
        </a>
      </li>
  
    </ul>


<div class="py-4">


<div class="relative mb-4">
<label class="block mb-2 text-gray-700" for="username">اسم المستخدم</label>
<input type="text" name="name" class="flex-1 w-full px-3 py-1 text-base leading-8 text-gray-700 transition-colors duration-200 ease-in-out border border-gray-300 rounded-lg shadow-sm outline-none appearance-none focus:border-blue-100 focus:ring focus:ring-blue-100" placeholder="Ali Khalaf">
</div>


<div class="relative mb-4">
<label class="block mb-2 text-gray-700" for="username">اسم المستخدم</label>
<input type="text" name="name" class="flex-1 w-full px-3 py-1 text-base leading-8 text-gray-700 transition-colors duration-200 ease-in-out border border-gray-300 rounded-lg shadow-sm outline-none appearance-none focus:border-blue-100 focus:ring focus:ring-blue-100" placeholder="Ali Khalaf">
<div class="grid w-full h-1 grid-cols-12 gap-4 mt-3" id="valregs">
            <div class="h-full col-span-3 bg-blue-500 rounded">
            </div>
            <div class="h-full col-span-3 bg-gray-200 rounded">
            </div>
            <div class="h-full col-span-3 bg-gray-200 rounded">
            </div>
            <div class="h-full col-span-3 bg-gray-200 rounded dark:bg-dark-1">
            </div>
        </div>
<div class="mt-2 text-blue-400">
ضع باسورد صعب التخمين
        </div>
</div>


                            </div>



<div class="px-2 sm:mb-16 sm:px-6">



 
<div class="space-y-12">
  <div class="flex space-x-12">
    <div class="shadow">
        <button type="button" class="inline-flex items-center px-4 py-2 text-base font-medium leading-6 text-white border border-transparent rounded-md bg-example hover:bg-blue-500 focus:outline-none focus:border-blue-700 focus:shadow-outline-blue">

تسجيل الدخول

 </button>
    </div>
  </div>
</div>






<p class="mt-3 text-xs text-gray-600">
    
بإنشاء حساب جديد فأنت توافق علي مشاركة موقعك 

    </p>
</div>


</div>









</div>




</div>


</div>



                    </form>
                </div>
            </section>


















<script>



// start
var state = false;

function run(){
    state = !state;
  if (state) {
    
[...document.querySelectorAll('[data-form_change2="true"]')].forEach(function(el) {
el.classList.remove('bg-white');
el.classList.remove('bg-gray-50');
});
document.querySelector('[data-form_change2="false"]').classList.remove('bg-start');
document.querySelector('section').classList.add("bg-start");
[...document.querySelectorAll('[data-rounded-type="false"]')].forEach(function(el) {
el.classList.add("rounded-3xl");
});

  }
  else{
    
    
       
[...document.querySelectorAll('[data-form_change2="true"]')].forEach(function(el) {
el.classList.add('bg-white');
el.classList.add('bg-gray-50');
});
document.querySelector('[data-form_change2="false"]').classList.add('bg-start');
document.querySelector('section').classList.remove("bg-start");
[...document.querySelectorAll('[data-rounded-type="false"]')].forEach(function(el) {
el.classList.add("rounded-3xl");
});

    
    
    
    
    
    
  }
  
}


//end






var logn = document.getElementById("login");
var regster =  document.getElementById("register");
function login(){
var conterlogin =  document.getElementById("conterlogin"); 
var loginloader =  document.getElementById("loginloader"); 



(loginloader.style.display = "block") ? loginloader.style.display= "none" : loginloader.style.display= "block";

conterlogin.classList.add('skeleton-box');
conterlogin.classList.add('h-72');
setTimeout(function(){

conterlogin.classList.remove('skeleton-box');
conterlogin.classList.remove('h-72');

(loginloader.style.display = "none") ? loginloader.style.display= "block" : loginloader.style.display= "none";


}, 1500);
regster.style.display = "none";
(logn.style.display = "none") ? logn.style.display= "inherit" : logn.style.display= "none";





}

function register(){

var conter_regist =  document.getElementById("conter_regist"); 
var regloader =  document.getElementById("regloader"); 





(regloader.style.display = "block") ? regloader.style.display= "none" : regloader.style.display= "block";

conter_regist.classList.add('skeleton-box');
conter_regist.classList.add('h-72');
setTimeout(function(){

conter_regist.classList.remove('skeleton-box');
conter_regist.classList.remove('h-72');

(regloader.style.display = "none") ? regloader.style.display= "block" : regloader.style.display= "none";


}, 1500);


logn.style.display = "none";

(regster.style.display = "none") ? regster.style.display= "inherit" : regster.style.display= "none";


 


}




</script>

How to create a Tailwind Css RTL register and login Page 2 design with Tailwind CSS?

To create a Tailwind CSS RTL register and login Page 2 design, follow these steps:

  1. Create a new HTML file and add the necessary HTML elements for a registration and login page, such as input fields, buttons, and error messages.

  2. Add the Tailwind CSS CDN to your HTML file:

<link href="https://cdn.jsdelivr.net/npm/tailwindcss@latest/dist/tailwind.min.css" rel="stylesheet">
  1. Add the necessary Tailwind CSS classes to your HTML elements to style them. For example, to style an input field, you can use the following classes:
<input class="border border-gray-400 p-2 rounded-lg w-full" type="text" placeholder="Enter your email">
  1. Use the RTL classes to flip the layout for right-to-left languages. For example, to flip the layout of a login form, you can use the following classes:
<div class="flex flex-col items-center justify-center h-screen">
  <form class="bg-white p-6 rounded-lg shadow-md w-96">
    <h2 class="text-2xl font-bold mb-6">{{__placeholder3__}}</h2>
    <div class="w-full mb-4">
      <label class="block text-gray-700 font-bold mb-2" for="username">{{__placeholder4__}}</label>
      <input class="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="{{__placeholder5__}}">
    </div>
    <div class="w-full mb-4">
      <label class="block text-gray-700 font-bold mb-2" for="password">{{__placeholder6__}}</label>
      <input class="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="{{__placeholder7__}}">
    </div>
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">{{__placeholder8__}}</button>
  </form>
</div>
  1. Customize the styles to fit your needs. You can modify the colors, fonts, and sizes by editing the Tailwind CSS configuration file.

Conclusion

In conclusion, creating a Tailwind CSS RTL register and login Page 2 design UI component is easy and straightforward with Tailwind CSS. By using the pre-defined classes and RTL support, you can create a professional-looking UI component in no time. Additionally, Tailwind CSS is highly customizable, which means you can easily modify the styles to fit your needs.