JSFiddle - React, Tailwind, and code Playground

by Alan Doe

HTML

<div class="content">
  <div class="entriesContainer">
    
    <div class="entriesBubble shadow" color-picker>

      <div class="bubbleEntriesContainer shadow" color-picker>
        <p class="headingText" color-picker>favorites
        </p>
      </div>
    
    </div>
  
    <div class="navigationBubble centered-block" color-picker>
    </div>
 
 </div>
 
 <div class="entriesContainer">
    
    <div class="entriesBubble shadow" color-picker>

      <div class="bubbleEntriesContainer shadow" color-picker>
        <p class="headingText" color-picker>purchased
        </p>
      </div>
    
    </div>
  
    <div class="navigationBubble centered-block" color-picker>
    </div>
 
 </div>

</div>

CSS

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

*{
  font-family:ubuntu;
}

body
{
  background-image:url(https://demo-project-hutson.c9users.io/images/noisyBg.png);
  background-size:cover;
  background-repeat:no-repeat;
  padding:0;
  margin:0;
}

.content
{
  width:80%;
  padding: 20px 15px 20px 15px;
  box-sizing:border-box;
  border:1px solid rgb(240,240,240);
  margin-right:auto;
  margin-left:auto;
  background:rgba(245,245,245,.8);
}



.entriesContainer
{
  padding:20px;
  
}

.entriesBubble
{
  padding:10px 20px;
  border-radius:5px;
  background:rgba(250,250,250,.4);
}
.bubbleEntriesContainer
{
   min-height:240px;
   border-radius:5px;
  
  background:rgba(250,250,250,.4);
}
.shadow
{
  box-shadow: 0 0 2px rgb(210,210,210);
}

.navigationBubble
{
  background:white;
  box-shadow: 0 1px 2px rgb(220,220,220);
  width:200px;
  height:40px;
  border-bottom-left-radius:8px;
  border-bottom-right-radius:8px;
  
}

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

.headingText
{
  color:#616161;
  margin:0;
  font-size:1.2em;
  padding:10px 0 10px 40px;
}