Bauhaus UI Card

jitesh208
Jan 17, 2026 3
Live Preview

Live Editor

<div class="bauhaus-card">
  <!-- Top icons -->
  <div class="top-row">
    <div class="pill red-shape"></div>
    <div class="pill green-plus">+</div>
    <div class="pill dots">
      <span></span><span></span><span></span><span></span>
    </div>
  </div>

  <!-- Profile -->
  <div class="profile">
    <img src="https://i.pravatar.cc/60?img=12">
    <div>
      <strong>Astrid S.</strong>
      <span class="status">Active</span>
    </div>
  </div>

  <!-- Title -->
  <h1>BAUHAUS</h1>

  <!-- Upload -->
  <div class="upload">
    ☁ Upload files
  </div>

  <!-- Search + status -->
  <div class="row">
    <div class="search">
      Search
      <span>🔍</span>
    </div>
    <div class="available">● Available</div>
  </div>

  <!-- Bottom controls -->
  <div class="controls">
    <div class="circle red"></div>
    <div class="combo">
      <span>M</span>
      <span class="dot"></span>
      ⌄
    </div>
    <div class="notify">⏰<small>Notify</small></div>
  </div>
</div>
body{
  background:#efece6;
  display:grid;
  place-items:center;
  height:100vh;
  font-family:system-ui, sans-serif;
}

.bauhaus-card{
  width:250px;
  background:#f8f7f4;
  border-radius:26px;
  padding:16px;
  box-shadow:
    0 20px 40px rgba(0,0,0,.15),
    inset 0 1px 0 #fff;
}

/* Pills */
.pill{
  height:34px;
  border-radius:18px;
  background:#fff;
  display:grid;
  place-items:center;
  box-shadow:0 6px 12px rgba(0,0,0,.12);
}

.top-row{
  display:flex;
  gap:10px;
}

.red-shape{
  width:64px;
  background:
    linear-gradient(135deg,#e94b35 50%,transparent 0),
    linear-gradient(225deg,#e94b35 50%,transparent 0);
  background-size:20px 20px;
}

.green-plus{
  width:40px;
  background:#1fa36a;
  color:#fff;
  font-weight:700;
}

.dots{
  width:40px;
  display:grid;
  grid-template-columns:repeat(2,8px);
  gap:4px;
}
.dots span{
  width:8px;height:8px;
  border-radius:50%;
}
.dots span:nth-child(1){background:#1f5bd6}
.dots span:nth-child(2){background:#111}
.dots span:nth-child(3){background:#f1b400}
.dots span:nth-child(4){background:#e94b35}

/* Profile */
.profile{
  display:flex;
  align-items:center;
  gap:10px;
  margin:16px 0;
  background:#111;
  color:#fff;
  padding:8px;
  border-radius:18px;
}
.profile img{
  width:36px;height:36px;border-radius:50%;
}
.status{
  display:block;
  font-size:12px;
  color:#5cff9b;
}

/* Title */
h1{
  font-size:26px;
  margin:14px 0;
  letter-spacing:1px;
}

/* Upload */
.upload{
  border:2px dashed #ccc;
  padding:12px;
  border-radius:16px;
  text-align:center;
  font-size:14px;
  margin-bottom:14px;
}

/* Search + available */
.row{
  display:flex;
  gap:10px;
}
.search{
  flex:1;
  background:#fff;
  padding:10px;
  border-radius:14px;
  display:flex;
  justify-content:space-between;
}
.available{
  background:#c9f1d8;
  padding:10px;
  border-radius:14px;
  font-size:13px;
}

/* Bottom controls */
.controls{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:14px;
}

.circle.red{
  width:34px;height:34px;
  background:#e94b35;
  border-radius:50%;
}

.combo{
  flex:1;
  background:#f1b400;
  padding:8px;
  border-radius:14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.combo .dot{
  width:10px;height:10px;
  background:#e94b35;
  border-radius:50%;
}

.notify{
  background:#fff;
  padding:6px 10px;
  border-radius:14px;
  font-size:12px;
  text-align:center;
}
Categories

Bauhaus UI Card

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
