JSFiddle - React, Tailwind, and code Playground

by Alan Doe

HTML

<div class="sectionContainer">
  <div class="sectionHeader">
      <img src="https://demo-project-hutson.c9users.io/images/gamesIcon.png" class="sectionImage"/>
   
    <p class="sectionHeading">Games</p>
  </div>
  
  <div class="sectionContent">
  
    <div class="sectionSelection inline">
      <p class="selectionSection selectedSection">popular</p>
      <p class="selectionSection normalSection">new</p>
      <p class="selectionSection normalSection">hot</p>
    </div>
  
    <div class="contentSection inline">
    </div>
  
  </div>
  

</div>

CSS

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

*
{
  font-family:ubuntu;
}

div
{
  box-sizing:border-box;
}
.light-shadow
{
  box-shadow:0 0 2px rgb(230,230,230);
}
.inline
{
  display:inline-block;
}

.sectionContainer
{

}

.sectionContent
{
  margin:0;
}

.sectionHeader
{
  padding-top:32px;
  padding-left:40px;
  position:relative;
 
}

.sectionHeading
{
  color:white;
  font-size:1.9em;
  background:deepskyblue;
  padding-top:15px;
  padding-bottom:15px;
  text-align:center;
  margin:0;
}

.sectionImage
{
  width:80px;
  height:80px;
  padding:10px;
  background:rgb(126,236,86);
  border-radius:50%;
  position:absolute;
  top:0;
  left:0;
}

.sectionSelection
{

  vertical-align:top;
}

.selectionSection
{
  text-align:center;
  padding:5px 20px;

}

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

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

.contentSection
{
  background:white;
  padding:16px;
  min-height:250px;
  vertical-align:top;
}