Snippets Library

<aside class="sidebar">
  <div class="brand">Explyra</div>
  <nav>
    <ul>
      <li><a href="#">Dashboard</a></li>
      <li><a href="#">Settings</a></li>
    </ul>
  </nav>
</aside>

.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 20px;
}

<div class="modal-overlay">
  <div class="modal-content">
    <h2>Action Successful</h2>
    <p>Your changes have been saved.</p>
    <button>Close</button>
  </div>
</div>

.btn-gradient {
  background: linear-gradient(135deg, #6D28D9 0%, #1546C0 100%);
  color: white;
  padding: 12px 24px;
  border-radius: 12px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.btn-gradient:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(109, 40, 217, 0.3);
}

.skeleton {
  background: #eee;
  background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
  border-radius: 5px;
  background-size: 200% 100%;
  animation: 1.5s shine linear infinite;
}
@keyframes shine {
  to { background-position-x: -200%; }
}

<div class="input-group">
  <input type="text" id="name" placeholder=" " required>
  <label for="name">Full Name</label>
</div>

<style>
.input-group { position: relative; margin: 20px 0; }
input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; outline: none; }
label { position: absolute; left: 10px; top: 10px; transition: 0.2s; pointer-events: none; color: #999; }
input:focus ~ label, input:not(:placeholder-shown) ~ label {
  top: -10px; left: 5px; font-size: 12px; background: white; padding: 0 5px; color: #6D28D9;
}
</style>

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb {
  background: #6D28D9;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: #1546C0; }

function typewriter(element, text, speed = 100) {
  let i = 0;
  function type() {
    if (i < text.length) {
      element.innerHTML += text.charAt(i);
      i++;
      setTimeout(type, speed);
    }
  }
  type();
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}