JSFiddle - React, Tailwind, and code Playground

by Jasmine Johnson

HTML

<div id="nav-body">	
				<input type='text' placeholder='Search...' id='search-text-input' />
<div id='button-holder'>
    <img src='https://www.codeofaninja.com/demos/css-examples/textbox-with-search-icon-in-html-css/magnifying_glass.png' />
</div>

<input type='text' placeholder='Dropdown...' id='dropdown' />
<div id='dropdown-holder'>
    <img src='https://www.codeofaninja.com/demos/css-examples/textbox-with-search-icon-in-html-css/magnifying_glass.png' />
</div>


</div>
				 
<div class="holder">
  <div class="box box1"><img src="https://yourroadid.com/media/catalog/product/cache/1/image/800x/e56d608f7be2e9d1479ea71f668eb027/b/l/black_fidget_spinner.png" alt="Smiley face"></div>
  <div class="box box2"><img src=""></div>
</div>

<div class="holder">
  <div class="box box3"><img src="https://cdn.shopify.com/s/files/1/1862/3827/products/11_530x_a13da8bc-0c63-4b7d-b7e7-f94409312bd9_2000x.png?v=1490344219"></div>
  <div class="box box4"><img src=""></div>
</div>

<div class="holder">
  <div class="box box5"><img src="http://westhun.com/wp-content/uploads/2017/03/red.png"></div>
  <div class="box box6"></div>
</div>

<div class="holder">
  <div class="box box7"><img src="https://cdn.shopify.com/s/files/1/1790/1273/products/5_1024x1024_5154d555-ad45-4a39-8e11-09c6d6acb6a6_530x.png?v=1487703377"></div>
  <div class="box box8"></div>
</div>

CSS

.holder {
  display: inline-block;
}

.box {
  width: 17vw;
  height: 17vw;
  border: 1px solid black;
  margin-left: 6vw;
  margin-bottom: 1vw;
  margin-top: 3vw;
}

img {
    max-width: 100%;
    max-height: 100%;
}

#dropdown{
            border-top:thin solid  #e5e5e5;
            border-right:thin solid #e5e5e5;
            border-bottom:0;
            border-left:thin solid  #e5e5e5;
            box-shadow:0px 1px 1px 1px #e5e5e5;
            float:left;
            height: .3vw;
            margin: 1.8vw 0 0 4vw; 
            outline: 0;
            padding: .8vw 0 .7vw .7vw; 
            width: 30vw; 
        }
         
        #dropdown-holder{
            background-color:#f1f1f1;
            border-top:thin solid #e5e5e5;
            box-shadow:1px 1px 1px 1px #e5e5e5;
            cursor:pointer;
            float:left;
            height: 1.8vw;
            margin: 1.8vw 0 0 0;
            text-align:center;
            width: 6vw;
        }
         
        #dropdown-holder img{
            margin: .2vw;
            width: 1.5vw; 
        }
		
        #search-text-input{
            border-top:thin solid  #e5e5e5;
            border-right:thin solid #e5e5e5;
            border-bottom:0;
            border-left:thin solid  #e5e5e5;
            box-shadow:0px 1px 1px 1px #e5e5e5;
            float:left;
            height: .3vw;
            margin: 1.8vw 0 0 10vw; 
            outline:0;
            padding: .8vw 0 .7vw .7vw; 
            width:30vw; 
        }
         
        #button-holder{
            background-color:#f1f1f1;
            border-top:thin solid #e5e5e5;
            box-shadow:1px 1px 1px 1px #e5e5e5;
            cursor:pointer;
            float:left;
            height: 1.8vw;
            margin: 1.8vw 0 0 0;
            text-align:center;
            width: 6vw;
        }
         
        #button-holder img{
            margin: .2vw;
            width: 1.5vw; 
        }

        #nav-body{
          background-color: black;
  ...

JavaScript

X = screen.width;
Y = screen.height;
window.moveTo(0, 0);
window.resizeTo(X, Y)