پیشنمایش زنده
کد HTML
<aside class="bg-black text-white p-6 rounded-lg w-full max-w-lg">
<div class="flex justify-between items-center">
<div class="flex gap-1">
<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 class="w-3 h-3 rounded-full bg-red-500"></div>
</div>
<p class="text-sm">bash</p>
</div>
<div class="mt-4">
<p class="text-green-400">$ npm install tailwindcss</p>
<p class="text-white">+ tailwindcss@2.2.16</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}.gap-1{gap:0.25rem}.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}.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-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}