JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="home-card-group">
    <div class="home-row-item">Row One</div>
    <div class="home-row-item">Row Two</div>
    <div class="home-row-item">Row Three</div>
  </div>
</div>

CSS

:root {
  --bg: #F5F1EB;
  --bg2: #FFFFFF;
  --border: rgba(150, 120, 70, 0.13);
  --gold-pale: #FBF5E8;
  --r-lg: 22px;
}

body {
  margin: 0;
  background: var(--bg);
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  padding: 80px 20px;
}

.wrapper {
  width: 320px;
}

.home-card-group {
  background: var(--bg2);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
}

.home-row-item {
  padding: 16px;
  cursor: pointer;
  transition: background 0.2s;
}

.home-row-item + .home-row-item {
  border-top: 1px solid var(--border);
}

.home-row-item:hover {
  background: var(--gold-pale);
}