JSFiddle - React, Tailwind, and code Playground

by akhurshid

HTML

<div class="review-announcement">
            <div id="tab">
                <div class="reviewarrow-top"></div>
                <div class="reviewarrow-bottom"></div>
                Exam Reviews
            </div>
            <div class="container">
                <div class="col_2">  
                    <h3>Midterm 1 Review</h3>              
                    <p><b>Date:</b> TBA</p>
                    <p><b>Room:</b> TBA</p>
                    <p><b>Time:</b> TBA</p>
                </div>  
                <div class="col_2">  
                    <h3>Midterm 2 Review</h3>              
                    <p><b>Date:</b> TBA</p>
                    <p><b>Room:</b> TBA</p>
                    <p><b>Time:</b> TBA</p>
                </div>  
                <div class="col_2">  
                    <h3>Final Review</h3> 
                    <p><b>Date:</b> TBA</p>
                    <p><b>Room:</b> TBA</p>
                    <p><b>Time:</b> TBA</p>
                </div>      
            </div>
        </div>

CSS

.review-announcement {
    height:55px; 
    width: 165px;
    border:2px #003577 solid;    
    text-align:right;
    position: absolute;
    right: 0px;
    top: 150px;
}


#tab { 
    position: relative; 
    z-index:5; 
    background: #fff; 
    height: 25px; 
    padding:15px 15px 15px 0;
    color:#003577;
    font-weight:bold;
    font-size:18px;
    right:0px;
}


#tab:hover {
    
    color: #003577;
    background:#FAA301;
}

.review-announcement:hover > #tab {
    color: #003577;
    background:#FAA301;
}

.review-announcement .container {
    position: absolute; 
    list-style-type: none;
    left: -9999px;
    background:#FFFFFF;
    width:530px;
    z-index: -1;
}

.review-announcement:hover > .container {
    position: absolute; 
    z-index:-1;
    text-decoration: none; 
    cursor:default;
    color: #003577;
    padding: 10px 10px 10px 10px;
    margin: 0 20px 0 0;   
    border:2px #003577 solid;
    left:-510px; 
    top:-32px; 
}



.reviewarrow-top {
    position: absolute;
    z-index: 5;
    border-style:solid;
    height:0;
    width:0;
    top: 17px;
    left: 12px;
    border-color: transparent #003577 transparent transparent;
    border-width: 10px 13px 0 0;
}
.reviewarrow-bottom {
    position: absolute;
    z-index: 5;
    border-style:solid;
    height:0;
    width:0;
    top: 27px;
    left: 12px;
    border-color: transparent #003577 transparent transparent;
    border-width: 0 13px 10px 0;
}


.review-announcement .container .col_2 {  
    display:inline;  
    float: left;  
    position: relative;  
    margin: 0 5px 10px 5px;
    width:155px;
}  
.review-announcement .container h3 {  
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size:14px;  
    font-weight:bold;
    margin:5px 0 8px 0;  
    padding-bottom:5px;  
    border-bottom:1px solid #FAA301;  
    text-align: center;
}  
.review-announcement .container p {
    font-family: Helvetica, Arial, sans-serif;
    font-size:12px;
   ...