Split with Mockup — Playground

{CF} CodeFronts Back to CSS Hero Sections Split with Mockup Pure CSS

Edit any tab — preview updates live

.hs-sp {
  width: 100%;
  min-height: clamp(220px, 28vh, 100vh);
  padding: clamp(20px, 4vh, 80px) clamp(16px, 4vw, 40px);
  background: linear-gradient(135deg, #0e0e16 0%, #1a1438 100%);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 3vw, 40px);
  align-items: center;
  font-family: system-ui, sans-serif; color: #f0eeff;
}
@media (max-width: 720px) { .hs-sp { grid-template-columns: 1fr; } }
.hs-sp-l h1 {
  margin: 0 0 8px; font-size: clamp(18px, 4vw, 44px);
  font-weight: 800; line-height: 1.1; letter-spacing: -0.02em;
}
.hs-sp-l p { margin: 0 0 12px; font-size: clamp(11px, 1.5vw, 16px); color: #b8b6d4; line-height: 1.5; }
.hs-sp-cta {
  display: inline-block; padding: 7px 16px; border-radius: 7px;
  background: linear-gradient(135deg, #7c6cff, #a78bfa); color: #fff;
  font-size: clamp(11px, 1.5vw, 14px); font-weight: 600;
  text-decoration: none; transition: filter 0.15s;
}
.hs-sp-cta:hover { filter: brightness(1.12); }
.hs-sp-win {
  background: #18181f; border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}
.hs-sp-bar { background: rgba(0,0,0,0.4); padding: 6px 8px; display: flex; gap: 5px; }
.hs-sp-bar span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.18); }
.hs-sp-bar span:first-child { background: #ff6c8a; }
.hs-sp-bar span:nth-child(2) { background: #f5a84a; }
.hs-sp-bar span:nth-child(3) { background: #2eb88a; }
.hs-sp-body { padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.hs-sp-row { height: 6px; background: rgba(167,139,250,0.25); border-radius: 3px; width: 80%; }
.hs-sp-row-w { width: 50%; background: rgba(167,139,250,0.18); }
.hs-sp-card {
  height: 50px; border-radius: 5px;
  background: linear-gradient(135deg, rgba(124,108,255,0.4), rgba(255,108,138,0.3));
  margin-top: 4px;
}

Live preview Ready