JSFiddle - React, Tailwind, and code Playground

by FArIZzX77

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>stream</title>
        <meta name="Firz" content="LifeStyle" />
        <!-- Date: 2012-09-20 -->
        <link rel="stylesheet" href="css/style.css" />
    </head>
    <body>
<div id="header">
            <div id="mainHeader">
                <div class="left">
                    <div id="wrapper1">
                        
                        <div id="wrapper2">
                            <a href="#" style="color: red">btn1</a>
                        </div>
                                                
                        <div id="popBoxWrapper">
                            <div id="popBox">
                                popBox from btn1 here
                                <div id="popBoxArrow"></div>
                            </div>
                        </div>
                        
                    </div>
                </div>
                
                <div class="right">
                    <div id="wrapper3">
                        <div class="left">
                            <div id="wrapper4">
                                
                                <div class="left">
                                    <a href="#" style="color: red">btn2</a>
                                    <!-- i want to toggle another popbox named POPBOX2 with btn2. The LAYOUT of popBox same as btn1, but the arrow of the popBox is under btn2-->
                                </div>
                                
                                <div class="right">
                                    <a href="#" style="color: red">btn3</a>
                                    <!-- same as btn2, i want to toggle POPBOX 3 with btn3. the LAYOUT STILL SAME as popBox2 and popBox1, only the arrow is...

CSS

*{
    margin: 0;
    padding: 0;
}

body{
    background-color: #f7f7f7;
}

.right{
    float: right;
}

.left{
    float: left;
}

#header{
    top:0;
    left:0;
    width: 100%;
    height: 60px;
    background-color: #c0c0c0;
    position: fixed;
    z-index: -99;
}

#mainHeader{
    top: 0;
    left: 127px;
    position: absolute;
    z-index: -99;
    width: 610px;
    height: 60px;
    
}

#wrapper1{
    width: 610px;
    z-index: -98;
    position: absolute;
}

#wrapper2{
    margin-top: 15px;
    margin-left: 14px;
}

#wrapper3{
    margin-top: 6px;
    width: 110px;
    height: 48px;
}

#wrapper4{
    margin-top: 10px;
    width: 81px;
    height: 38px;
}

#popBoxWrapper{
    width: 600px;
    height: 175px;
    position: fixed;
    margin-left: 4px;
    margin-top: 15px;
}

#popBox{
    display: none;
    width: 600px;
    height: 175px;
    background-color: #f7f7f7;
    border: 1px solid #ececec;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
       -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

#popBoxArrow{
    width: 0;
    height: 0;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-bottom: 11px solid #f7f7f7;
    position:absolute;
    left:12px;
    top:-10px;
}