Note Box
Home
Snippets
Note Box
HTML
CSS
JS
<div class="note-box"> <h4>📌 Note</h4> <p>This is a appealing note box. Use it to display tips, alerts, or key points anywhere on your site.</p> </div>
body { margin: 0; background: #f0f4f8; height: 100vh; display: flex; justify-content: center; align-items: center; font-family: system-ui, sans-serif; } .note-box { position: relative; width: 300px; padding: 20px 25px; background: #fff; border-left: 6px solid #4f46e5; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); animation: slideIn 0.6s ease-out; } .note-box::before { content: ""; position: absolute; top: 0; left: -6px; width: 6px; height: 100%; background: linear-gradient(#4f46e5, #6366f1); border-top-left-radius: 10px; border-bottom-left-radius: 10px; } .note-box h4 { margin: 0 0 10px; color: #1e293b; } .note-box p { margin: 0; color: #475569; line-height: 1.5; font-size: 15px; } @keyframes slideIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
//javascript
Ad #1
Ad #2
Scroll to Top