JSFiddle - React, Tailwind, and code Playground

by Imri Paloja

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<div class="container">
  <div class="row">
    <div class="one column" style="background-color: #000000 !important">
      <p>Black</p>
    </div>

    <div class="one column" style="background-color: #36454f !important">
      <p>Charcoal</p>
    </div>

    <div class="one column" style="background-color: #343434 !important">
      <p>Jet Black</p>
    </div>

    <div class="one column" style="background-color: #1b1212 !important">
      <p>Licorice</p>
    </div>

    <div class="one column" style="background-color: #28282b !important">
      <p>Matte Black</p>
    </div>

    <div class="one column" style="background-color: #353935 !important">
      <p>Onyx</p>
    </div>
  </div>
</div>

CSS

.container {
  margin-top: 5%;
}

.container .one.column {
  color: #f9f9f9 !important;
  text-align: center;
  border-radius: 5px;
  padding: 20px 0px;
  min-width: 100px;
}