JSFiddle - React, Tailwind, and code Playground

by Alan Doe

HTML

<div id="appContainer" class="bubbleBorder light-shadow">
  
  <div class="appHeader light-shadow">
  
    <div class="appCoverContainer inline centered">
      <img class="appCover" src="http://www.intrawallpaper.com/static/images/background_patterns_lines_shadow_43860_1920x1080.jpg"/>
    </div>
    
    <div class="appTitleContainer inline ">
      <p class="mediumText darkText">The lost forest</p>
      <p class="smallText darkText">in <a href="/" id="categoryAnchor" >games</a></p>
      
      <button class="openAppButton basic-button">Open</button>
      
    </div>
  
  </div>
  
  <div class="appBody">
  
    <div id="appDetails" class="centered ">
        <div class="leftContent">
           <span class="sectionSelection ">
           description
           </span>
           
           <span class="sectionSelection">
           snapshots
           </span>
           
        </div>
        <div class="snapshotContainer centered light-shadow">
            <img class="snapshot" src="http://www.planwallpaper.com/static/images/recycled_texture_background_by_sandeep_m-d6aeau9_PZ9chud.jpg"/>
        </div>
        
    </div>
    
    <div id="tagsContainer" class="centered light-shadow">
      <p class="mediumText darkText">tags</p>
        <a class="tag" href="/">Hello I am tag Hello I am tag</a>
        <a class="tag" href="/">Hello I am tag Hello I am tag</a>
        <a class="tag" href="/">Hello I am tag Hello I am tag</a>
        <a class="tag" href="/">Hello I am tag Hello I am tag</a>
        <a class="tag" href="/">Hello I am tag Hello I am tag</a>
      
    </div>
      
    </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:white;
}

.inline
{
  display:inline-block;
}

.bubbleBorder
{
  border-radius:5px;
}

#appContainer
{
  background-image:url(https://demo-project-hutson.c9users.io/images/noisyBg.png);
  background-size:cover;
  background-repeat:no-repeat;
  border-radius: 5px;

padding:10px 20px 10px 20px;
min-width:300px;
width:500px;
}

.light-shadow
{
 box-shadow:0 0 2px rgb(230,230,230); 
}

.medium-shadow
{
  box-shadow:0 0 2px rgb(210,210,210); 
}
.appHeader
{
  padding:15px 10px 5px 10px;
  border-radius:20px;
  
}

.appCover
{
  
  width:150px;
  height:150px;
  border-radius:8px;
}

.mediumText
{
  font-size:1.3em;
}
.smallText
{
  font-size:1.1em;
}

.darkText
{
  color:#313131;
}

.lightText
{
  color:#888;
}

#categoryAnchor
{
  color:cornflowerblue;
  text-decoration:none;
}
.appTitleContainer
{
  vertical-align:top;
  padding-left:40px;
  padding-right:40px;
}
.appBody
{
  padding:20px 10px 10px 20px;
}
.centered
{
  margin-right:auto;
  margin-left:auto;
}

#appDescription
{
  color:#313131;
  padding:10px 8px 10px 8px;
  text-indent:10px;
}
.tag
{
  color:cornflowerblue;
  display:inline-block;
  margin-left:10px;
  border-radius:5px;
  margin-top:5px;
  box-shadow:0 0 2px rgb(210,210,210);
  padding:5px 3px 5px 3px;
  text-decoration:none;
}
#tagsContainer
{
  text-align:center;
}

.basic-button
{
  outline:none;
  border:0;
  cursor:pointer;
}

.openAppButton
{
  color:white;
  background:rgb(126,236,86);
  padding:5px 10px 5px 10px;
  font-size:1.1em;
  width:100px;
}


.snapshotContainer
{
  border-radius:5px;
  padding:10px 30px 10px 30px;
 
  text-align:center;
  box-sizing:border-box;
}
.snapshot
{
  max-height:100px;
  max-width:100px;
  margin-left:-20px;
  border-radius:5px;
  
}

#appDetails
{
   min-width:80%;
}
.appSectionSelection
{
  width:30px;
  height:30px;
  padding:2px 4px 2px 4px;
 ...