Capture your own elements →Add to Chrome - It's Free

HTML

<div class="demo">
  <div class="card">
    <div class="card-icon">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect x="3" y="3" width="8" height="8" rx="2" fill="#3b82f6"/>
        <rect x="13" y="3" width="8" height="8" rx="2" fill="#93c5fd"/>
        <rect x="3" y="13" width="8" height="8" rx="2" fill="#93c5fd"/>
        <rect x="13" y="13" width="8" height="8" rx="2" fill="#3b82f6"/>
      </svg>
    </div>
    <h3 class="card-title">Modular Design</h3>
    <p class="card-body">Build complex UIs from small, composable components. Each piece works independently and integrates seamlessly.</p>
  </div>
</div>

CSS

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: system-ui, -apple-system, sans-serif;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
}
.card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 28px;
  max-width: 320px;
  width: 100%;
}
.card-icon {
  width: 48px;
  height: 48px;
  background: #eff6ff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 8px;
}
.card-body {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.6;
}