JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<head>
  <meta charset="utf-8" />

  <title>Memoji Demo</title>
  
  <!-- Included CSS Files -->
  <link rel="stylesheet" href="style.css">

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

</head>
<body>
  
<section>
  <div class="memoji_list">
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>

  </div>
</section>

</body>
</html>

CSS

* {margin: 0; padding: 0;}
body {font-family: Helvetica Neue; font-style: normal; text-align: center; color: #111;}

section {width: 100%; display: flex; flex-direction: column;}
.memoji_list {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; list-style-type: none; padding-right: 25px;}
.memoji {float: left; background:  green; border-radius:999px; width:40px; height:40px;}
h2 {font-weight: bold; font-size: 16px; line-height: 21px; padding: 4px;}
h3 {font-weight: normal; font-size: 14px; padding: 4px; color: #aaa;}
p {font-weight: 500; font-size: 14px; padding: 4px;}