JSFiddle - React, Tailwind, and code Playground

by Haze32

HTML

<div class="dpwCardWrap">
        <div class="dpwCard">
            <h3>What's New</h3>
            <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            </ul>
        </div>
        <div class="dpwCard">
            <h3>Now Available</h3>
            <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            </ul>
        </div>
        <div class="dpwCard">
            <h3>Coming Soon</h3>
            <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            </ul>
        </div>
    </div>

CSS

.dpwCardWrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  justify-content: center;
  margin: 0 auto;
}
.dpwCard {
  position: relative;
  border-left-width: var(--bord-w);
  border-right-width: var(--bord-w);
  border-left-style: solid;
  border-right-style: solid;
  border-radius: 6px;
  background-color: var(--white);
  color: var(--dark-gray);
  border-radius: 10px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  transition: background-color 0.3s ease;
  text-align: center;
}
.dpwCard ul li{
  text-align:left;
}