پیشنمایش زنده
کد HTML
<div class="max-w-xl w-full mx-auto bg-gray-900 rounded-xl overflow-hidden">
<div class="max-w-md mx-auto pt-12 pb-14 px-5 text-center">
<div
class="inline-flex items-center justify-center w-12 h-12 mb-5 rounded-full"
>
<svg
viewBox="0 0 48 48"
height="100"
width="100"
y="0px"
x="0px"
xmlns="http://www.w3.org/2000/svg"
>
<linearGradient
gradientUnits="userSpaceOnUse"
y2="37.081"
y1="10.918"
x2="10.918"
x1="37.081"
id="SVGID_1__8tZkVc2cOjdg_gr1"
>
<stop stop-color="#60fea4" offset="0"></stop>
<stop stop-color="#6afeaa" offset=".033"></stop>
<stop stop-color="#97fec4" offset=".197"></stop>
<stop stop-color="#bdffd9" offset=".362"></stop>
<stop stop-color="#daffea" offset=".525"></stop>
<stop stop-color="#eefff5" offset=".687"></stop>
<stop stop-color="#fbfffd" offset=".846"></stop>
<stop stop-color="#fff" offset="1"></stop>
</linearGradient>
<circle
fill="url(#SVGID_1__8tZkVc2cOjdg_gr1)"
r="18.5"
cy="24"
cx="24"
></circle>
<path
d="M35.401,38.773C32.248,41.21,28.293,42.66,24,42.66C13.695,42.66,5.34,34.305,5.34,24 c0-2.648,0.551-5.167,1.546-7.448"
stroke-width="3"
stroke-miterlimit="10"
stroke-linejoin="round"
stroke-linecap="round"
stroke="#10e36c"
fill="none"
></path>
<path
d="M12.077,9.646C15.31,6.957,19.466,5.34,24,5.34c10.305,0,18.66,8.354,18.66,18.66 c0,2.309-0.419,4.52-1.186,6.561"
stroke-width="3"
stroke-miterlimit="10"
stroke-linejoin="round"
stroke-linecap="round"
stroke="#10e36c"
fill="none"
></path>
<polyline
points="16.5,23.5 21.5,28.5 32,18"
stroke-width="3"
stroke-miterlimit="10"
stroke-linejoin="round"
stroke-linecap="round"
stroke="#10e36c"
fill="none"
></polyline>
</svg>
</div>
<h4 class="text-xl text-gray-100 font-semibold mb-5">
Your account is activated!
</h4>
<p class="text-gray-300 font-medium">
Account has been verified Successfully.
</p>
</div>
<div class="pt-5 pb-6 px-6 text-right bg-gray-800 -mb-2">
<a
href="#"
class="inline-block w-full sm:w-auto py-3 px-5 mb-2 mr-4 text-center font-semibold leading-6 text-gray-200 bg-gray-500 hover:bg-gray-400 rounded-lg transition duration-200"
>Cancel</a
><a
href="#"
class="inline-block w-full sm:w-auto py-3 px-5 mb-2 text-center font-semibold leading-6 text-blue-50 bg-green-500 hover:bg-green-600 rounded-lg transition duration-200"
>Confirm</a
>
</div>
</div>
کد CSS
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.-mb-2 {
margin-bottom: -0.5rem;
}
.mb-2 {
margin-bottom: 0.5rem;
}
.mb-5 {
margin-bottom: 1.25rem;
}
.mr-4 {
margin-right: 1rem;
}
.inline-block {
display: inline-block;
}
.inline-flex {
display: inline-flex;
}
.h-12 {
height: 3rem;
}
.w-12 {
width: 3rem;
}
.w-full {
width: 100%;
}
.max-w-md {
max-width: 28rem;
}
.max-w-xl {
max-width: 36rem;
}
.items-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
.overflow-hidden {
overflow: hidden;
}
.rounded-full {
border-radius: 9999px;
}
.rounded-lg {
border-radius: 0.5rem;
}
.rounded-xl {
border-radius: 0.75rem;
}
.bg-gray-500 {
--tw-bg-opacity: 1;
background-color: rgb(107 114 128 / var(--tw-bg-opacity));
}
.bg-gray-800 {
--tw-bg-opacity: 1;
background-color: rgb(31 41 55 / var(--tw-bg-opacity));
}
.bg-gray-900 {
--tw-bg-opacity: 1;
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
}
.bg-green-500 {
--tw-bg-opacity: 1;
background-color: rgb(34 197 94 / var(--tw-bg-opacity));
}
.px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.py-3 {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.pb-14 {
padding-bottom: 3.5rem;
}
.pb-6 {
padding-bottom: 1.5rem;
}
.pt-12 {
padding-top: 3rem;
}
.pt-5 {
padding-top: 1.25rem;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.font-medium {
font-weight: 500;
}
.font-semibold {
font-weight: 600;
}
.leading-6 {
line-height: 1.5rem;
}
.text-blue-50 {
--tw-text-opacity: 1;
color: rgb(239 246 255 / var(--tw-text-opacity));
}
.text-gray-100 {
--tw-text-opacity: 1;
color: rgb(243 244 246 / var(--tw-text-opacity));
}
.text-gray-200 {
--tw-text-opacity: 1;
color: rgb(229 231 235 / var(--tw-text-opacity));
}
.text-gray-300 {
--tw-text-opacity: 1;
color: rgb(209 213 219 / var(--tw-text-opacity));
}
.transition {
transition-property: color, background-color, border-color, fill, stroke,
opacity, box-shadow, transform, filter, -webkit-text-decoration-color,
-webkit-backdrop-filter;
transition-property: color, background-color, border-color,
text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
backdrop-filter;
transition-property: color, background-color, border-color,
text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.duration-200 {
transition-duration: 200ms;
}
.hover\:bg-gray-400:hover {
--tw-bg-opacity: 1;
background-color: rgb(156 163 175 / var(--tw-bg-opacity));
}
.hover\:bg-green-600:hover {
--tw-bg-opacity: 1;
background-color: rgb(22 163 74 / var(--tw-bg-opacity));
}
@media (min-width: 640px) {
.sm\:w-auto {
width: auto;
}
}