Advanced Terminal Interface - Copy this Html, Tailwind Component to your project
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF 8"> <meta name="viewport" content="width=device width, initial scale=1.0"> <title>Advanced Terminal</title> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="bg gray 900 text white font mono min h screen flex items center justify center"> <div class="w full max w 3xl mx auto bg gray 800 rounded lg shadow lg p 6"> <! Header > <div class="flex items center justify between border b border gray 700 pb 4 mb 4"> <div class="flex items center space x 2"> <div class="w 3 h 3 rounded full bg red 500"></div> <div class="w 3 h 3 rounded full bg yellow 400"></div> <div class="w 3 h 3 rounded full bg green 500"></div> </div> <span class="text gray 400 text sm">Advanced Terminal</span> </div> <! Terminal Body > <div class="h 64 overflow y auto bg gray 900 p 4 rounded lg border border gray 700"> <div class="space y 2"> <! Command Output > <div> <span class="text green 400">user@terminal:~$</span> echo "Hello, Terminal!" <div>Hello, Terminal!</div> </div> <div> <span class="text green 400">user@terminal:~$</span> ls la <div> <span class="text blue 400">drwxr xr x</span> 5 user group 4096 Jan 20 14:33 <span class="text gray 300">project</span><br> <span class="text blue 400"> rw r r </span> 1 user group 123 Jan 20 14:33 <span class="text gray 300">README.md</span> </div> </div> <! New Command Line > <div> <span class="text green 400">user@terminal:~$</span> <span class="blink text gray 300">|</span> </div> </div> </div> <! Input Area > <div class="mt 4"> <input type="text" placeholder="Type your command..." class="w full bg gray 800 text gray 300 rounded lg px 4 py 2 focus:outline none focus:ring 2 focus:ring blue 500"> </div> </div> <style> .blink { animation: blink 1s steps(2, start) infinite; } @keyframes blink { 50% { opacity: 0; } } </style> </body> </html> حسن
