JSFiddle - React, Tailwind, and code Playground

by dirtyd77

HTML

<div class="charting-tooltip">
    <div class="header-wrapper">
        <p class="symbol">AAPL</p>
        <p class="interval">Daily</p>
    </div>
    <div class="body-wrapper">
        <div class="head">
            <p>Wed May 14, 2014</p>
        </div>
        <div class="content">
            <p>
                <span>Open</span>
                <span>150</span>
            </p>
        </div>
    </div>
<div class="footer-wrapper">asd</div>
</div>

SCSS

.charting-tooltip {
      display: flex;
    flex-flow: column;
    flex-wrap: nowrap;
     justify-content: space-around;
    left: 350px;
    position: absolute;
    background: linear-gradient(to bottom, whitesmoke 0%, #d8dbdd 100%);
    border: solid 1px #cccccc;
    border-radius: 5px;
    -webkit-box-shadow: 0px 0px 8px 0px #aaaaaa;
    box-shadow: 0px 0px 8px 0px #aaaaaa;
    
    .header-wrapper {
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        padding: 5px;         
        flex: 1 auto; 
        
        > p {
            color: #283c4c;
            display: inline;
            margin: 0;
            text-transform: none;
        }
        
        .symbol {
            font-weight: bold;
        }
        
        .interval {
            font-style: italic;
            font-size: 12px;
        }
    }
    
    .body-wrapper {
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        flex: 1 auto; 
        .head {
            background: #e5e5e5;
            border: solid 1px #cccccc;
            border-width: 1px 0;
            color: #373737;
            text-transform: none;
            
            > p {
                font-weight: bold;
                text-align: center;
                font-size: 10px;
                padding: 5px;
                margin: 0;
            }
        }
        
        .content {
            padding: 5px 10px;
            margin: 0 auto;
            
            > div {
                text-align: left;
            }
            
            > p {
                font-size: 10px;
                margin: 0 0 5px;
                
                
                > span:last-child {
                        float: right;
                        font-weight: bold;
                    }
            }
        }
    }
    
    .footer-wrapper {
        flex: 1 auto; 
        margin: auto;
        width: 0;
        height: 0;
        border: 10px solid...