JSFiddle - React, Tailwind, and code Playground

by Megi93

HTML

<div class="box">
   <div class="flex-items">aaaa</div>
   <div class="flex-items">ddd</div>
   <div class="flex-items">ccc</div>
   <div class="flex-items">ffff</div>
	<div class="flex-items">aaaa</div>
   <div class="flex-items">ddd</div>
   <div class="flex-items">ccc</div>
   <div class="flex-items">ffff</div><div class="flex-items">aaaa</div>
   <div class="flex-items">ddd</div>
   <div class="flex-items">ccc</div>
   <div class="flex-items">ffff</div>
</div>

CSS

.flex-items {
   flex-basis: 23%;
   background: red;
   height: 25px;
   padding: 25px;
   margin-right: 2px;
}

/* or */

.flex-items {
   flex-basis: calc(25% - 15px);
}

/* or */

.flex-items {
   width: 23%;
}

/* or */

.flex-items {
   width: calc(25% - 15px);
}