JSFiddle - React, Tailwind, and code Playground
by Alan Doe
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.2/css/perfect-scrollbar.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.2/js/perfect-scrollbar.js"></script>
<header class="head">
<div class="titleSection">
</div>
<div class="buttonSection">
</div>
<div class="searchSection">
</div>
</header>
<div class="content" >
<div class="contentSection" >
<div id="appEntry">
</div>
<div class="appEntry">
</div>
<div class="appEntry">
</div>
<div class="appEntry">
</div>
<div class="appEntry">
</div>
<div class="appEntry">
</div>
</div>
</div>
CSS
body
{
margin:0;
padding:0;
}
.head
{
width:100%;
height:80px;
min-width:500px;
}
.content
{
background-image:url(http://static.bhphoto.com/images/images150x150/562129.jpg);
background-size:100% 100%;
background-repeat:no-repeat;
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
z-index:-1;
min-width:800px;
min-height:400px;
}
.contentSection
{
width:80%;
min-width:500px;
height:40%;
min-height:180px;
background-color:rgb(250,250,250);
margin-right:auto;
margin-left:auto;
border-radius:10px;
box-shadow:-8px 8px 10px rgb(220,220,220);
overflow:hidden;
position:relative;
}
.appEntry
{
width:20%;
height:80%;
margin-right:20px;
margin-left:20px;
box-shadow:-8px 8px 8px rgb(240,240,240);
border-radius:3px;
border:1px solid rgb(240,240,240);
background-color:white;
display:inline-block;
}
JavaScript
$(document).ready(function()
{
$(function()
{
Ps.Initialize($(".contentSection"));
});
});