JSFiddle - React, Tailwind, and code Playground

HTML

<div class="example">
 <ul>
  <li>block</li>
  <li>block</li>
  <li>block</li>
  <li>block</li>
  <li>block</li>
  <li>block</li>
  <li>block</li>
  <li>block</li>
  <li>block</li>
 </ul>
</div>
<div class="example">
 <ul>
  <li>block</li>
  <li>block</li>
  <li>block</li>
  <li>block</li>
  <li>block</li>
  <li>block</li>
  <li>block</li>
  <li>block</li>
 </ul>
</div>
<div class="example">
 <ul>
  <li>block</li>
  <li>block</li>
  <li>block</li>
  <li>block</li>
  <li>block</li>
  <li>block</li>
  <li>block</li>
 </ul>
</div>

CSS

.example { background: #fff; overflow: hidden; padding: 1em; -moz-border-radius: 14px; -webkit-border-radius: 14px; border-radius: 14px; }
.example ul { overflow: hidden; padding: .5em; margin: 0; width: 13em; background: #dd0; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; }
.example li { float: left; background: #0dd; list-style: none; padding: 0; margin: 0; width: 4em; height: 2em; line-height: 2em; margin: 0em 0.5em 0.5em 0em; text-align: center; }
.example li:nth-child(3n) { margin-right: 0; }
.example li:first-child { color:red; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; border-top-left-radius: 10px; } /* okay to use :first-child here because the first block will always be in the top left corner */
.example li.bottom-right-corner { -moz-border-radius-bottomright: 10px; -webkit-border-bottom-right-radius: 10px; border-bottom-right-radius: 10px; } /* can't use :last-child here, because we can't be sure the last block is in the bottom right corner */
.example li.last-row-single-item {  margin-top:  8px; }
.example ul li:nth-child(3) { -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px; border-top-right-radius: 10px; }
.example ul li.bottom-left-corner { -moz-border-radius-bottomleft: 10px; -webkit-border-bottom-left-radius: 10px; border-bottom-left-radius: 10px; }
.example ul li:nth-last-child(-n+3) { margin-bottom: 0; } /* last row */

JavaScript

// Classes to add:
// .top-right-corner, .bottom-right-corner, .bottom-left-corner
// and maybe .last-row-single-item
$(function() {
 $('.example').each(function() {
  var $li = $('li', this),
   liLength = $li.length,
   m = liLength % 3;
  if (!m) { // easy mode: last row contains three items
   $li.last().addClass('bottom-right-corner')
             .prev().prev().addClass('bottom-left-corner');
  } else { // hard mode: last row contains less than three items
   var n = 3 - m, $bottomLeftLi = $li.last();
   if (2 !== n) {
    while (n--) {
     $bottomLeftLi = $bottomLeftLi.prev();
    };
    $bottomLeftLi.addClass('bottom-left-corner');
   } else {
    $bottomLeftLi.addClass('last-row-single-item'); 
   };
  };
 });
});