پیشنمایش زنده
کد HTML
<div
class="max-w-sm mx-auto bg-white dark:bg-zinc-800 shadow-md rounded-lg overflow-hidden"
>
<div class="px-5 py-3 flex justify-between items-center">
<h3 class="text-zinc-900 dark:text-white text-lg">Progress</h3>
<svg
stroke-width="2"
stroke="currentColor"
viewBox="0 0 24 24"
fill="none"
class="h-6 w-6 text-zinc-900 dark:text-white"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
stroke-linejoin="round"
stroke-linecap="round"
></path>
</svg>
</div>
<div class="px-5 pb-5">
<p class="mb-2 text-sm text-zinc-600 dark:text-zinc-400">
File: var/test/admin.php extracted..
</p>
<div class="w-full bg-zinc-200 dark:bg-zinc-700 rounded-full h-2.5">
<div style="width: 70%" class="bg-blue-600 h-2.5 rounded-full"></div>
</div>
<div class="flex justify-between items-center mt-3">
<span class="text-sm text-zinc-600 dark:text-zinc-400">70% Complete</span>
<button class="text-xs text-blue-600 hover:underline">Details</button>
</div>
</div>
</div>
کد CSS
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.mb-2 {
margin-bottom: 0.5rem;
}
.mt-3 {
margin-top: 0.75rem;
}
.flex {
display: flex;
}
.h-2 {
height: 0.5rem;
}
.h-2\.5 {
height: 0.625rem;
}
.h-6 {
height: 1.5rem;
}
.w-6 {
width: 1.5rem;
}
.w-full {
width: 100%;
}
.max-w-sm {
max-width: 24rem;
}
.items-center {
align-items: center;
}
.justify-between {
justify-content: space-between;
}
.overflow-hidden {
overflow: hidden;
}
.rounded-full {
border-radius: 9999px;
}
.rounded-lg {
border-radius: 0.5rem;
}
.bg-blue-600 {
--tw-bg-opacity: 1;
background-color: rgb(37 99 235 / var(--tw-bg-opacity));
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.bg-zinc-200 {
--tw-bg-opacity: 1;
background-color: rgb(228 228 231 / var(--tw-bg-opacity));
}
.px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.py-3 {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.pb-5 {
padding-bottom: 1.25rem;
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.text-xs {
font-size: 0.75rem;
line-height: 1rem;
}
.text-blue-600 {
--tw-text-opacity: 1;
color: rgb(37 99 235 / var(--tw-text-opacity));
}
.text-zinc-600 {
--tw-text-opacity: 1;
color: rgb(82 82 91 / var(--tw-text-opacity));
}
.text-zinc-900 {
--tw-text-opacity: 1;
color: rgb(24 24 27 / var(--tw-text-opacity));
}
.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);
}
.hover\:underline:hover {
-webkit-text-decoration-line: underline;
text-decoration-line: underline;
}
@media (prefers-color-scheme: dark) {
.dark\:bg-zinc-700 {
--tw-bg-opacity: 1;
background-color: rgb(63 63 70 / var(--tw-bg-opacity));
}
.dark\:bg-zinc-800 {
--tw-bg-opacity: 1;
background-color: rgb(39 39 42 / var(--tw-bg-opacity));
}
.dark\:text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.dark\:text-zinc-400 {
--tw-text-opacity: 1;
color: rgb(161 161 170 / var(--tw-text-opacity));
}
}