JSFiddle - React, Tailwind, and code Playground

by Alan Doe

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<div class="sectionContainer">

  <div class="sectionHeader">
    <p class="headerTitle">Games</p>
    
    <div class="sectionSelection">
      <span class="selectionSection selectedSection">Popular</span>
      <span class="selectionSection regularSection">New</span>
       <span class="selectionSection regularSection">Hot</span>
    </div>
  </div>
  
  <div class="sectionEntries">
  </div>

</div>

CSS

@font-face
{
  font-family:ubuntu;
  src:url(https://demo-project-hutson.c9users.io/fonts/ubuntu.ttf);
}

*
{
  font-family:ubuntu;
}

.centered
{
  margin-right:auto;
  margin-left:auto;
}

.sectionContainer
{
  padding:16px;
}

.sectionHeader
{
  padding-top:15px;
  text-align:center;
  color:white;
  background:deepskyblue;
   border-top-right-radius:20px;
  border-top-left-radius:20px;
}

.sectionSelection
{
  padding:3px 0 0 10px;
  text-align:left;
}

.selectionSection
{
  padding:2px 15px 0 15px;
  border-top-right-radius:8px;
  border-top-left-radius:8px;
  cursor:pointer;
  position:relative;
  top:1px;
  border-top:1px dotted rgb(240,240,240);
  border-left:1px dotted rgb(240,240,240);
  border-right:1px dotted rgb(240,240,240);
}

.headerTitle
{
  font-size:2em;
  text-shadow:0 0 1px #f2f2f2;
  margin:5px;
}

.selectedSection
{
  background:white; 
  color:deepskyblue;
}

.regularSection
{
  background:deepskyblue;
  color:white;
}

.sectionEntries
{
  height:250px;
  background:White;
}

.entry
{
  display:inline-block;
  width:130px;
  height:130px;
  background:chartreuse;
}