JSFiddle - React, Tailwind, and code Playground

by kodjoe mambi

HTML

<div class="card-container">

<div class="card" id="one">
one
</div>

<div class="card" id="two">
two
</div>

<div class="card" id="three">
three
</div>

</div>

CSS

html, body {
height: 100%;
margin: 0;
padding: 0;
}

#one {
background: red;
}

#two {
background: yellow;
}

#three {
background: green;
}

/* coockie banner right space */
.cookie-banner.cookie-banner__bottom-right {
width: 100%!important;
}

a {
color: white;
}

.card-container {
width: 100%;
}


.card {
max-width: 500px;
width: 33.3%;
min-height: 260px;
padding: 40px 40px 20px 40px;
border-radius: 20px;
background: #282828;
color: white;
float: left;
}

.card-container .card {
box-sizing: border-box;
-moz-box-sizing: border-box;
}


@media screen and (max-width: 1024px) {
.card {
width: auto;
float: none;
    }
}