پیشنمایش زنده
کد HTML
<div
class="relative flex w-96 flex-col rounded-xl bg-white bg-clip-border text-gray-700 shadow-md"
>
<div
class="relative mx-4 -mt-6 mb-4 grid h-28 place-items-center overflow-hidden rounded-xl bg-gradient-to-tr from-cyan-600 to-cyan-400 bg-clip-border text-white shadow-lg shadow-cyan-500/40"
>
<h3
class="block font-sans text-3xl font-semibold leading-snug tracking-normal text-white antialiased"
>
Sign In
</h3>
</div>
<div class="flex flex-col gap-4 p-6">
<div class="relative h-11 w-full min-w-[200px]">
<input
placeholder=""
class="peer h-full w-full rounded-md border border-blue-gray-200 border-t-transparent bg-transparent px-3 py-3 font-sans text-sm font-normal text-blue-gray-700 outline outline-0 transition-all placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 focus:border-2 focus:border-cyan-500 focus:border-t-transparent focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50"
/>
<label
class="before:content[' '] after:content[' '] pointer-events-none absolute left-0 -top-1.5 flex h-full w-full select-none text-[11px] font-normal leading-tight text-blue-gray-400 transition-all before:pointer-events-none before:mt-[6.5px] before:mr-1 before:box-border before:block before:h-1.5 before:w-2.5 before:rounded-tl-md before:border-t before:border-l before:border-blue-gray-200 before:transition-all after:pointer-events-none after:mt-[6.5px] after:ml-1 after:box-border after:block after:h-1.5 after:w-2.5 after:flex-grow after:rounded-tr-md after:border-t after:border-r after:border-blue-gray-200 after:transition-all peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[4.1] peer-placeholder-shown:text-blue-gray-500 peer-placeholder-shown:before:border-transparent peer-placeholder-shown:after:border-transparent peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-cyan-500 peer-focus:before:border-t-2 peer-focus:before:border-l-2 peer-focus:before:!border-cyan-500 peer-focus:after:border-t-2 peer-focus:after:border-r-2 peer-focus:after:!border-cyan-500 peer-disabled:text-transparent peer-disabled:before:border-transparent peer-disabled:after:border-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500"
>
Email
</label>
</div>
<div class="relative h-11 w-full min-w-[200px]">
<input
placeholder=""
class="peer h-full w-full rounded-md border border-blue-gray-200 border-t-transparent bg-transparent px-3 py-3 font-sans text-sm font-normal text-blue-gray-700 outline outline-0 transition-all placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 focus:border-2 focus:border-cyan-500 focus:border-t-transparent focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50"
/>
<label
class="before:content[' '] after:content[' '] pointer-events-none absolute left-0 -top-1.5 flex h-full w-full select-none text-[11px] font-normal leading-tight text-blue-gray-400 transition-all before:pointer-events-none before:mt-[6.5px] before:mr-1 before:box-border before:block before:h-1.5 before:w-2.5 before:rounded-tl-md before:border-t before:border-l before:border-blue-gray-200 before:transition-all after:pointer-events-none after:mt-[6.5px] after:ml-1 after:box-border after:block after:h-1.5 after:w-2.5 after:flex-grow after:rounded-tr-md after:border-t after:border-r after:border-blue-gray-200 after:transition-all peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[4.1] peer-placeholder-shown:text-blue-gray-500 peer-placeholder-shown:before:border-transparent peer-placeholder-shown:after:border-transparent peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-cyan-500 peer-focus:before:border-t-2 peer-focus:before:border-l-2 peer-focus:before:!border-cyan-500 peer-focus:after:border-t-2 peer-focus:after:border-r-2 peer-focus:after:!border-cyan-500 peer-disabled:text-transparent peer-disabled:before:border-transparent peer-disabled:after:border-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500"
>
Password
</label>
</div>
<div class="-ml-2.5">
<div class="inline-flex items-center">
<label
data-ripple-dark="true"
for="checkbox"
class="relative flex cursor-pointer items-center rounded-full p-3"
>
<input
id="checkbox"
class="before:content[''] peer relative h-5 w-5 cursor-pointer appearance-none rounded-md border border-blue-gray-200 transition-all before:absolute before:top-2/4 before:left-2/4 before:block before:h-12 before:w-12 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-blue-gray-500 before:opacity-0 before:transition-opacity checked:border-cyan-500 checked:bg-cyan-500 checked:before:bg-cyan-500 hover:before:opacity-10"
type="checkbox"
/>
<span
class="pointer-events-none absolute top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 text-white opacity-0 transition-opacity peer-checked:opacity-100"
>
<svg
stroke-width="1"
stroke="currentColor"
fill="currentColor"
viewBox="0 0 20 20"
class="h-3.5 w-3.5"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
fill-rule="evenodd"
></path>
</svg>
</span>
</label>
<label
for="checkbox"
class="mt-px cursor-pointer select-none font-light text-gray-700"
>
Remember Me
</label>
</div>
</div>
</div>
<div class="p-6 pt-0">
<button
data-ripple-light="true"
type="button"
class="block w-full select-none rounded-lg bg-gradient-to-tr from-cyan-600 to-cyan-400 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-cyan-500/20 transition-all hover:shadow-lg hover:shadow-cyan-500/40 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
>
Sign In
</button>
<p
class="mt-6 flex justify-center font-sans text-sm font-light leading-normal text-inherit antialiased"
>
Don't have an account?
<a
class="ml-1 block font-sans text-sm font-bold leading-normal text-cyan-500 antialiased"
href="#signup"
>
Sign up
</a>
</p>
</div>
</div>
کد CSS
.pointer-events-none {
pointer-events: none;
}
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.-top-1 {
top: -0.25rem;
}
.-top-1\.5 {
top: -0.375rem;
}
.left-0 {
left: 0px;
}
.left-2\/4 {
left: 50%;
}
.top-2\/4 {
top: 50%;
}
.mx-4 {
margin-left: 1rem;
margin-right: 1rem;
}
.-ml-2 {
margin-left: -0.5rem;
}
.-ml-2\.5 {
margin-left: -0.625rem;
}
.-mt-6 {
margin-top: -1.5rem;
}
.mb-4 {
margin-bottom: 1rem;
}
.ml-1 {
margin-left: 0.25rem;
}
.mt-6 {
margin-top: 1.5rem;
}
.mt-px {
margin-top: 1px;
}
.block {
display: block;
}
.flex {
display: flex;
}
.inline-flex {
display: inline-flex;
}
.grid {
display: grid;
}
.h-11 {
height: 2.75rem;
}
.h-28 {
height: 7rem;
}
.h-3 {
height: 0.75rem;
}
.h-3\.5 {
height: 0.875rem;
}
.h-5 {
height: 1.25rem;
}
.h-full {
height: 100%;
}
.w-3 {
width: 0.75rem;
}
.w-3\.5 {
width: 0.875rem;
}
.w-5 {
width: 1.25rem;
}
.w-96 {
width: 24rem;
}
.w-full {
width: 100%;
}
.min-w-\[200px\] {
min-width: 200px;
}
.-translate-x-2\/4 {
--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));
}
.-translate-y-2\/4 {
--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));
}
.cursor-pointer {
cursor: pointer;
}
.select-none {
-webkit-user-select: none;
user-select: none;
}
.appearance-none {
-webkit-appearance: none;
appearance: none;
}
.flex-col {
flex-direction: column;
}
.place-items-center {
place-items: center;
}
.items-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
.gap-4 {
gap: 1rem;
}
.overflow-hidden {
overflow: hidden;
}
.rounded-full {
border-radius: 9999px;
}
.rounded-lg {
border-radius: 0.5rem;
}
.rounded-md {
border-radius: 0.375rem;
}
.rounded-xl {
border-radius: 0.75rem;
}
.border {
border-width: 1px;
}
.border-t-transparent {
border-top-color: transparent;
}
.bg-transparent {
background-color: transparent;
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.bg-gradient-to-tr {
background-image: linear-gradient(to top right, var(--tw-gradient-stops));
}
.from-cyan-600 {
--tw-gradient-from: #0891b2 var(--tw-gradient-from-position);
--tw-gradient-to: rgb(8 145 178 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-cyan-400 {
--tw-gradient-to: #22d3ee var(--tw-gradient-to-position);
}
.bg-clip-border {
background-clip: border-box;
}
.p-3 {
padding: 0.75rem;
}
.p-6 {
padding: 1.5rem;
}
.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.py-3 {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.pt-0 {
padding-top: 0px;
}
.text-center {
text-align: center;
}
.align-middle {
vertical-align: middle;
}
.font-sans {
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
}
.text-\[11px\] {
font-size: 11px;
}
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.text-xs {
font-size: 0.75rem;
line-height: 1rem;
}
.font-bold {
font-weight: 700;
}
.font-light {
font-weight: 300;
}
.font-normal {
font-weight: 400;
}
.font-semibold {
font-weight: 600;
}
.uppercase {
text-transform: uppercase;
}
.leading-normal {
line-height: 1.5;
}
.leading-snug {
line-height: 1.375;
}
.leading-tight {
line-height: 1.25;
}
.tracking-normal {
letter-spacing: 0em;
}
.text-cyan-500 {
--tw-text-opacity: 1;
color: rgb(6 182 212 / var(--tw-text-opacity));
}
.text-gray-700 {
--tw-text-opacity: 1;
color: rgb(55 65 81 / var(--tw-text-opacity));
}
.text-inherit {
color: inherit;
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.antialiased {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.opacity-0 {
opacity: 0;
}
.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-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
0 2px 4px -2px 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-cyan-500\/20 {
--tw-shadow-color: rgb(6 182 212 / 0.2);
--tw-shadow: var(--tw-shadow-colored);
}
.shadow-cyan-500\/40 {
--tw-shadow-color: rgb(6 182 212 / 0.4);
--tw-shadow: var(--tw-shadow-colored);
}
.outline {
outline-style: solid;
}
.outline-0 {
outline-width: 0px;
}
.transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-opacity {
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.before\:pointer-events-none::before {
content: var(--tw-content);
pointer-events: none;
}
.before\:absolute::before {
content: var(--tw-content);
position: absolute;
}
.before\:left-2\/4::before {
content: var(--tw-content);
left: 50%;
}
.before\:top-2\/4::before {
content: var(--tw-content);
top: 50%;
}
.before\:mr-1::before {
content: var(--tw-content);
margin-right: 0.25rem;
}
.before\:mt-\[6\.5px\]::before {
content: var(--tw-content);
margin-top: 6.5px;
}
.before\:box-border::before {
content: var(--tw-content);
box-sizing: border-box;
}
.before\:block::before {
content: var(--tw-content);
display: block;
}
.before\:h-1::before {
content: var(--tw-content);
height: 0.25rem;
}
.before\:h-1\.5::before {
content: var(--tw-content);
height: 0.375rem;
}
.before\:h-12::before {
content: var(--tw-content);
height: 3rem;
}
.before\:w-12::before {
content: var(--tw-content);
width: 3rem;
}
.before\:w-2::before {
content: var(--tw-content);
width: 0.5rem;
}
.before\:w-2\.5::before {
content: var(--tw-content);
width: 0.625rem;
}
.before\:-translate-x-2\/4::before {
content: var(--tw-content);
--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));
}
.before\:-translate-y-2\/4::before {
content: var(--tw-content);
--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));
}
.before\:rounded-full::before {
content: var(--tw-content);
border-radius: 9999px;
}
.before\:rounded-tl-md::before {
content: var(--tw-content);
border-top-left-radius: 0.375rem;
}
.before\:border-l::before {
content: var(--tw-content);
border-left-width: 1px;
}
.before\:border-t::before {
content: var(--tw-content);
border-top-width: 1px;
}
.before\:opacity-0::before {
content: var(--tw-content);
opacity: 0;
}
.before\:transition-all::before {
content: var(--tw-content);
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.before\:transition-opacity::before {
content: var(--tw-content);
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.after\:pointer-events-none::after {
content: var(--tw-content);
pointer-events: none;
}
.after\:ml-1::after {
content: var(--tw-content);
margin-left: 0.25rem;
}
.after\:mt-\[6\.5px\]::after {
content: var(--tw-content);
margin-top: 6.5px;
}
.after\:box-border::after {
content: var(--tw-content);
box-sizing: border-box;
}
.after\:block::after {
content: var(--tw-content);
display: block;
}
.after\:h-1::after {
content: var(--tw-content);
height: 0.25rem;
}
.after\:h-1\.5::after {
content: var(--tw-content);
height: 0.375rem;
}
.after\:w-2::after {
content: var(--tw-content);
width: 0.5rem;
}
.after\:w-2\.5::after {
content: var(--tw-content);
width: 0.625rem;
}
.after\:flex-grow::after {
content: var(--tw-content);
flex-grow: 1;
}
.after\:rounded-tr-md::after {
content: var(--tw-content);
border-top-right-radius: 0.375rem;
}
.after\:border-r::after {
content: var(--tw-content);
border-right-width: 1px;
}
.after\:border-t::after {
content: var(--tw-content);
border-top-width: 1px;
}
.after\:transition-all::after {
content: var(--tw-content);
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.checked\:border-cyan-500:checked {
--tw-border-opacity: 1;
border-color: rgb(6 182 212 / var(--tw-border-opacity));
}
.checked\:bg-cyan-500:checked {
--tw-bg-opacity: 1;
background-color: rgb(6 182 212 / var(--tw-bg-opacity));
}
.checked\:before\:bg-cyan-500:checked::before {
content: var(--tw-content);
--tw-bg-opacity: 1;
background-color: rgb(6 182 212 / var(--tw-bg-opacity));
}
.placeholder-shown\:border:placeholder-shown {
border-width: 1px;
}
.hover\:shadow-lg:hover {
--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);
}
.hover\:shadow-cyan-500\/40:hover {
--tw-shadow-color: rgb(6 182 212 / 0.4);
--tw-shadow: var(--tw-shadow-colored);
}
.hover\:before\:opacity-10:hover::before {
content: var(--tw-content);
opacity: 0.1;
}
.focus\:border-2:focus {
border-width: 2px;
}
.focus\:border-cyan-500:focus {
--tw-border-opacity: 1;
border-color: rgb(6 182 212 / var(--tw-border-opacity));
}
.focus\:border-t-transparent:focus {
border-top-color: transparent;
}
.focus\:outline-0:focus {
outline-width: 0px;
}
.active\:opacity-\[0\.85\]:active {
opacity: 0.85;
}
.disabled\:pointer-events-none:disabled {
pointer-events: none;
}
.disabled\:border-0:disabled {
border-width: 0px;
}
.disabled\:opacity-50:disabled {
opacity: 0.5;
}
.disabled\:shadow-none:disabled {
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.peer:checked ~ .peer-checked\:opacity-100 {
opacity: 1;
}
.peer:placeholder-shown ~ .peer-placeholder-shown\:text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.peer:placeholder-shown ~ .peer-placeholder-shown\:leading-\[4\.1\] {
line-height: 4.1;
}
.peer:placeholder-shown
~ .peer-placeholder-shown\:before\:border-transparent::before {
content: var(--tw-content);
border-color: transparent;
}
.peer:placeholder-shown
~ .peer-placeholder-shown\:after\:border-transparent::after {
content: var(--tw-content);
border-color: transparent;
}
.peer:focus ~ .peer-focus\:text-\[11px\] {
font-size: 11px;
}
.peer:focus ~ .peer-focus\:leading-tight {
line-height: 1.25;
}
.peer:focus ~ .peer-focus\:text-cyan-500 {
--tw-text-opacity: 1;
color: rgb(6 182 212 / var(--tw-text-opacity));
}
.peer:focus ~ .peer-focus\:before\:border-l-2::before {
content: var(--tw-content);
border-left-width: 2px;
}
.peer:focus ~ .peer-focus\:before\:border-t-2::before {
content: var(--tw-content);
border-top-width: 2px;
}
.peer:focus ~ .peer-focus\:before\:\!border-cyan-500::before {
content: var(--tw-content);
--tw-border-opacity: 1 !important;
border-color: rgb(6 182 212 / var(--tw-border-opacity)) !important;
}
.peer:focus ~ .peer-focus\:after\:border-r-2::after {
content: var(--tw-content);
border-right-width: 2px;
}
.peer:focus ~ .peer-focus\:after\:border-t-2::after {
content: var(--tw-content);
border-top-width: 2px;
}
.peer:focus ~ .peer-focus\:after\:\!border-cyan-500::after {
content: var(--tw-content);
--tw-border-opacity: 1 !important;
border-color: rgb(6 182 212 / var(--tw-border-opacity)) !important;
}
.peer:disabled ~ .peer-disabled\:text-transparent {
color: transparent;
}
.peer:disabled ~ .peer-disabled\:before\:border-transparent::before {
content: var(--tw-content);
border-color: transparent;
}
.peer:disabled ~ .peer-disabled\:after\:border-transparent::after {
content: var(--tw-content);
border-color: transparent;
}