JSFiddle - React, Tailwind, and code Playground

HTML

<div class="review-announcement">
            <div class="reviewarrow-top"></div>
            <div class="reviewarrow-bottom"></div>
        Exam Reviews
            <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 {
    position: absolute;
    z-index: 5;
    left:450px; top: 120px;
    height:25px; width: 165px;
    border:2px #003577 solid;
    color:#003577;
    font-weight:bold;
    font-size:18px;
    text-align:right;
    padding:15px 15px 15px 0;
}
.review-announcement:hover {
    
    color: #003577;
    background:#FAA301;
}

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

.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:-50px; z-index:1;
}



.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;
    font-weight:normal;
    margin-left:50px; text-align:left;
    
}