JSFiddle - React, Tailwind, and code Playground
by Juan estrada
HTML
<body>
<header id="top">
<div class="container_nav">
<div class="logo_nav" >
<a class="log "href="https://medium.com/@jestradaf22">Etsy</a>
</div>
<div class="search_nav">
<form id="searchbox_nav" action="">
<input id="search" type="text" placeholder="Search For Items">
<input id="submit" type="submit" value="Search">
</form>
</div>
<div class="browse_nav">
<span class="browse_text">Browse</span>
</div>
</div>
</header>
<div class="content">
<div class="aside_all">
<h5>Show Results For:</h5>
<div class="aside_outer">
<div class="aside_inner">
<ul>
<li>
<a class="aside_links" href="#"><span class="aside_text">Beer</span>
</li>
<li>
<a class="aside_links" href="#"><span class="aside_text">Sports</span>
</li>
<li>
<a class="aside_links" href="#"><span class="aside_text">Cars</span>
</li>
<li>
<a class="aside_links" href="#"><span class="aside_text">Guns</span>
</li>
<li>
<a class="aside_links" href="#"><span class="aside_text">Grilling Stuff</span>
</li>
<li>
<a class="aside_links" href="#"><span class="aside_text">Tools</span>
</li>
<li>
<a class="aside_links" href="#"><span class="aside_text">Beards</span>
</li>
<li>
<a class="aside_links" href="#"><span class="aside_text">Beard Accessories</span>
</li>
<li>
<a class="aside_links" href="#"><span class="aside_text">Bare Knuckle Boxing</span>
</li>
<li>
<a class="aside_links" href="#"><span class="aside_text">Explosions</span>
</li>
<li>
<a class="aside_links" href="#"><span...CSS
*{
box-sizing: border-box;
}
img {
max-width: 100%;
}
body{
background-color: rgb(245,245,241);
}
/*header*/
header{
background-color: white;
}
#top{
border-bottom: 2px solid gray;
position: static;
}
.container_nav{
/*border: 2px solid black;*/
height: 70px;
width: 80%;
margin: 0 auto;
}
.logo_nav{
float: left;
display: inline-block;
/*border: 2px solid red;*/
border-radius: 6px;
/*background-color: #FF6600;*/
width:75px;
height: 70px;
}
.log{
font-size: 42px;
text-decoration: none;
color: #FF6600;
}
.search_nav{
float: left;
/*border: 2px solid gray;*/
width: 35%;
height: 70px;
}
#search{
margin-top: 15px;
margin-left: 10px;
height: 30px;
width: 65%;
font-size: 16px;
}
#submit{
display: inline-block;
margin-left: -5px;
height: 35px;
width: 30%;
font-size: 16px;
background-color: rgb(100,166,195);
color: white;
}
.browse_nav{
display: inline-block;
/*border: 2px solid blue;*/
height: 70px;
width: 70px;
text-align: center;
}
/*header*/
.content_body{
margin-top: 70px;
}
.content{
width: 80%;
margin: 0 auto;
border: 2px solid green;
}
.aside_all{
border:2px solid blue;
display: inline-block;
float: left;
width: 25%;
}
h5{
display: block;
margin: 0;
font-size: 1em;
padding-bottom: 9px;
}
.aside_inner{
border:2px solid red;
background-color: white;
}
li{
list-style: none;
}
.aside_text{
color: rgb(100,166,195);
line-height: 1.5;
font-size: 1em;
}
.aside_links{
text-decoration: none;
}
.grid{
border:2px solid red;
float: left;
width: 70%;
height: auto;
}
.grid_info{
display: inline-block;
}
.grid_left{
float: left;
}
.grid_info_link{
text-decoration: none;
color: rgb(100,166,195);
}
.grid_info_common{
font-size: 1em;
}
.grid_info_etzy{
padding-left: 8px;
color: rgb(100,166,195);
font-size: 1em;
}
/*needs to be GET from API*/
.grid_info_api{
}
.grid_right{
float: right;
}
.grid_inner{
display: block;
border: 2px...