پیشنمایش زنده
کد HTML
<div class="terminal p-5 rounded-lg font-mono min-w-[480px]">
<div
class="terminal-header bg-zinc-700 text-white p-2 rounded-t-lg flex items-center"
>
<span class="text-red-500 text-5xl leading-[0px] align-middle -mt-2"
>•</span
>
<span class="text-yellow-500 text-5xl leading-[0px] align-middle -mt-2 ml-1"
>•</span
>
<span class="text-green-500 text-5xl leading-[0px] align-middle -mt-2 ml-1"
>•</span
>
<span class="ml-4 align-baseline">authentication --- bash - zsh </span>
</div>
<div class="pl-4 pt-2 bg-gray-900 max-h-[500px] overflow-auto" id="output">
<p class="text-gray-500">You need to authenticate to continue!</p>
<p class="text-sky-300">Enter 1 to login</p>
<p class="text-sky-300">Enter 2 to register</p>
</div>
<div
class="input flex pl-4 bg-gray-900 pb-4 rounded-b-lg items-center"
id="terminal-input-container"
>
<span class="text-green-500">➝</span>
<span class="text-sky-300 ml-2">~</span>
<span class="ml-2 text-md text-gray-500" id="placeholder"></span>
<input
class="bg-transparent border-none outline-none ring-0 focus:ring-0 text-amber-400 w-full"
id="terminal-input"
type="text"
/>
</div>
</div>
کد CSS
.-mt-2{margin-top:-0.5rem}.ml-1{margin-left:0.25rem}.ml-2{margin-left:0.5rem}.ml-4{margin-left:1rem}.flex{display:flex}.max-h-\[500px\]{max-height:500px}.w-full{width:100%}.min-w-\[480px\]{min-width:480px}.items-center{align-items:center}.overflow-auto{overflow:auto}.rounded-lg{border-radius:0.5rem}.rounded-b-lg{border-bottom-right-radius:0.5rem;border-bottom-left-radius:0.5rem}.rounded-t-lg{border-top-left-radius:0.5rem;border-top-right-radius:0.5rem}.border-none{border-style:none}.bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39 / var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.bg-zinc-700{--tw-bg-opacity:1;background-color:rgb(63 63 70 / var(--tw-bg-opacity))}.p-2{padding:0.5rem}.p-5{padding:1.25rem}.pb-4{padding-bottom:1rem}.pl-4{padding-left:1rem}.pt-2{padding-top:0.5rem}.align-baseline{vertical-align:baseline}.align-middle{vertical-align:middle}.font-mono{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}.text-5xl{font-size:3rem;line-height:1}.leading-\[0px\]{line-height:0px}.text-amber-400{--tw-text-opacity:1;color:rgb(251 191 36 / var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity))}.text-green-500{--tw-text-opacity:1;color:rgb(34 197 94 / var(--tw-text-opacity))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68 / var(--tw-text-opacity))}.text-sky-300{--tw-text-opacity:1;color:rgb(125 211 252 / var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.text-yellow-500{--tw-text-opacity:1;color:rgb(234 179 8 / var(--tw-text-opacity))}.outline-none{outline:2px solid transparent;outline-offset:2px}.ring-0{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.focus\:ring-0:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}