پیشنمایش زنده
کد HTML
<div class="p-4 w-[300px] rounded-lg border dark:border-gray-800">
<h1 class="text-2xl font-bold">History</h1>
<div class="grid gap-4 mt-2">
<div class="flex gap-2 items-center">
<div class="bg-red-500 w-20 h-10 rounded"></div>
<div class="grid gap-1 text-sm flex-1">
<h2 class="font-semibold leading-none line-clamp-2">
Introducing the frontend cloud
</h2>
<div class="text-xs text-gray-500 line-clamp-1 dark:text-gray-400">
1.2M views
</div>
</div>
</div>
<div class="flex gap-2 items-center">
<div class="bg-yellow-500 w-20 h-10 rounded"></div>
<div class="grid gap-1 text-sm flex-1">
<h2 class="font-semibold leading-none line-clamp-2">
Using Vercel KV with Svelte
</h2>
<div class="text-xs text-gray-500 line-clamp-1 dark:text-gray-400">
21K views
</div>
</div>
</div>
<div class="flex gap-2 items-center">
<div class="bg-blue-500 w-20 h-10 rounded"></div>
<div class="grid gap-1 text-sm flex-1">
<h2 class="font-semibold leading-none line-clamp-2">
Loading UI with Next.js 13
</h2>
<div class="text-xs text-gray-500 line-clamp-1 dark:text-gray-400">
12K views
</div>
</div>
</div>
</div>
</div>
کد CSS
.mt-2 {
margin-top: 0.5rem;
}
.line-clamp-1 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
.line-clamp-2 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.flex {
display: flex;
}
.grid {
display: grid;
}
.h-10 {
height: 2.5rem;
}
.w-20 {
width: 5rem;
}
.w-\[300px\] {
width: 300px;
}
.flex-1 {
flex: 1 1 0%;
}
.items-center {
align-items: center;
}
.gap-1 {
gap: 0.25rem;
}
.gap-2 {
gap: 0.5rem;
}
.gap-4 {
gap: 1rem;
}
.rounded {
border-radius: 0.25rem;
}
.rounded-lg {
border-radius: 0.5rem;
}
.border {
border-width: 1px;
}
.bg-blue-500 {
--tw-bg-opacity: 1;
background-color: rgb(59 130 246 / var(--tw-bg-opacity));
}
.bg-red-500 {
--tw-bg-opacity: 1;
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
}
.bg-yellow-500 {
--tw-bg-opacity: 1;
background-color: rgb(234 179 8 / var(--tw-bg-opacity));
}
.p-4 {
padding: 1rem;
}
.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-bold {
font-weight: 700;
}
.font-semibold {
font-weight: 600;
}
.leading-none {
line-height: 1;
}
.text-gray-500 {
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity));
}
@media (prefers-color-scheme: dark) {
.dark\:border-gray-800 {
--tw-border-opacity: 1;
border-color: rgb(31 41 55 / var(--tw-border-opacity));
}
.dark\:text-gray-400 {
--tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity));
}
}