JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="large_box">
      <div id="large_pct">
        <div class="buttonContainer">
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
        </div>
        <div class="bBar">
            <span></span>
        </div>
        <div class="bBar">
            <span></span>
        </div>
      </div>
      <div class="search_bar">
          <div class="back">
              <div class="arrow"></div>
          </div>
          <div class="forward">
              <div class="arrow2"></div>
          </div>
          <input id="search" type="search" name="chromsearch"/>
          <input id="submit" type="submit" value="Search" name="Search"/>
      </div>
    <div class="body_area">
        <iframe src="http://www.theworstportfolioever.com"></iframe>        
    </div>
    </div>
</body>

CSS

body
{
    margin: 0 auto;
    padding:15px;
    font-family:'arial';
    background-color:#e2e2e2;
}

.large_box
{
    width:1000px;
    height:475px;
    position:relative;
    margin: 20px auto 0 auto;
    display:block;
    background:#f3f3f3;
    border-radius:10px;
}

.large_box a
{
    border-radius:100%;
    width:15px;
    display:inline-block;
    height:15px;
    margin-right:10px;
    background-color:#e56e6e;
}

.buttonContainer
{
    width:15%;
    padding:15px 0px 0px 15px;
    float:left;
}

.large_box a:nth-child(2)
{
    background-color:#debb4e;
}

.large_box a:nth-child(3)
{
    background-color:#40d38a;
}

#large_pct
{
    width:600px;
    height:30px;
}

.bBar
{
    width:30%;
    padding: 15px 0px 0px 15px;
    height:0;
    position:relative;
    z-index:20;
    float:left;
    border-top-left-radius:25px;
    border-top-right-radius:25px;
	border-bottom: 30px solid #ededed;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
}

.bBar span
{
    width:13px;
    height:13px;
    border-radius:100%;
    display:block;
    margin-top:7px;
    float:right;
    background-color:#e0e0e0;
}

.bBar span:hover
{
    color:white;
    display:block;
    background:#e7928f;
    cursor:pointer;
}

.bBar:nth-child(3)
{
    border-bottom-color:#e4e4e4;
    margin-left:-20px;
    z-index:5;
}

.bBar:nth-child(3):active
{
    z-index:21;
}

.bBar:nth-child(3) span
{
    background-color:#d4d4d4;
}

.search_bar
{
    width:auto;
    margin-top:15px;
    height:37px;
    background-color:#ededed;
}

.search_bar .back
{
    width:38px;
    height:29px;
    float:left;
    display:inline-block;
    padding-top:8px;
    /*background-color:#d4d4d4;*/
}

.search_bar .forward
{
    width:38px;
    height:29px;
    float:left;
    display:inline-block;
    padding-top:8px;
    /*background-color:#d4d4d4;*/
}

.arrow
{
    width:0;
    height:0;
    margin: 0 auto;
    border-top:8px solid transparent;
    border-bottom: 8px solid...