پیشنمایش زنده
کد HTML
<aside class="bg-black text-white p-6 rounded-lg w-full max-w-lg font-mono">
<div class="flex justify-between items-center">
<div class="flex space-x-2 text-red-500">
<div class="w-3 h-3 rounded-full bg-red-500"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
<div class="w-3 h-3 rounded-full bg-green-500"></div>
</div>
<p class="text-sm">bash</p>
</div>
<div class="mt-4">
<p class="text-green-400">$ npm install next</p>
<p class="text-white">+ next@10.2.3</p>
<p class="text-white">added 1 package, and audited 2 packages in 3s</p>
<p class="text-green-400">$</p>
</div>
</aside>
کد CSS
.mt-4 {
margin-top: 1rem
}
.flex {
display: flex
}
.h-3 {
height: 0.75rem
}
.w-3 {
width: 0.75rem
}
.w-full {
width: 100%
}
.max-w-lg {
max-width: 32rem
}
.items-center {
align-items: center
}
.justify-between {
justify-content: space-between
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))
}
.rounded-full {
border-radius: 9999px
}
.rounded-lg {
border-radius: 0.5rem
}
.bg-black {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity))
}
.bg-green-500 {
--tw-bg-opacity: 1;
background-color: rgb(34 197 94 / 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-6 {
padding: 1.5rem
}
.font-mono {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
}
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem
}
.text-green-400 {
--tw-text-opacity: 1;
color: rgb(74 222 128 / var(--tw-text-opacity))
}
.text-red-500 {
--tw-text-opacity: 1;
color: rgb(239 68 68 / var(--tw-text-opacity))
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity))
}