پیشنمایش زنده
کد HTML
<aside class="bg-black text-white p-6 rounded-lg w-full max-w-md 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 uiverse</p>
<p class="text-white">+ uiverse@1.0.0</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-md{max-width:28rem}.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))}