CRM Onboarding Card

jitesh208
Jan 17, 2026 3
Live Preview

Live Editor

<div class="board">
  <div class="crm-card">

    <div class="header">ON BOARDING</div>

    <div class="task">
      <div class="task-top">
        <h4>CRM Layout Draft</h4>
        <span class="date">Sept, 17</span>
      </div>

      <p>
        Designing the basic structure of the CRM dashboard.
        Focus on organizing customer data...
      </p>

      <div class="task-row">
        <div class="avatars">
          <span></span><span></span><span></span>
        </div>
        <div class="status">In Progress</div>
      </div>
    </div>

    <div class="footer">
      <div>💬 8</div>
      <div>🔗 4</div>
      <div>📁 12</div>
      <div class="add">+</div>
    </div>

  </div>
</div>
*{box-sizing:border-box}

body{
  margin:0;
  height:100vh;
  display:grid;
  place-items:center;
  background:#efefef;
  font-family:system-ui;
}

/* Outer board */
.board{
  padding:24px;
  background:#f3f3f3;
  border-radius:20px;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.05);
}

/* Main card */
.crm-card{
  max-width:250px;
  width:100%;
  background:#f8f8f8;
  border-radius:18px;
  padding:14px;
  box-shadow:
    0 20px 40px rgba(0,0,0,.15),
    inset 0 1px 0 #fff;
  animation:float 4s ease-in-out infinite;
  transition:.4s ease;
}

.crm-card:hover{
  transform:translateY(-6px);
  box-shadow:
    0 30px 60px rgba(0,0,0,.2),
    inset 0 1px 0 #fff;
}

/* Header */
.header{
  background:#66b6ff;
  color:#fff;
  text-align:center;
  font-size:12px;
  letter-spacing:1px;
  padding:6px;
  border-radius:10px;
  margin-bottom:10px;
}

/* Task card */
.task{
  background:#fff;
  border-radius:14px;
  padding:12px;
  box-shadow:0 10px 20px rgba(0,0,0,.12);
}

.task-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.task h4{
  font-size:14px;
  margin:0;
}

.date{
  font-size:11px;
  color:#888;
}

.task p{
  font-size:12px;
  color:#666;
  margin:8px 0 10px;
}

/* Avatars */
.avatars span{
  display:inline-block;
  width:22px;
  height:22px;
  border-radius:50%;
  background:#ddd;
  border:2px solid #fff;
  margin-left:-6px;
}

/* Status */
.task-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.status{
  font-size:11px;
  padding:4px 10px;
  border-radius:12px;
  background:#d8f3dc;
  color:#2d6a4f;
}

/* Footer */
.footer{
  display:flex;
  gap:10px;
  margin-top:10px;
  align-items:center;
}

.footer div{
  background:#fff;
  padding:6px 8px;
  border-radius:10px;
  font-size:11px;
  box-shadow:0 6px 12px rgba(0,0,0,.1);
}

.add{
  margin-left:auto;
  font-size:16px;
  padding:6px 10px;
}

/* Idle animation */
@keyframes float{
  50%{transform:translateY(-4px)}
}
Categories

CRM Onboarding Card

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
