پیشنمایش زنده
کد HTML
<div
class="form w-[300px] rounded-md shadow-xl overflow-hidden z-[100] relative cursor-pointer snap-start shrink-0 py-5 px-6 bg-[#DFA16A] r flex flex-col items-center justify-center gap-3 transition-all duration-300"
>
<p
class="text-[#A15A3E] translate-x-[46%] -rotate-90 tracking-[20px] transition-all hover:translate-x-[50%] -translate-y-1/2 font-semibold text-2xl absolute right-0"
>
Welcome
</p>
<div class="capitalize">
<p class="text-2xl text-[#7F3D27] pb-5">Create Your Account</p>
<form action="" class="flex flex-col gap-3">
<div class="flex flex-col items-start w-full">
<label for="name" class="text-sm text-[#7F3D27] font-semibold"
>Name</label
>
<input
type="text"
placeholder="Enter Your Name"
class="w-full py-px pl-0 bg-transparent outline-none focus:ring-0 border-0 border-b-2 border-[#7F3D27] placeholder:text-[#A15A3E] focus:outline-none text-[#7F3D27] placeholder:text-xs"
/>
</div>
<div class="flex flex-col items-start w-full">
<label for="email" class="text-sm text-[#7F3D27] font-semibold"
>Email</label
>
<input
type="email"
placeholder="Enter Your Email"
class="w-full py-px pl-0 bg-transparent outline-none focus:ring-0 border-0 border-b-2 border-[#7F3D27] placeholder:text-[#A15A3E] focus:outline-none text-[#7F3D27] placeholder:text-xs"
/>
</div>
<div class="flex flex-col items-start w-full">
<label for="password" class="text-sm text-[#7F3D27] font-semibold"
>Password</label
>
<input
type="password"
placeholder="Enter Your Password"
class="w-full py-px pl-0 bg-transparent outline-none focus:ring-0 border-0 border-b-2 border-[#7F3D27] placeholder:text-[#A15A3E] focus:outline-none text-[#7F3D27] placeholder:text-xs"
/>
</div>
<div class="inline-flex gap-2 items-center text-[#A15A3E]">
<input
type="checkbox"
name=""
id=""
class="w-3 h-3 focus:border-0 focus:outline-none focus:accent-[#7F3D27] checked:accent-[#A15A3E] checked:text-[#A15A3E] px-1 py-1"
checked=""
/>
<p class="text-xs">
By Signing Agree with
<span class="font-semibold">Term & Policy</span>
</p>
</div>
<div class="inline-flex gap-5">
<button
class="px-6 focus:outline-none focus:scale-110 font-semibold text-xs py-2 rounded-[5px] hover:scale-110 transition-all hover:transiton text-[#D9D9D9] bg-[#7F3D27] shadow-[#7F3D27] shadow-lg"
>
Sign Up
</button>
<button
class="px-6 focus:outline-none focus:scale-110 font-semibold text-xs py-2 rounded-[5px] hover:scale-110 transition-all hover:transiton text-[#7F3D27] bg-[#D9D9D9] shadow-[#7F3D27] shadow-lg"
>
Sign In
</button>
</div>
</form>
</div>
</div>
کد CSS
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.right-0 {
right: 0px;
}
.z-\[100\] {
z-index: 100;
}
.flex {
display: flex;
}
.inline-flex {
display: inline-flex;
}
.h-3 {
height: 0.75rem;
}
.w-3 {
width: 0.75rem;
}
.w-\[300px\] {
width: 300px;
}
.w-full {
width: 100%;
}
.shrink-0 {
flex-shrink: 0;
}
.-translate-y-1\/2 {
--tw-translate-y: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-\[46\%\] {
--tw-translate-x: 46%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-rotate-90 {
--tw-rotate: -90deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.cursor-pointer {
cursor: pointer;
}
.snap-start {
scroll-snap-align: start;
}
.flex-col {
flex-direction: column;
}
.items-start {
align-items: flex-start;
}
.items-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
.gap-2 {
gap: 0.5rem;
}
.gap-3 {
gap: 0.75rem;
}
.gap-5 {
gap: 1.25rem;
}
.overflow-hidden {
overflow: hidden;
}
.rounded-\[5px\] {
border-radius: 5px;
}
.rounded-md {
border-radius: 0.375rem;
}
.border-0 {
border-width: 0px;
}
.border-b-2 {
border-bottom-width: 2px;
}
.border-\[\#7F3D27\] {
--tw-border-opacity: 1;
border-color: rgb(127 61 39 / var(--tw-border-opacity));
}
.bg-\[\#7F3D27\] {
--tw-bg-opacity: 1;
background-color: rgb(127 61 39 / var(--tw-bg-opacity));
}
.bg-\[\#D9D9D9\] {
--tw-bg-opacity: 1;
background-color: rgb(217 217 217 / var(--tw-bg-opacity));
}
.bg-\[\#DFA16A\] {
--tw-bg-opacity: 1;
background-color: rgb(223 161 106 / var(--tw-bg-opacity));
}
.bg-transparent {
background-color: transparent;
}
.px-1 {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.py-1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.py-5 {
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
.py-px {
padding-top: 1px;
padding-bottom: 1px;
}
.pb-5 {
padding-bottom: 1.25rem;
}
.pl-0 {
padding-left: 0px;
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.text-xs {
font-size: 0.75rem;
line-height: 1rem;
}
.font-semibold {
font-weight: 600;
}
.capitalize {
text-transform: capitalize;
}
.tracking-\[20px\] {
letter-spacing: 20px;
}
.text-\[\#7F3D27\] {
--tw-text-opacity: 1;
color: rgb(127 61 39 / var(--tw-text-opacity));
}
.text-\[\#A15A3E\] {
--tw-text-opacity: 1;
color: rgb(161 90 62 / var(--tw-text-opacity));
}
.text-\[\#D9D9D9\] {
--tw-text-opacity: 1;
color: rgb(217 217 217 / var(--tw-text-opacity));
}
.shadow-lg {
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl {
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),
0 8px 10px -6px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),
0 8px 10px -6px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[\#7F3D27\] {
--tw-shadow-color: #7f3d27;
--tw-shadow: var(--tw-shadow-colored);
}
.outline-none {
outline: 2px solid transparent;
outline-offset: 2px;
}
.transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.duration-300 {
transition-duration: 300ms;
}
.placeholder\:text-xs::placeholder {
font-size: 0.75rem;
line-height: 1rem;
}
.placeholder\:text-\[\#A15A3E\]::placeholder {
--tw-text-opacity: 1;
color: rgb(161 90 62 / var(--tw-text-opacity));
}
.checked\:text-\[\#A15A3E\]:checked {
--tw-text-opacity: 1;
color: rgb(161 90 62 / var(--tw-text-opacity));
}
.checked\:accent-\[\#A15A3E\]:checked {
accent-color: #a15a3e;
}
.hover\:translate-x-\[50\%\]:hover {
--tw-translate-x: 50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:scale-110:hover {
--tw-scale-x: 1.1;
--tw-scale-y: 1.1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.focus\:scale-110:focus {
--tw-scale-x: 1.1;
--tw-scale-y: 1.1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.focus\:border-0:focus {
border-width: 0px;
}
.focus\:accent-\[\#7F3D27\]:focus {
accent-color: #7f3d27;
}
.focus\:outline-none:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.focus\:ring-0:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0
calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
var(--tw-shadow, 0 0 #0000);
}