JSFiddle - React, Tailwind, and code Playground

by Artem Borovikov

HTML

<div class="flex">
    <div class="flex-child">
        <div class="flex-card">
            <div class="header">header</div>
            <div class="body">body</div>
            <div class="footer">footer</div>
        </div>
    </div>
    
    <div class="flex-child">
        <div class="flex-card">
            <div class="header">header</div>
            <div class="body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid fuga earum voluptate provident ipsum eaque porro. Minima veniam consequuntur magni quas laboriosam deserunt maxime corrupti architecto blanditiis, ipsum ut aperiam?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid fuga earum voluptate provident ipsum eaque porro. Minima veniam consequuntur magni quas laboriosam deserunt maxime corrupti architecto blanditiis, ipsum ut aperiam?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid fuga earum voluptate provident ipsum eaque porro. Minima veniam consequuntur magni quas laboriosam deserunt maxime corrupti architecto blanditiis, ipsum ut aperiam?</div>
            <div class="footer">footer</div>
        </div>
    </div>
    
    <div class="flex-child">
        <div class="flex-card">
            <div class="header">header</div>
            <div class="body">body</div>
            <div class="footer">footer</div>
        </div>
    </div>
    
    <div class="flex-child">
        <div class="flex-card">
            <div class="header">header</div>
            <div class="body">body</div>
            <div class="footer">footer</div>
        </div>
    </div>
    
    <div class="flex-child">
        <div class="flex-card">
            <div class="header">header</div>
            <div class="body">body</div>
            <div class="footer">footer</div>
        </div>
    </div>
    
    <div class="flex-child">
        <div class="flex-card">
            <div class="header">header</div>
            <div class="body">Lorem ipsum dolor sit amet, consectetur...

CSS

* {
    box-sizing: border-box;
}

.flex {
    display: flex;
    flex-wrap: wrap;
    margin-left: -10px;
    margin-right: -10px;
}

.flex-child {
    display: flex;
    flex: 0 0 33.3333%;
    max-width: 0 0 33.3333%;
    margin-bottom: 30px;
    padding-left: 10px;
    padding-right: 10px;
}


.flex-card {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.flex-card .header {
    height: 80px;
    background-color: green;
}

.flex-card .body {
    flex: 1;
    background-color: lightgreen;
}

.flex-card .footer {
    background-color: grey;
}